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

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.

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>

I have this problem in iOS a warning message.

> WARN (ADVICE) View #3535 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.

After check the warning message I come know that I have applied shadow to some Views but I forgot to apply backgroundColor so it was creating this warning message.

here is my code in which it was giving warning

const styles = {
  menuStyle: {
    menuProviderWrapper: {
      elevation: 0,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.18,
      shadowRadius: 1.0,

      elevation: 1,
      borderRadius: 10,
    },
    backdrop: {
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.18,
      shadowRadius: 1.0,
      elevation: 1,
      
    },
  },
};

After adding backgroundColor the warning got disappear

const styles = {
  menuStyle: {
    menuProviderWrapper: {
      elevation: 0,
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.18,
      shadowRadius: 1.0,

      elevation: 1,
      borderRadius: 10,
      backgroundColor: theme.whiteColor,
    },
    backdrop: {
      shadowColor: '#000',
      shadowOffset: {
        width: 0,
        height: 1,
      },
      shadowOpacity: 0.18,
      shadowRadius: 1.0,
      elevation: 1,
      backgroundColor: theme.whiteColor,
    },
  },
};

First, you need to find out which component creates that problem. After you find it you should:

• change the background to the not transparent one
• OR remove shadow or set shadowOpacity:0.

To find a component:

1. in React/Views/RCTView.m

RCTLogAdvice(
          @"View #%@ of type %@ 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.",
          view.hash,
          [view class]);

get that hash and in flipper

you can find the component using this hash.

In my case i was using react-navigation that adds shadow to a component that i am using with transparent background.