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

Question

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.

Answer 1

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'

            },
        }),