CODEWITHSUNDEEP
react-native
Guy
Guy

Reputation: 535

Image shadow not showing up using React Native on iOS

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.

Upvotes: 0

Views: 1631

Answers (1)

R.Duteil
R.Duteil

Reputation: 1227

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,
  },
});

Upvotes: 2

Related Questions