Conical gradient support

[fdnhkj]

It would be nice to have support for conical gradient.
Has anyone an idea on how to implement it ?

[GroupXTech]

Any luck on finding your conical gradient... I need that in a slider as well

[morelazers]

Yes I'm looking for something similar, I want to animate the colour of the fill.

I can get it to work by removing the validation of PropTypes.string but it is incredibly slow.

[bartgryszko]

@fdnhkj Cannonical gradients aren't supported in SVG. In my other component (https://github.com/bgryszko/react-native-circular-slider) I achieve exactly what you're looking for by splitting circle into segments and draw small linear gradients – in practice if gradient colors difference is subtle or there are enough "segments" it'll look as if it's cannonical gradient.

Link to specific code:
https://github.com/bgryszko/react-native-circular-slider/blob/master/src/CircularSlider.js#L161-L168

[fdnhkj]

Indeed, I forgot to update this issue with my findings, I'll try to find back my repo & share it.

Basically I switched to react-native-svg and as you mentioned splited the circle in multiple segments with attached linear gradients (see http://jsfiddle.net/Cy7ec/3/).

The conical gradient was looking fine on both iOS & Android but I had quite some issues with the Android animations (lots of dropped fps).

It's maybe worth trying with the latest versions of react-native & react-native-svg.
I will give you updates ASAP.

[bartgryszko]

That's great! In fact this library would need switch over to react-native-svg as well. Bart

…

On 8 Jan 2017, at 12:47 AM, Fidan Hakaj ***@***.***> wrote: Indeed, I forgot to update this issue with my findings, I'll try to find back my repo & share it. Basically I switched to react-native-svg and as you mentioned splited the circle in multiple segments with attached linear gradients (see http://jsfiddle.net/Cy7ec/3/). The conical gradient was looking fine on both iOS & Android but I had quite some issues with the Android animations (lots of dropped fps). It's maybe worth trying with the latest versions of react-native & react-native-svg. I will give you updates ASAP. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[fdnhkj]

Voilà, I published my findings after upgrading to latest react-native and react-native-svg in fdnhkj/react-native-conical-gradient.

It looks like there are some dropped fps. I don't really see how to improve it tho, suggestions are welcome 🙂

Fidan

[bartgryszko]

I'm happy to accept PR if anybody would be able to merge this into main lib.

[zoharlevin]

+1

[t2krew]

+1

[rodrigooler]

+1

[valerybodak]

@fdnhkj
How to make it spin in the opposite direction? (like in the first your post)

[NeXTs]

@fdnhkj based on this research the only possible solution to improve FPS is using canvas instead of svg