Cross-platform shadow with Platform API

What's really being asked

Whether you know that iOS and Android implement elevation effects with completely different style properties and can write conditional styling cleanly with the Platform API.

The full answer

On iOS a shadow comes from four properties: shadowColor, shadowOffset, shadowOpacity, and shadowRadius. Android ignores those and instead uses a single numeric elevation, which simultaneously sets the drop shadow and the stacking order. Because the property sets do not overlap, you use Platform.select to supply the correct keys per platform within one StyleSheet entry, often combined with a backgroundColor since Android elevation needs an opaque background to render. This keeps both platforms styled from a single component without separate files.

The mistakes people make

Setting only shadow props and expecting Android to show a shadow, or only elevation and expecting iOS to. Forgetting that Android elevation requires a solid background to appear, or hardcoding values that look heavy on one platform, are practical mistakes.

What usually comes next

Why does Android elevation also affect z-index? How do you keep visual parity when the two shadow models look different? When would you reach for a library to unify shadows?

A concrete example

const styles = StyleSheet.create({ card: { backgroundColor: '#fff', borderRadius: 8, ...Platform.select({ ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 4 }, android: { elevation: 4 } }) } }); On iOS the four shadow props render the card shadow; on Android elevation 4 produces a comparable shadow and lifts the card above siblings, all from one style object.