How are shadows and elevation handled across iOS and Android?

Short answer

iOS uses shadowColor, shadowOffset, shadowOpacity, and shadowRadius, while Android uses a single built-in elevation property that represents an element's height above the background.

Explanation

Because the platforms use different rendering engines, Android does not understand iOS shadow* properties, while it does understand elevation based on Material Design depth. To create consistent shadows across platforms, combine both platforms' properties in the style object or use advanced libraries such as react-native-drop-shadow to generate visually matching shadows.

Code example

const styles = StyleSheet.create({
  cardShadow: {
    backgroundColor: '#fff',
    // Shadow settings for the system iOS:
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    // Shadow settings for the system Android:
    elevation: 5,
  }
});

Common mistakes

• Applying elevation on Android to an element without an explicit backgroundColor, which can prevent the shadow from appearing or distort its edges.

Follow-up questions

• How do you support and customize custom fonts and handle height and line-height issues?

Sources

• React Native docs — Shadow Props
• React Native docs — View Style Props