Applying gradient to Text only in Expo react native

Question

Its really strange that I found no solution over web for a very simple feature. I want to add gradient to a text in expo react native project. It looks something like this

I did see a library (react-native-text-gradient) which is not updated since version 0.5x. Linear gradient of expo creates a button and applies gradient to it. Any solution would be deeply appreciated.

You may want to look at https://stackoverflow.com/questions/51248255/how-to-create-a-gradient-text-in-react-native — Abraham, Sep 30 '20 at 13:38

score 2 · Answer 1 · answered Apr 22 '21 at 09:58

Use Masked View

<MaskedView
 style={{ height: 24 }}
 maskElement={<Text style={s.text}>{children}</Text>}
>
  <LinearGradient
    colors={['cadetblue', '#fabada']}
    start={{ x: 1, y: 1 }}
    end={{ x: 0, y: 0.33 }}
    style={{ flex: 1 }}
  />
</MaskedView>

Applying gradient to Text only in Expo react native

1 Answers1