React Native Shadow is Missing on iOS but is Okay on Android

In one of our projects, some of the items that had a shadow, was working just fine on Android, but the shadow was missing on iOS.

After investigating it, it turned out to be related to the items that had overflow: 'hidden', which on iOS resulted in shadow being trimmed.

Turns out on iOS, the shadow is part of the UI component that you define it at, which results in removing the shadow, when one has the overflow set to hidden. On Android, the shadow is applied outside of the component, so it is just fine to have overflow: 'hidden' and still get the shadow.

The solution was to wrap the component in another <View /> with the shadow defined in it, while having the overflow: 'hidden' in the inner component.

Example code:

// Before:
// ...
<View style={ { 
  // we need the overflow hidden to round the images in the content
  overflow: 'hidden',
  borderRadius: 20,
  
  // shadow definition
  shadowColor: '#000',
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,  
} }>
  { children }
</View>

// After:
<View style={ { 
  // we still need the same radius, so the shadow would have the same shape as
  // the inner container

  borderRadius: 20,
  
  // shadow definition
  shadowColor: '#000',
  shadowOffset: {
    width: 0,
    height: 2,
  },
  shadowOpacity: 0.25,
  shadowRadius: 3.84,
  elevation: 5,  
} }>

  <View style={ {
    // we need the overflow hidden to round the images in the content
    overflow: 'hidden',
    borderRadius: 20,
  } }>
  { children }

  </View>
</View>

So if you end up having missing shadows on iOS, make sure to check for overflow: 'hidden' on the element : )