Css linear gradient in react native

Question

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)]} >

Looks like library does not support radial gradients yet.. github.com/react-native-community/react-native-linear-gradient/… — Harkirat Saluja
– Harkirat Saluja, Commented Aug 13, 2018 at 6:49

Surendra Pathak · Accepted Answer · 2018-09-17 05:17:45Z

2

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.

answered Sep 17, 2018 at 5:17

Surendra Pathak

2042 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Css linear gradient in react native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related