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

[robert-stevens]

+1

[MikePodgorniy]

@bartgryszko I can try add this feature, into react-native-circular-progress.
I updated @fdnhkj example with some changes and I have ideas how to increase perfomance with smooth gradient on the screen.

[hanishcodebrew]

@fdnhkj How to make it spin in the opposite direction? i.e clockwise instead of anticlockwise

[MikePodgorniy]

@hanishcodebrew you can wrap component into

<View style={ { transform: [ { scaleX: -1 }] } }>

or use similar code
https://github.com/MikePodgorniy/react-native-conical-gradient-progress/blob/de35329780ed6431ff21710dc8a6c69b639263e8/CircularProgress.js#L175-L183

[hanishcodebrew]

Thanks @MikePodgorniy for the instant reply. It works. I am facing a issue in Android.

I have given 45 to fill but its showing complete circle. And also can we add image and text inside the circle ?

[bartgryszko]

@MikePodgorniy I'm not actively participating in developing this library as I'm not working on any RN project currently. That said, feel free to add PR, if not me, maybe @Jacse or @markusl would be able to review and merge it.

[MikePodgorniy]

@hanishcodebrew yes, you can 👍 use render callback to this. but you need to rescale your inner components again
https://github.com/MikePodgorniy/react-native-conical-gradient-progress/blob/de35329780ed6431ff21710dc8a6c69b639263e8/example/App.js#L25-L32

[Angelk90]

@fdnhkj,@GroupXTech,@morelazers,@bartgryszko,@fdnhkj,@NeXTs,@MikePodgorniy,@hanishcodebrew :
I wanted to know how it ended, it also served me.

@fdnhkj: Your module react-native-conical-gradient, I do not find it on npm you can upload it, can you also put an example code?

@MikePodgorniy: Your module react-native-conical-gradient-progress, I do not find it on npm you can upload it, can you also put an example code?

For both:
The sample code of the images of your modules would be a step forward.

An example that can also be tried on snack.expo.io, would be very ideal.

[MikePodgorniy]

@Angelk90 Try now, it is available as an npm-package:
https://www.npmjs.com/package/react-native-conical-gradient-progress.

You can find an example here – https://github.com/MikePodgorniy/react-native-conical-gradient-progress/tree/master/example

if you use clear react-native you should install react-native-svg.

[Angelk90]

@MikePodgorniy : I do not understand why among the dependencies you did not put svg in the package.json?

[Angelk90]

@MikePodgorniy : I tried to convert your module to try it on https://snack.expo.io/
I am given the following error:
TypeError: undefined is not an object (evaluating 'o.map')
Line 27 of CircularProgress:
Here is the link where you can try it: https://snack.expo.io/HkDheSJmE

[MikePodgorniy]

@Angelk90
Thank you, I will check this issue later.
I tested component with expo local. If you want we can continue discussing there https://github.com/MikePodgorniy/react-native-conical-gradient-progress

[Angelk90]

@MikePodgorniy : Do not allow me to create issues in the indicated project.
It's because your project is a fork.

[MikePodgorniy]

@Angelk90 sorry, try again

[Angelk90]

@MikePodgorniy : I answered you in your project, I look forward to your response.

[ngnclht1102]

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

I have the same problem as well, the UI's fps is dropped to 2x. Any ideas on how to improve it?

[thanakij]

I have been doing something similar. My approach uses "LinearGradient" react-native-svg.

You can give it a try by:

npm install react-native-circular-progress-gradient@1.3.8

You will need to add tintColorSecondary prop to trigger the gradient mode.

[minafa96]

I have been doing something similar. My approach uses "LinearGradient" react-native-svg.

You can give it a try by:

npm install react-native-circular-progress-gradient@1.3.8

You will need to add tintColorSecondary prop to trigger the gradient mode.

GREAT, THANK YOU! 👍