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

Question

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!

Answer 1

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

Answer 2

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

Answer 3

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>