Search code examples
androidreact-nativeandroid-elevation

how to fix shadow problem with elevation in react-native for android


I'm trying to show shadow around a view in react-native.

I tried this

<View
      style={{
        flex: 0.3,
        margin: 4,
        ...Platform.select({
          ios: {
            shadowColor: '#000',
            shadowOffset: {width: 0, height: 4},
            shadowOpacity: 0.4,
          },
          android: {
            elevation: 2,
          },
        }),
      }}>

it works perfectly on iOs but on android it has no effect. there is a library called react-native-shadow which work perfectly on both iOs and android, but how to fix shadow problem in android with out using any third party libraries.


Solution

  • right now I have these properties that I have given me a work around for the required animation . try this and lemme know in comments that if it helps you in your case. happy to help.

       ...Platform.select({
                ios: {
                    shadowColor: '#000',
                    shadowOffset: { width: 0, height: 3 },
                    shadowOpacity: 0.2,
                },
                android: {
                    elevation: 0.4,
                    // bottomElevation:4,
                    borderBottomWidth: 0.2,
                    borderTopWidth:0.2,
                    borderColor:'#000'
    
                },
            }),