React native need to render rounded shadow on rounded button - react-native

Question

I need to render rounded shadow on rounded button. Shadow should be render like given in image but some how i am not able to render like that.
But it is not render properly and display like below.
It looks like below
Style will be like this
const styles = StyleSheet.create({
buttonStyle : {
height: 60,
width: 60,
marginRight: 15,
shadowColor: "#4e4f72",
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0
},
borderRadius: 30,
elevation: 30,
},
})
View style
<View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15 }}>
<Image style={styles.buttonStyle} source={require('../images/google.png')} />
<Image style={styles.buttonStyle} source={require('../images/facebook.png')} />
<Image style={{ height: 60, width: 60, }} source={require('../images/instagram.png')} />
</View>

Answer 1

Can you try to place your image inside a View. Remove the shadow styling from the image and place it to the View. In my case this is working.
<View
style={{
height: 60,
width: 60,
marginRight: 15,
shadowColor: '#4e4f72',
shadowOpacity: 0.2,
shadowRadius: 30,
shadowOffset: {
height: 0,
width: 0,
},
borderRadius: 30,
elevation: 30,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Image style={{ height: 60, width: 60, borderRadius: 30 }} />
</View>
Don't forget to add the require back to the Image component