Cross-platform shadow with Platform API

WHAT THIS TESTS 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.

A GOOD ANSWER COVERS 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.

COMMON WRONG ANSWERS 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.

LIKELY FOLLOW-UPS 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?

ONE 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.