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.

Examples

Animated.spring to animate value changes with Text as children

source

Recreation of the native Android spinner

source

GitHub