Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)]} >
like image 703
Adokiye Iruene Avatar asked Sep 05 '25 03:09

Adokiye Iruene


1 Answers

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.

like image 151
Surendra Pathak Avatar answered Sep 07 '25 19:09

Surendra Pathak