I'm having difficulty putting a shadow in the image, I tried putting it in View and Image but it did not work

<View style={styles.ContainerImageProfile}>
    <Image style={styles.ImageProfile} source={{uri: 'profile.png'}} />
</View>

ContainerImageProfile: {
        width: 90,
        height: 90,
        borderRadius: 50,
        backgroundColor: 'red',
        overflow: 'hidden',
        marginTop: 100,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 50,

    },
    ImageProfile: {
        width: '100%',
        height: '100%'
    },

I'm having difficulty putting a shadow in the image, I tried putting it in View and Image but it did not work

<View style={styles.ContainerImageProfile}>
    <Image style={styles.ImageProfile} source={{uri: 'profile.png'}} />
</View>

ContainerImageProfile: {
        width: 90,
        height: 90,
        borderRadius: 50,
        backgroundColor: 'red',
        overflow: 'hidden',
        marginTop: 100,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 50,

    },
    ImageProfile: {
        width: '100%',
        height: '100%'
    },

• javascript
• reactjs
• react-native

• are you trying to add shadow inside or outside ? – suchcodemuchwow Commented May 9, 2018 at 23:38

2 Answers 2

You need to set the elevation to see the shadow, like you can check in this snack, set backgroundColor in your Component also helps to work both in Android and IOS (i have defined a transparent one)

ContainerImageProfile: {

            width: 90,
            height: 90,
            borderRadius: 50,
            overflow: 'hidden',
            marginTop: 100,

            //Properties to setup your Shadow 

            shadowOffset: { width: 10, height: 10 },
            shadowColor: '#000',
            shadowOpacity: 1,
            elevation: 10,
            backgroundColor : "#000"

        }

Besides elevation (to make it work on Android), your problem here is with the overflow property. Shadows are drawn outside your elements bounds, so it overflows it.

Set overflow to 'visible' and your set.