About react native shadow generator
Shadows in React Native work differently on each platform. iOS uses the shadow* style props, while Android uses the elevation prop. This tool outputs both.
The props
- iOS: shadowColor, shadowOffset, shadowOpacity and shadowRadius.
- Android: elevation, which draws a shadow based on a number.
Common problem
On iOS the shadow does not appear if the view has no background colour, and overflow: hidden clips it. Put the shadow on an outer wrapper and clip the content inside it.
A worked example
For a card: shadowColor '#000', shadowOffset { width: 0, height: 4 }, shadowOpacity 0.12, shadowRadius 8 and elevation 4. The first four props control iOS and the last one controls Android, so a cross-platform component needs both sets.
Platform differences
- iOS draws shadows from the colour, offset, opacity and radius you set.
- Android draws shadows only from elevation and ignores the colour on older versions.
- On Android, the view needs a background colour for the shadow to appear.
