Why is this error in Image Component of React-Native?

Question

I would like to background black opacity. I've wrote this code.

<Image source={require('../assets/images/test_img1.png')} style={[s.lastReviewImage]}>
  <View style={s.blackOverlay}/>
</Image>



lastReviewImage: {
    flex:1,
    width: null, height: null
  },
  blackOverlay: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: 'red',
    opacity: 0.3
  },

But, this is give me a error.

Error: The Image component cannot contain children. if you want to render content on top of the image, consider using absolute positioning.

I know what this error means but I've surely set absolute property in blackOverlay.

I've refer this guides.

Text Overlay Image with Darkened Opacity React Native

https://snack.expo.io/S15Lt3vjg

But, It's not working for me with the error.

Possible duplicate of [How to place an Image on top of other Image in React Native?](https://stackoverflow.com/questions/33761012/how-to-place-an-image-on-top-of-other-image-in-react-native) — Sandra K, Jan 29 '18 at 02:25
hi 문성수 , hope my answer (given below) helped you , feel free to upvote — Sachin Rajput, Jan 29 '18 at 08:31

score 2 · Accepted Answer · answered Jan 29 '18 at 04:34

If you want to set some background color or an image as the Screen Background, you need to use ImageBackground in place of Image.

 <ImageBackground
      source={yourSourceFile}
      style={s.blackOverlay}> 
        <....yourContent...>
    </ImageBackground>

Why is this error in Image Component of React-Native?

1 Answers1