React-native-linear-gradient: Gradient over text

[moiri-gamboni]

Hello,

I am trying to have a gradient partially obscuring some text, however it always displays in the background right now. Is something like this possible?

Thank you for your help
EDIT: Is this the same as #56?

[javamonn]

Creating a gradient like the one seen in the image appears to already be possible, at least on Android:

<View>
   <Text>Text to be obscured by gradient...</Text>
   <LinearGradient
     colors={['transparent', '#some-gray-ish-color']}
     style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
   />
</View>

This results in the desired text behind the gradient effect, rather than having the gradient behind the text.

[radex]

Hey! I'm closing this since it looks like a solved issue.

[mayconmesquita]

If you need fade in from white.

I'm using this code to get this result:

<View style={[styles.descriptionContainer, { maxHeight: 140 }]}>
  <Text style={styles.descriptionHeading}>Descrição do Produto</Text>
  <Text style={styles.descriptionText}>{ description }</Text>

  <LinearGradient
    colors={['transparent', 'rgba(255,255,255,1)']}
    start={{x: 0, y: .5}}
    end={{x: 0, y: 1}}
    style={styles.linearGradientContainer}
  />
</View>

const styles = {
  descriptionContainer: {
    flex: 1,
    overflow: 'hidden',
  },
  descriptionHeading: {
    marginTop: 20,
    fontSize: 21,
    color: '#212121',
  },
  descriptionText: {
    fontSize: 15,
    color: '#6f6f6f',
  },
  linearGradientContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
}

[andreialecu]

A better solution, if you can use https://github.com/react-native-masked-view/masked-view:

  <MaskedView
    maskElement={
      <LinearGradient
        style={StyleSheet.absoluteFill}
        colors={['white', 'transparent']}
        start={{x: 0, y: 0.5}}
        end={{x: 0, y: 1}}
      />
    }
  >
    <Text>{item.summary}</Text>
  </MaskedView>

The benefit is that it works well for dark, or even image backgrounds as well.