CODEWITHSUNDEEP
imagereact-nativelayoutoverlay
mss
mss

Reputation: 177

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

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.

Upvotes: 1

Views: 446

Answers (1)

Sachin Rajput
Sachin Rajput

Reputation: 4344

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>

Upvotes: 2

Related Questions