paulxuca / rn-animated-progress-circle

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

React Native Animated Progress Circle

Currently working on both Android and iOS on version 0.57 of react-native and up with the addition of support for overflow style property on Android

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.

Examples

Animated.spring to animate value changes with Text as children

source

A PieChart component that takes an array of objects as data: [{ color: String, value: Number }]

source