How to draw a conic gradient crown in React Native with react-native-svg
React Native is a great tool to handle a various kind of interface but when it comes to very specific visual components it happens to be resource-poor.
For instance sometimes to develop a complex ui we would consider using a conic gradient.
React Native doesn’t dispose of conic gradient but thanks to the React Native Community it does have linear and radial gradients.
Let’s see now how we can use linear gradients to get a similar result.
If we look at a conic gradient we notice that the circular crown is similar to a series of askew linear gradients.
In this example we are going to simulate a conic gradient crown using linear gradients.
Before we begin let’s create a new project and link react-native-svg.
Once you setup the project create a new component, this component will be our ConicCrownGradient.js.
In our new component let’s draw a blank canvas
Let’s now add 4 squared askew gradients to form a big square.
At this point your component should render this:
Now we need to apply a mask to the canvas and get our circular crown.
As you can see the gradients do not match perfectly.
This is caused by the gradients starting from the most external part of the circle and fading in direction of the center of the circle.
To avoid this behavior we can tell it to start after a short offset equal to the stroke width.
Clearly this is why this method only achieves a crown of gradient.
I suggest you to now experiment with a bigger or smaller stroke width to see what happens.
Here is the final result, a conic gradient crown.
Thank you for reading this article, hope you will find it useful, enjoy.
Source code on snack
Demo available on expo
See also
