React-native-svg-charts: How can I implement linear gradient stroke for ProgressCircle

[obiwankenoobi]

NOT A BUG but also not a feature, sorry if its not the proper place to ask!

I took an inspiration from the examples
How can I implement linear gradient stroke for ProgressCircle component? this is my code at the moment (I took an inspiration from the examples ):

const Gradient = () => (
  <Defs key={'gradient'}>
      <LinearGradient id={'gradient'} x1={'0%'} y={'0%'} x2={'0%'} y2={'100%'}>
          <Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'}/>
          <Stop offset={'100%'} stopColor={'rgb(66, 194, 244)'}/>
      </LinearGradient>
  </Defs>
)

      <ProgressCircle
        svg={{
          strokeWidth: 2,
          fill: 'url(#gradient)',
        }}
        strokeWidth={20}
        style={{ height: 200 }} 
        progress={0.7} 
        progressColor={Colors.themePurple}>
        <Gradient/>
      </ProgressCircle>

End result should be something around this:

Thank you!!! (:

[7laria]

i solved it.
https://pastebin.com/E3YuYUMh

[obiwankenoobi]

@7laria Nice! thank you (: