Rn-animated-progress-circle NPM

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

animated gif of progress circle changing to different percentages of completion

source

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

a colourful pie chart with six slices

source

react react native progress-circle circle progress animated-progress-circle

@infinitebrahmanuniverse/nolb-rn-a @everything-registry/sub-chunk-2673

1.0.0

5 years ago