React Native image shadow is not showing up on view

Question

I have a png image with shadow in it.

But when I'm trying to add it in react native, the shadow is not coming up.

I've tried to give that view a shadow. I was able to add top shadow in IOS but Android doesn't support top shadow.

Is there any way to achieve top shadow in android or any way to show complete png file with shadow.

I am using React Native 0.55.4 and Android 8.0.0

Thanks in advance.

Answer 1

For android use property elevation: 1 or react-native-shadow react-native-shadow working example

import React, {Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    ScrollView,
    Image,
    TouchableHighlight
} from 'react-native'

import {BoxShadow} from 'react-native-shadow'

export default class VideoCell extends Component {
    render = () => {
        const shadowOpt = {
            width:160,
            height:170,
            color:"#000",
            border:2,
            radius:3,
            opacity:0.2,
            x:3,
            y:3,

            style:{marginVertical:5}
        }

        return (
          <View style={{flex:1}}>
            <BoxShadow setting={shadowOpt}>
                <TouchableHighlight style={{
                  marginTop:10,
                    position:"relative",
                    width: 160,
                    height: 170,
                    backgroundColor: "#fff",
                    borderRadius:3,
                    // marginVertical:5,
                    overflow:"hidden"}}>
                 <Text>Wnand</Text>
                </TouchableHighlight>
            </BoxShadow>
            </View>
        )
    }
}

Answer 2

I like to use the react-native-shadow to create shadow views on Android.

The component will be something like:

const shadowOpt = {
    width:100,
    height:100,
    color:"#000",
    border:2,
    radius:3,
    opacity:0.2,
    x:0,
    y:3,
    style:{marginVertical:5}
}
<Shadow setting={shadowOpt}>
  ... your view here
</Shadow>