react-nativegradientexpo

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,
         }}
       />
Solution

  • 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