React Native Animated Progress Circle

rn-animated-progress-circle

A React Native animated progress circle component with no dependencies (aside from react-native).

Props

PROP	TYPE	DESCRIPTION
value	Number / Animated.Value	Number between `0-1` which indicates the total progress of the circle. Default value is `0`. Also accepts an `Animated.Value` (to be interpolated 0-1) if you wish to handle the timing of the animation outside of the component.
size	Number	Sets the size of the progress circle. Default size is `64`.
thickness	Number	Sets the thickness of the progress circle. Default thickness is `7`
color	String	Sets the color of the complete portion of the progress circle. Default color is `#7e42ed`.
unfilledColor	String	Sets the color of the incomplete portion of the progress circle. Default unfilledColor is `transparent`.
style	Object	Any arbitrary styles you want to pass to the component.
children	ReactNode	Any children you want to appear in the center of the progress circle.
animationMethod	String	Animation method to be used. Takes one of the following strings: `timing`, `spring`, `bounce`, `decay`. Setting this value will animate the component. Please note that this prop will have no effect if you choose to pass in an `Animated.Value` instead of a `Number` to the `value` prop.
animationConfig	Object	Configuration object to set animation parameters. See configuration docs for timing, spring, bounce, and decay. `useNativeDriver` is set to `true` by default. Please note that this prop will have no effect if you choose to pass in an `Animated.Value` instead of a `Number` to the `value` prop.
shouldAnimateFirstValue	Boolean	Indicates whether the initial value passed to the `value` prop should animate in or not. Defaults to `false`. If set to true, you should specify how you want the progress circle to animate via `animationMethod` and `animationConfig` props. Please note that this prop will have no effect if you choose to pass in an `Animated.Value` instead of a `Number` to the `value` prop.
onChange	Function	Callback function which gets called when the `value` prop changes.
onChangeAnimationEnd	Function	Callback function which gets called when the animation that occurs after the `value` prop changes is complete. Please note that this prop will have no effect if you choose to pass in an `Animated.Value` instead of a `Number` to the `value` prop.