CodeKitHubWat is deze tool?
In React Native zijn schaduwen standaard niet platformonafhankelijk. iOS gebruikt vier afzonderlijke style-props (shadowColor, shadowOffset met width/height, shadowOpacity van 0 tot 1, en shadowRadius voor vervaging), die worden gemapt naar dezelfde onderliggende CoreAnimation-schaduw die ook box-shadow op het web gebruikt. Het native View-systeem van Android ondersteunt helemaal geen willekeurige schaduwvormen — het ondersteunt alleen elevation, een enkel getal dat een vaste Material Design-slagschaduw produceert op basis van hoe „hoog” de view lijkt te zweven.
Dit betekent dat een schaduw die er op iOS goed uitziet met shadowRadius/shadowOpacity, op Android helemaal niet zichtbaar zal zijn tenzij je ook elevation instelt, en de twee zullen nooit pixel-identiek zijn omdat de schaduwvorm van elevation niet aanpasbaar is zoals die van iOS. Vanaf React Native 0.74, met de New Architecture ingeschakeld, is er ook een platformonafhankelijke boxShadow style-eigenschap beschikbaar, met dezelfde syntax als CSS.
Waarom gebruiken?
- Bekijk een live visueel voorbeeld terwijl je offset, vervaging, dekking en kleur aanpast — in plaats van waarden te gokken en je app opnieuw te bouwen om te controleren.
- Krijg iOS-schaduweigenschappen, Android-elevation en de nieuwere platformonafhankelijke boxShadow-string allemaal tegelijk, zodat je niet drie verschillende API's hoeft op te zoeken.
- Elevation is een aparte instelling (niet automatisch berekend uit vervaging/dekking), omdat de mapping van elevation naar schaduwuiterlijk op Android geen directe vertaling is van de schaduweigenschappen van iOS — je moet het visueel afstemmen, wat deze tool je naast elkaar laat doen.
- Gratis, direct beschikbaar en kant-en-klaar om te kopiëren als één enkel style-object.
Hoe te gebruiken
- Pas offset X/Y, vervagingsradius, dekking en schaduwkleur aan — het voorbeeldvak wordt live bijgewerkt.
- Stel afzonderlijk het Android-elevationgetal af totdat het visueel overeenkomt met de gewenste schaduwsterkte.
- Klik op „Kopiëren” om het volledige style-object te kopiëren, inclusief iOS-eigenschappen, Android-elevation en de boxShadow-string.
- Plak het object in de StyleSheet van je component — spread het of voeg het samen met je bestaande view-stijlen.
Voorbeeld
Invoer
Offset (0, 4), vervaging 8, dekking 0,25, zwart, elevation 5Uitvoer
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 wordt ingesteld op de helft van de vervagingswaarde die in het voorbeeld wordt getoond, overeenkomstig hoe de CSS-vervagingsradius zich in de praktijk verhoudt tot de shadowRadius van iOS.
Veelgestelde vragen
Waarom verschijnt mijn schaduw niet op Android?
De eigenschappen shadowColor/shadowOffset/shadowOpacity/shadowRadius zijn alleen voor iOS — de native rendering van Android negeert ze gewoon. Je moet ook de elevation-eigenschap instellen (een positief getal) wil er überhaupt een schaduw op Android verschijnen.
Kan ik de Android-schaduw er identiek laten uitzien als de iOS-schaduw?
Niet precies — elevation produceert de ingebouwde Material Design-schaduwvorm van Android, die niet onafhankelijk configureerbaar is qua kleur, offsetrichting of vervaging zoals de schaduw van iOS dat wel is. Je kunt het elevationgetal afstemmen om een visueel vergelijkbare sterkte te krijgen, maar pixelperfecte overeenkomst tussen platformen is niet mogelijk met de klassieke shadow/elevation-API's.
Wat is de boxShadow-eigenschap en kan ik die in plaats daarvan gebruiken?
boxShadow is een nieuwere, echt platformonafhankelijke style-eigenschap (toegevoegd in React Native 0.74, beschikbaar op de New Architecture) die dezelfde string-syntax gebruikt als CSS box-shadow en identiek werkt op zowel iOS als Android. Als de React Native-versie en architectuur van je app dit ondersteunen, kun je deze ene eigenschap gebruiken in plaats van de vier afzonderlijke iOS-eigenschappen plus elevation — controleer je RN-versie en de status van de New Architecture voordat je hier in productie op vertrouwt.
Waarom is shadowRadius de helft van de vervagingswaarde die ik heb ingesteld?
Het live voorbeeld gebruikt CSS box-shadow, waarbij de vervagingswaarde ongeveer twee keer zo ver reikt als de bijbehorende shadowRadius op iOS bij hetzelfde getal. De gegenereerde code stelt shadowRadius in op de helft van je vervagingswaarde, zodat de schaduw die je in het voorbeeld ziet overeenkomt met wat iOS daadwerkelijk rendert — als je de vervagingswaarde rechtstreeks zou overnemen, zou de iOS-schaduw merkbaar zachter en groter ogen dan in het voorbeeld.
Heb ik Platform.select nodig om deze stijlen toe te passen?
Nee — het is veilig om de iOS shadow*-eigenschappen en de Android-elevation samen in één style-object te zetten, precies zoals de gegenereerde code doet: elk platform negeert simpelweg de eigenschappen van het andere platform. Platform.select is alleen de moeite waard als je echt verschillende schaduwontwerpen per platform wilt, niet alleen om waarschuwingen te vermijden (die zijn er niet).
Ik heb elevation ingesteld, maar de Android-schaduw verschijnt nog steeds niet — waarom?
De twee meest voorkomende oorzaken: de view heeft geen backgroundColor (de elevation-schaduw op Android wordt geworpen vanuit de ondoorzichtige achtergrond van de view, dus een transparante view werpt geen schaduw), of een ouder heeft overflow: 'hidden' ingesteld en snijdt de schaduw af. Geef de view een effen achtergrondkleur en controleer de overflow-instellingen van voorouders voordat je aanneemt dat de elevation-waarde onjuist is.