CODEWITHSUNDEEP
reactjsreact-nativeexpo
sarfrazanwar
sarfrazanwar

Reputation: 383

How add dark gradient on bottom of an image in react native?

I am creating a banner where we are showing some text on top of an image. The Text is a bit difficult to read due to background Image so Can I make the background darker where the text is present ?

Upvotes: 3

Views: 10145

Answers (3)

Ahmed Gaber
Ahmed Gaber

Reputation: 3976

use react-native-linear-gradient

import LinearGradient from "react-native-linear-gradient"

<ImageBackground
    style={{width : '100%', height: 280}}
    source={{uri : "image_url"}}>

    <LinearGradient 
        colors={['#00000000', '#000000']} 
        style={{height : '100%', width : '100%'}}>



    </LinearGradient>

</ImageBackground>

the result

enter image description here

update

as @codeSays404 comment, for expo use expo-linear-gradient.
just replace this line in the code above.

//replace this
import LinearGradient from "react-native-linear-gradient"
//with
import LinearGradient from "expo-linear-gradient"

Upvotes: 13

PiaBa
PiaBa

Reputation: 145

Are you using the ImageBackground component? An easy solution would be to configure the backgroundColor of the text. It is possible to set it to an RGBA value. Try setting it to backgroundColor: "#00000060". You can check out the example on the ImageBackground page.

If you dont like the rectangular shape you can add borderRadius: 200 to create rounded edges.

Upvotes: 0

Gaurav Roy
Gaurav Roy

Reputation: 12215

So you can achieve that by having a text container with backgroundColor to be of suppose 'rgba(0,0,0,0.5)' .

Eg

<Image>
<View style={{
position:'absolute',
zIndex:2
backgroundColor:'rgba(0,0,0,0.5)'
bottom:0
}} >
<Text>Hey</Text>
</View>
</Image>

Do let me know if this works

Upvotes: 0

Related Questions