13

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?

5 Answers 5

53

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

3
  • Thanks, Kevin. Good idea. I tried that, but it made my image very small, only about 1/10th of the screen. Jan 13, 2017 at 2: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. Jan 13, 2017 at 2:50
  • I made some amends to my code using your answer and got it working. Thanks so much!! Jan 13, 2017 at 3:28
10

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)',
  }
})
1
  • absoluteFillObject made it work.plus i was wrapping the overlay view which was wrong :( Sep 23, 2020 at 11:28
4

enter image description here

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)',

    }

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

1
  • 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). Aug 22, 2021 at 13:09
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.