mikepodgorniy/react-native-conical-gradient-progress

Conical gradient in a circular progress component

react-native-conical-gradient-progress

🌅

Installation

Install this component and react-native-svg:

npm i --save react-native-conical-gradient-progress react-native-svg

Link native code for SVG:

react-native link react-native-svg

Description

• Can accept external Props size, width, fill, prefill, beginColor, endColor, segments, backgroundColor
• Migrated to expo
• Migrated to react-native-svg
• Used multiple paths and different linear gradients to implement the conical gradient

Todo

• Customize component
• Some performance tricks
• Accept Component Props
• Move to Expo

Status

References

• bartgryszko/react-native-circular-progress#41
• https://github.com/fdnhkj/react-native-conical-gradient
• https://github.com/bgryszko/react-native-circular
• http://jsfiddle.net/Cy7ec/3/
• https://github.com/fdnhkj/react-native-conical-gradient

react-native-conical-gradient-progress's Issues

rotation and arcSweepAngle

Is there a way to use these props for this component?

Error: Unable to parse color from string: rgb (NaN,NaN,Nan)

I just try the package to my project and I got this rgb error.

Is it possible to have multiple gradients colours?

Is it possible to have multiple gradients colours?

Please publish the new updates to npm package

I have been waiting for new changes to be published to npm since 2 weeks, please publish, Thanks.

Some information

Hi @MikePodgorniy, Some doubts:

1. I do not understand why in the package did you put svg in the package.json?
2. 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
3. You could improve the documentation I do not understand what serves prefill and segments.
4. It would be interesting to be able to animate itself for example, click on Play and at intervals defined for example every 3.33 is removed from 100% and when it reaches a value defined for example 0% then you start a function defined as props.

Laggy performance

This is a great plugin, but the bar's performance is very laggy in all of the devices I have tested it on. Any help would be hugely appreciated.

arcSweepAngle

Is there possible to have arcSweepAngle ?

Is there any possibility to implement this ?

linecap options

Hi there,How can I change the linecap to flat instead of round shaped?

isClockwise

isClockwise props is not working , can someone give the exact way?