androidreact-nativeshadow

"opacity" breaks the shadow on React Native view


Explanation: In the code below, the main view has a style opacity set to 1 and shadow works perfectly. When I set the opacity to 0.6, shadow makes the view disrupted. Please check the images to see the difference. How do I solve this problem?

Note: I didn't test it on IOS but it looks like this on android.

<View
  style={{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    opacity: 1,
  }}>
  <View
    style={{
      padding: 20,
      borderRadius: 10,
      backgroundColor: Colors.white,
      shadowColor: '#000',
      elevation: 5,
    }}>
    <Text>Test 123</Text>
  </View>
  <View></View>
</View>

enter image description here enter image description here


Solution

  • react-native style opacity for parent and child