CODEWITHSUNDEEP
javascriptreact-nativeexpogradientlinear-gradients
Mehroze Yaqoob
Mehroze Yaqoob

Reputation: 1041

Applying gradient to Text only in Expo react native

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

enter image description here

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.

Upvotes: 5

Views: 6305

Answers (1)

sospedra
sospedra

Reputation: 14744

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>

Upvotes: 2

Related Questions