Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert CSS gradient to Expo's Linear Gradient?

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 ???

like image 621
deadcoder0904 Avatar asked Nov 01 '25 09:11

deadcoder0904


2 Answers

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>
like image 61
deadcoder0904 Avatar answered Nov 04 '25 11:11

deadcoder0904


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

like image 42
Gurgen Grigoryan Avatar answered Nov 04 '25 09:11

Gurgen Grigoryan