React Native Shadow Generator

Because they are two entirely separate implementations. iOS reads shadowColor, shadowOffset, shadowOpacity, and shadowRadius and ignores elevation. Android reads elevation and ignores all four shadow props. Shipping both in one style object is the standard React Native pattern, and it is why the two platforms rarely look identical.

Because elevation draws a system-defined shadow. Android does not let you set the shadow's color, offset, or blur through the elevation prop; it decides those from the elevation value and the platform theme. If you need a colored shadow on Android, you have to fake it, usually with a gradient view or a nine-patch background.

Almost always overflow: hidden, or a backgroundColor of transparent. iOS draws the shadow from the view's opaque backing, so a view with no background color has no shape to cast a shadow from, and a clipping parent will crop the shadow away. Wrap the clipped view in an outer view that carries the shadow and a solid backgroundColor.

Material Design puts a resting card at elevation 1 to 2, a raised or hovered card at 8, a floating action button at 6, and a modal or drawer at 16 to 24. Going above 8 for a card makes it look like it is floating off the page rather than sitting on it.

Approximately. The preview uses a CSS box-shadow, which is close to how iOS renders shadowOffset, shadowRadius, and shadowOpacity but not identical (iOS blurs differently and applies the radius to the shadow's path). Android will look different again, because it draws its own system shadow. Always check on both devices.

No. CSS allows a comma-separated list of box-shadows, and designers routinely stack two or three to get a realistic falloff. React Native supports exactly one shadow per view. The usual workaround is nesting views, each with its own shadow, which costs you a layer of the tree.