View has a shadow set but cannot calculate shadow efficiently in React Native

Question

I am getting this warning on iOS.

View ... of type RCTView has a shadow set but cannot calculate shadow efficiently. Consider setting a background color to fix this, or apply the shadow to a more specific component.

which can be tracked down to here https://github.com/facebook/react-native/commit/e4c53c28aea7e067e48f5c8c0100c7cafc031b06.

I do not understand what is causing the warning. This are the styles applied to the <View /> that is causing the problem.

const styles = StyleSheet.create({
  borderColor: '#EDAE49',
  borderWidth: 2,
  borderRadius: 7,
  backgroundColor: '#EDAE49',
  padding: 7,
  marginBottom: 5,
  width: '100%',
  shadowColor: '#000',
  shadowOffset: {width: 0, height: 2},
  shadowOpacity: 0.5,
  shadowRadius: 2,
  elevation: 2,
});

What is causing the inefficiency here? There is backgroundColor set, no transparency in the backgroundColor.

Answer 1

From my understanding, this happens if you put the shadow on a wrapper component that doesn't have a visible property (e.g. background color), the shadow instead gets calculated based on the child component, thus making it less efficient. The solution is to simply move the shadow to a new style property and pass it to the children instead.

<View style={styles.containerWithShadow}>
    <Icon name="arrow-down-bold" />
</View>

This will trigger the warning if the View style doesn't have a background color. The shadow will be implicitly calculated based on the shape of the Icon.

As a solution, you can either give the View style a solid background if that doesn't affect your overall design, or you can remove the shadow from the View style and create another style with shadow for the Icon:

<View style={styles.container}>
    <Icon name="arrow-down-bold" style={styles.iconWithShadow} />
</View>