0
153
ViewsAdd fixed color in LinearGradient using react-native-svg
I am workign on a Svg component where i'm using LinearGradient from react-native-svg. I want to used fixed colors on stop points. But using LinearGradient, it's not being possible to do that. How can i add fixed color and achieve something like this:
Here's my current code for this Svg:
<Svg width={svgSize} height={svgSize}>
<LinearGradient
id="gradient"
start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 1.0}}
>
<Stop offset="0%" stopColor= 'green' stopOpacity= {1}/>
<Stop offset="50%" stopColor= 'red' />
<Stop offset="100%" stopColor= 'blue' />
</LinearGradient>
<Path
strokeWidth={strokeWidth}
stroke="url(#gradient)"
d={`M${startPoint.x},${startPoint.y} A ${radius},${radius},0,${startRadian - openingRadian >= Math.PI ? '1' : '0'},1,${endPoint.x},${endPoint.y}`}
/>
<Path
strokeWidth={strokeWidth}
stroke="url(#gradient)"
fill="none"
d={`M${startPoint.x},${startPoint.y} A ${radius},${radius},0,${startRadian - currentRadian >= Math.PI ? '1' : '0'},1,${curPoint.x},${curPoint.y}`}
/>
<Circle
cx={curPoint.x}
cy={curPoint.y}
r={buttonRadius}
fill={buttonFillColor || buttonBorderColor}
stroke={buttonBorderColor}
strokeWidth={buttonStrokeWidth}
{...this._panResponder.panHandlers}
/>
</Svg>I just need help with the LinearGradient fixed color set part. How can i achieve that?
·
Santiago Gelvez
Answer question