Academy
easyReact Native#29

Shadow and elevation styles

Prompt

Create a View with a shadow on iOS (shadowColor, shadowOffset, shadowOpacity, shadowRadius) and elevation on Android. The view should look like a raised card.

Solution

return (
  <View style={{
    width: 200, height: 200, backgroundColor: 'white', borderRadius: 12,
    shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.25, shadowRadius: 8,
    elevation: 5,
  }}>
    <Text>Shadow Card</Text>
  </View>
)
Mentor's take

Shadows are the clearest daily reminder that React Native styles compile to two different native rendering systems, not CSS. iOS exposes Core Animation's layer shadow — four orthogonal dials (shadowColor, shadowOffset, shadowOpacity, shadowRadius) you compose freely. Android exposes Material Design's elevation — one number from which the system derives the shadow's size, softness, and direction against a simulated light source; you don't get to art-direct it (color tinting arrived only in API 28+). Neither property set does anything on the other platform, so a raised card needs both, side by side, exactly as here — or a Platform.select when the two designs should differ.

The mechanics that bite in production: on iOS, shadows are computed from the view's shape, so the view needs an opaque backgroundColor — a transparent view casts nothing, and without a solid fill iOS may fall back to expensive per-pixel shadow paths. On Android, elevation also controls z-ordering — a raised card draws over its siblings, which surprises people using it purely decoratively; and overflow: 'hidden' (often added for rounded corners) clips the shadow entirely. Since RN 0.76, boxShadow exists as a unified cross-platform property on the New Architecture — worth naming as the direction of travel, with the dual-API answer still the compatibility baseline.

Red flag: shipping only the iOS shadow props and calling it done — flat cards on Android is the exact bug this question screens for.

Say it: "iOS gives me four compositional shadow dials, Android gives me one Material elevation value that also affects z-order — I set both, keep an opaque background for iOS, and know boxShadow is unifying this on the New Architecture."