CODEWITHSUNDEEP
cssreact-native
Adokiye Iruene
Adokiye Iruene

Reputation: 870

Css linear gradient in react native

I am trying to use react-native-linear-gradient to implement a css like linear gradient for a view but the plugin allows for only 2 colours it doesn't allow me to set the gradient to be radial, this is the css format of the linear gradient linear-gradient(151.76deg, #EE8F62 -43.83%, rgba(239, 203, 113, 0.96) 97.18%, rgba(242, 172, 136, 0.15) 120.83%); , Please how can I achieve the above with the plugin, I have tried doing this

<LinearGradient colors={[rgba(239, 203, 113, 0.96), rgba(242, 172, 136, 0.15)]} >

Upvotes: 4

Views: 2544

Answers (1)

Surendra Pathak
Surendra Pathak

Reputation: 204

You can not use the percentage values in React Native like you did in CSS. However, you can give the angle to the gradient using values such as:

start={{x: 0, y: 1}} 
end={{x: 1, y: 0}}

For eg:

<LinearGradient
     start={{x: 0, y: 1}} end={{x: 1, y: 0}}
     colors={['rgba(204,49,125,0.95)', 'rgba(255,117,84,0.95)', 'rgba(204,49,125,0.95)']}
     style = { styles.container }>

         {Your code here}

</LinearGradient>

The above code generates a linear gradient that starts from bottom left corner and ends at top right. The gradient has an opacity of 0.95.

Upvotes: 2

Related Questions