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)]} >
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With