CODEWITHSUNDEEP
react-nativeexpo
deadcoder0904
deadcoder0904

Reputation: 8683

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

Upvotes: 4

Views: 11634

Answers (2)

deadcoder0904
deadcoder0904

Reputation: 8683

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>

Upvotes: 5

Gurgen Grigoryan
Gurgen Grigoryan

Reputation: 265

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

Upvotes: 0

Related Questions