I have a CSS gradient as -
background-image: linear-gradient(-140deg, #93C6F9 25%, #97B4FA 40%, #A768FE 100%);
I want to convert it to Expo's Linear Gradient
I tried the following solution -
<LinearGradient
colors={['#93C6F9', '#97B4FA', '#A768FE']}
start={[0.25, 0.4, 1]}
style={styles.gradient}
>
<Text>ABC</Text>
</LinearGradient>
But the result is a bit different. I guess it has to do with -140deg somehow. How to do it ???
I used location prop & reached a little close with
<LinearGradient
colors={['#93C6F9', '#97B4FA', '#A768FE']}
start={[0, 0]}
end={[1, 1]}
location={[0.25, 0.4, 1]}
style={styles.gradient}
>
<Text>ABC</Text>
</LinearGradient>
I was able to do this by adding the following:
<LinearGradient
colors={['#93C6F9', '#97B4FA', '#A768FE']}
start={[0, 0]}
end={[1, 0]}
<Text>
ABC
</Text>
</LinearGradient>
You can see a live example here
And a Codepen of the gradient
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With