react-native-circular-progress

react-native-circular-progress copied to clipboard

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

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

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.

@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

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.

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 [email protected] 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.

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'm happy to accept PR if anybody would be able to merge this into main lib.

+1

+1

+1

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

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

+1

@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.

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

@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

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 ?

@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.

@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

@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.

@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.

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

@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

@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

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

@Angelk90 sorry, try again

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

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?

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

You can give it a try by:

npm install [email protected]

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

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

You can give it a try by:

npm install [email protected]

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

GREAT, THANK YOU! 👍