CodeKitHubWas ist dieses Tool?
In React Native sind Schatten nicht standardmäßig plattformübergreifend. iOS verwendet vier separate Style-Props (shadowColor, shadowOffset mit width/height, shadowOpacity von 0-1 und shadowRadius für die Unschärfe), die auf denselben zugrunde liegenden CoreAnimation-Schatten abgebildet werden, den auch box-shadow im Web nutzt. Androids natives View-System unterstützt beliebig geformte Schatten überhaupt nicht — es kennt nur elevation, eine einzelne Zahl, die einen festen Material-Design-Schlagschatten erzeugt, je nachdem, wie "hoch" die View zu schweben scheint.
Das bedeutet: Ein Schatten, der auf iOS mit shadowRadius/shadowOpacity gut aussieht, zeigt auf Android gar nichts, solange nicht zusätzlich elevation gesetzt ist — und beide werden nie pixelgenau identisch aussehen, da die Schattenform von elevation nicht wie bei iOS anpassbar ist. Seit React Native 0.74 mit aktivierter New Architecture gibt es außerdem eine plattformübergreifende boxShadow-Style-Eigenschaft mit derselben Syntax wie CSS.
Warum sollte man es nutzen?
- Live-Vorschau beim Anpassen von Offset, Unschärfe, Deckkraft und Farbe — statt Werte zu raten und die App zum Testen neu zu bauen.
- iOS-Schatten-Props, Android-elevation und den neueren plattformübergreifenden boxShadow-String auf einen Schlag, ohne drei verschiedene APIs nachschlagen zu müssen.
- elevation ist ein eigenständiger Regler (nicht automatisch aus Unschärfe/Deckkraft berechnet), weil die Zuordnung von elevation zum Schatten-Erscheinungsbild auf Android keine direkte Übersetzung der iOS-Schatteneigenschaften ist — du stellst sie visuell passend ein, und genau das erlaubt dieses Tool im direkten Vergleich.
- Kostenlos, sofort verfügbar und als einzelnes Style-Objekt kopierbereit.
Anleitung
- Passe Offset X/Y, Unschärferadius, Deckkraft und Schattenfarbe an — die Vorschaubox aktualisiert sich live.
- Stelle den Android-elevation-Wert separat ein, bis er visuell zur gewünschten Schattenstärke passt.
- Klicke auf "Copy", um das komplette Style-Objekt zu kopieren — inklusive iOS-Props, Android-elevation und boxShadow-String.
- Füge das Objekt in das StyleSheet deiner Komponente ein — kombiniere oder mische es mit bestehenden View-Styles.
Beispiel
Eingabe
Offset (0, 4), Unschärfe 8, Deckkraft 0.25, Schwarz, elevation 5Ausgabe
shadowColor: '#000000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.25, shadowRadius: 4, elevation: 5, boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'shadowRadius wird auf die Hälfte des in der Vorschau angezeigten Unschärfewerts gesetzt, entsprechend der praktischen Beziehung zwischen CSS-Unschärferadius und iOS' shadowRadius.
Häufig gestellte Fragen
Warum wird mein Schatten auf Android nicht angezeigt?
Die Props shadowColor/shadowOffset/shadowOpacity/shadowRadius gelten nur für iOS — das native Android-Rendering ignoriert sie komplett. Du musst zusätzlich die elevation-Prop (eine positive Zahl) setzen, damit auf Android überhaupt ein Schatten erscheint.
Kann ich den Android-Schatten identisch zum iOS-Schatten aussehen lassen?
Nicht exakt — elevation erzeugt Androids eingebaute Material-Design-Schattenform, die sich anders als bei iOS nicht unabhängig in Farbe, Versatzrichtung oder Unschärfe konfigurieren lässt. Du kannst den elevation-Wert anpassen, um eine visuell ähnliche Stärke zu erreichen, aber pixelgenaue Übereinstimmung zwischen den Plattformen ist mit den klassischen shadow/elevation-APIs nicht möglich.
Was ist die boxShadow-Prop und kann ich sie stattdessen verwenden?
boxShadow ist eine neuere, wirklich plattformübergreifende Style-Eigenschaft (hinzugefügt in React Native 0.74, verfügbar mit der New Architecture), die dieselbe String-Syntax wie CSS box-shadow verwendet und auf iOS und Android identisch funktioniert. Wenn die React-Native-Version und Architektur deiner App das unterstützen, kannst du nur diese eine Eigenschaft statt der vier iOS-Props plus elevation nutzen — prüfe RN-Version und New-Architecture-Status, bevor du dich in Produktion darauf verlässt.
Warum ist shadowRadius nur halb so groß wie der von mir eingestellte Unschärfewert?
Die Live-Vorschau nutzt CSS box-shadow, bei dem sich der Unschärfewert bei gleicher Zahl etwa doppelt so weit ausbreitet wie iOS' shadowRadius. Der generierte Code setzt shadowRadius deshalb auf die Hälfte deines Unschärfewerts, damit der Schatten in der Vorschau dem entspricht, was iOS tatsächlich rendert — würdest du den Unschärfewert direkt übernehmen, sähe der iOS-Schatten deutlich weicher und größer aus als in der Vorschau.
Brauche ich Platform.select, um diese Styles anzuwenden?
Nein — es ist unbedenklich, die iOS-shadow*-Props und Androids elevation zusammen in einem Style-Objekt zu verwenden, genau wie es der generierte Code tut: Jede Plattform ignoriert einfach die Props der anderen. Platform.select lohnt sich nur, wenn du wirklich unterschiedliche Schattendesigns pro Plattform willst — nicht, um Warnungen zu vermeiden (es gibt keine).
Ich habe elevation gesetzt, aber der Android-Schatten erscheint immer noch nicht — warum?
Die zwei häufigsten Ursachen: Die View hat keine backgroundColor (Androids elevation-Schatten wird vom undurchsichtigen Hintergrund der View geworfen, eine transparente View wirft also keinen Schatten), oder ein Elternelement hat overflow: 'hidden' gesetzt und schneidet den Schatten ab. Gib der View zuerst eine deckende Hintergrundfarbe und prüfe die overflow-Einstellungen der übergeordneten Elemente, bevor du den elevation-Wert selbst in Frage stellst.