React Native backgroundColor overlay over image

Question

I am using an image as the background for one of my pages. I'd like to add a backgroundColor with an opacity over the image. I'm not sure how I can achieve this with React Native.

render() {
  return (
    <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.container}>
      <Text>Hello</Text>
    </Image>
  )
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  width: null,
  height: null,
}

Here is how I'd achieve this on a web page: How to make in CSS an overlay over an image?

score 52 · Accepted Answer · edited Aug 03 '18 at 22:42

52

A cool thing you can do is drop an absolutely positioned view over it.

<View>
  <Image source={require('./assets/climbing_mountain.jpeg')} style=  {StyleSheet.absoluteFillObject}} resizeMode='cover'>
    <Text>Hello</Text>
  </Image>
  <View style={styles.overlay} />
</View>

...
const styles = StyleSheet.create({
   overlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.5)'
   }
 })

absoluteFillObject is the same as

{
 position: 'absolute',
 top: 0,
 left: 0,
 right: 0,
 bottom: 0
}

If you want to be able to tap through your overlay, just set the pointerEvents prop on the view to none

docs: https://facebook.github.io/react-native/docs/stylesheet.html#absolutefillobject

edited Aug 03 '18 at 22:42

steadweb

15,364
3
33
47

answered Jan 13 '17 at 02:33

Kevin Velasco

4,568
1
16
6

Thanks, Kevin. Good idea. I tried that, but it made my image very small, only about 1/10th of the screen. – Molly Harper Jan 13 '17 at 02:39
oh, my bad. Missed something. In this case you'll need to make the image also absolutely fill. You'll also need to add a resizeMode of your choosing. – Kevin Velasco Jan 13 '17 at 02:50
I made some amends to my code using your answer and got it working. Thanks so much!! – Molly Harper Jan 13 '17 at 03:28

score 9 · Answer 2 · answered Jan 13 '17 at 03:32

I was able to get this working thanks to @Kevin Velasco.

render() {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>
      </Image>
      <View style={styles.overlay} />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: null,
    height: null,
  },
  imageContainer: {
    flex: 1,
    width: null,
    height: null,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(69,85,117,0.7)',
  }
})

absoluteFillObject made it work.plus i was wrapping the overlay view which was wrong :( — Usman Iqbal, Sep 23 '20 at 11:28

score 3 · Answer 3 · answered Jan 11 '22 at 16:42

Make an overlay on react native image background: If you want to make an overlay on the background image ONLY in react native and not affect other elements that are inside the < ImageBackground> tag, do this:

//Fetching the background image from online, you can use any image source of your choice.

const GoProImageBackGd = { uri: "https://images.pexels.com/photos/2462402/pexels-photo-2462402.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" };

// Setting the background image for the view:

 <View style={styles.GoProBox}>
            <ImageBackground source={GoProImageBackGd} resizeMode='cover' style={styles.goProBgImage}>
            <View style={styles.overlayView}/>
            <Text style={styles.goProText}> Want to join the hot section? Go hot with Pro!</Text>
            <GoProButton />
            </ImageBackground>

//Stylesheet

const styles = StyleSheet.create({
GoProBox: {
        width: '95%',
        height: 200,
        margin: 5,
        backgroundColor: '#00cc00',
        borderRadius: 10,
        alignSelf: 'center',
        overflow: 'hidden'

    },
goProBgImage: {
        width: '100%', height: '100%',


    },

    goProText: {
        textAlign: 'center',
        fontSize: 20,
        marginTop: 10,
        fontWeight: 'bold',
        padding: 10,
        color: 'white'

    },
GoProButton: {
        height: 60,
        width: 200,
        backgroundColor: 'red',
        borderRadius: 15,
        alignSelf: 'center',
        justifyContent: 'center',
        top: 50
    },
overlayView: {
        height: "100%",
        width: "100%",
        position: 'absolute',
        backgroundColor: 'rgba(0, 204, 0, 0.5)',

    }

})

score 1 · Answer 4 · answered Aug 22 '21 at 07:59

1

Here I use to solve my project, thansk to all:

<View>
<View
style = {{
    //make overlay
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
   //change this color to the other one which you want
    backgroundColor: 'green',
    
}}
/>
<Image 
source = {{ uri: Your-Image-Here }}
style = {{ height: 150, width: 200, resizeMode: 'cover', borderBottomLeftRadius: 20, borderTopLeftRadius: 20 }}
/>
</View>

answered Aug 22 '21 at 07:59

user3595795

113
1
5

The code you posted is *not* a runnable snippet (just click the "Run..." button and you will realize that)! Please edit your answer and format your code as a **plain code block** instead (use simple, three back-tick code fences). – Adrian Mole Aug 22 '21 at 13:09

score 0 · Answer 5 · answered Jul 06 '21 at 16:51

this is how i dit it to get it work for me

const visaCard = require('../Images/card_visa.png');
  const [iscardBloqued, setIsCardBolqued] = useState(false);
  const [hideInfos, setHideInfos] = useState(true);

Here is How the component looks like

  <View style={styles.imageContainer}>
      <ImageBackground
        source={visaCard}
        imageStyle={{ borderRadius: wp(3) }}
        style={styles.imageStyle}
        resizeMode="cover"
      >
        {hideInfos && (
          <TouchableOpacity activeOpacity={0.8} style={styles.cardWhiteButton}>
            <FText style={styles.whiteButtonText}>Afficher les infos</FText>
          </TouchableOpacity>
        )}

        {iscardBloqued && (
          <View style={styles.overlay}>
            <TouchableOpacity
              activeOpacity={0.7}
              style={{ alignItems: 'center' }}
            >
              <Lock />
              <FText style={styles.overlayText}>Carte bloqueé</FText>
            </TouchableOpacity>
          </View>
        )}
      </ImageBackground>
    </View>

And her is my Style page: "i prefered to separate it from my component"

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },

  imageContainer: {
    alignSelf: 'center',
    marginTop: hp(3),
  },
  imageStyle: {
    height: hp(25),
    width: wp(85),
  },
  cardWhiteButton: {
    marginHorizontal: wp(8),
    backgroundColor: 'white',
    marginTop: hp(17),
    height: hp(5),
    width: wp(32),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: wp(5),
  },
  whiteButtonText: {
    fontSize: hp(1.4),
    color: 'white',
    fontFamily: 'Roboto',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.89)',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: wp(3),
  },
  overlayText: {
    color: 'white',
    fontSize: hp(1.6),
    fontFamily: 'Roboto',
    marginTop: hp(2),
  },
});

React Native backgroundColor overlay over image

5 Answers5