CODEWITHSUNDEEP
react-nativegradientexpo
DasBeasto
DasBeasto

Reputation: 2282

Expo Linear Gradient transparent is showing up blackish

I'm trying to get a bottom to top white to transparent-white transition in my React Native screen using Expo Linear Gradients: https://docs.expo.io/versions/latest/sdk/linear-gradient.html

I copied the second example and flipped it around, and made it white instead of black. But now the "transparent" the white is supposed to fade in to is darker that the white is, see below:

enter image description here

The transparent actually is see through so that's good but is there a way to give it a white hue?

Code here:

     <LinearGradient
         colors={[ 'transparent', 'rgba(255,255,255,0.8)']}
         style={{
           position: 'absolute',
           left: 0,
           right: 0,
           bottom: 0,
           height: 200,
         }}
       />

Upvotes: 6

Views: 7025

Answers (2)

jontro
jontro

Reputation: 10626

It's because transparent is equal to rgba(0,0,0,0)

Try using rgba(255,255,255,0) instead of transparent to get a white to white transition

The w3 spec defines transparent as transparent black as can be read here

Upvotes: 21

DasBeasto
DasBeasto

Reputation: 2282

I actually found my own answer. "transparent" apparently translates to black-transparent, to get white just specify an rgba() in the white channel like so:

<LinearGradient
    colors={[ 'rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
    style={{
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        height: 80,
    }}
/>

Upvotes: 8

Related Questions