CODEWITHSUNDEEP
androidreact-nativeandroid-elevation
Asmat ullah
Asmat ullah

Reputation: 711

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.

Upvotes: 4

Views: 6545

Answers (2)

Asmat ullah
Asmat ullah

Reputation: 711

Currently, I'm using the following properties to handle shadow on both IOS and Android platforms.

<View
  style={{
      height: 200,
      width: 350,
      borderRadius: 4,
      margin: 5,
      shadowColor: 'rgba(0,0,0,0.5)',
      shadowOffset: {width: 0, height: 5},
      shadowOpacity: 2,
      shadowRadius: 2,
      elevation: 4,
      backgroundColor: '#fff',
  }}>

Upvotes: 2

Rizwan Atta
Rizwan Atta

Reputation: 3295

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'

            },
        }),

Upvotes: 8

Related Questions