Image shadow not showing up using React Native on iOS - react-native

Question

I've been trying to add a shadow to an image and display it on an iOS device, but it just not showing up.
Any idea what I'm missing?
Here's the JSX:
<View style={styles.container}>
<Image style={styles.pic} source={pic} />
</View>
And the styles:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
pic: {
width: 200,
height: 200,
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1,
backgroundColor: '#0000',
},
});
You can view the live demo here.

Answer 1

According to React-native documentation : https://facebook.github.io/react-native/docs/image-style-props
There is no shadow possibilities for an Image style, thus you need to wrap it in a View and add a shadow to this view :
<View style={styles.mainContainer}>
<View style={styles.imageContainer}>
<Image style={styles.pic} source={pic} />
</View>
</View>
And style it like this :
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
},
imageContainer: {
shadowOffset: { width: 10, height: 10 },
shadowColor: 'black',
shadowOpacity: 1,
backgroundColor: '#0000',
},
pic: {
width: 150,
height: 150,
},
});