Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make an image of a <ImageBackground> tag darker (React Native)

Tags:

react-native

I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker. Also (don't sure if it matters or not) I need the background image to be touchable. This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.

My code is the following:

<View style={postStyles.container}>
<TouchableOpacity onPress={() => 
this.props.navigation.navigate('AnotherWindow')}>
    <ImageBackground source={require('../../assets/images/my_img.jpg')} 
     style={{width: '100%', height: 150}}>
            <Text style={postStyles.title} numberOfLines={2}>
                My text
             </Text>
    </ImageBackground></TouchableOpacity>

From looking around here, I've tried the following solutions:

  • Tried to wrap the text element inside the imagebackground tag inside a View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
  • Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
  • Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).

None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.

Thanks!

like image 698
John Smith Avatar asked Jan 22 '19 21:01

John Smith


People also ask

How do I make an image darker React Native?

The ImageBackground has an opacity prop but in order to darken the image, you need to change the alpha color value of the image. To do that, you have to add a View component as the child of ImageBackground. Then change the background color by adding some alpha factor.

How do I change the opacity of an image in React Native?

In order to change the opacity, you should use the style property opacity of the image component. You can change the transparency from 0.0 to 1.0 whereas 1.0 is the maximum i.e. the image becomes opaque. For example, if you want to bring down the transparency to 50 percent you have to use the value 0.5 for opacity.

How do I change the opacity color in React Native?

Use rgba value for the backgroundColor . This sets it to a grey color with 80% opacity, which is derived from the opacity decimal, 0.8 . This value can be anything from 0.0 to 1.0 .


3 Answers

If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.

 <ImageBackground
      source={Images.background}
      style={styles.imageBackground}
    >
      <View style={styles.innerContainer}>
      {content}
      </View>
 </ImageBackground>

const styles = StyleSheet.create({
      imageBackground: {
        height: '100%',
        width: '100%'
      },
      innerContainer: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0, 0.60)'
      },
});
like image 140
Charlie Avatar answered Oct 25 '22 00:10

Charlie


if you want to make the image darker, you'll need the Image component and use the tintColor prop like:

<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>

this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'

 <View style={postStyles.container}>
    <TouchableOpacity
      onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
    >
      <Image
        source={require('./my_image.png')}
        resizeMode="contain"
        style={{ width: '100%', height: 150, tintColor: 'cyan' }}
      />
      <Text style={postStyles.title} numberOfLines={2}>
        My text
      </Text>
    </TouchableOpacity>
 </View>

Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions

Please, let me know if this works :D

like image 27
Yasser Batas Avatar answered Oct 25 '22 00:10

Yasser Batas


You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!

<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
    <ImageBackground source={require('../../assets/images/my_img.jpg')} 
     style={{width: '100%', height: 150}}
     imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
            <Text style={postStyles.title} numberOfLines={2}>
                My text
            </Text>
    </ImageBackground>
</TouchableOpacity>
like image 44
MinaFa Avatar answered Oct 25 '22 02:10

MinaFa