# rn-animated-progress-circle > rn-animated-progress-circle Latest version **1.0.0** (published 2019-07-13) · MIT license · 0 weekly downloads ## Install ```sh npm install rn-animated-progress-circle pnpm add rn-animated-progress-circle yarn add rn-animated-progress-circle bun add rn-animated-progress-circle ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2019-07-13 | | First published | 2019-07-13 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 256.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 21 | | Author | simonsteer | | Maintainers | tameto | | Keywords | react, react native, progress-circle, circle, progress, animated-progress-circle | ## Links - npm: https://www.npmjs.com/package/rn-animated-progress-circle - Repository: https://github.com/simonsteer/rn-animated-progress-circle - Homepage: https://github.com/simonsteer/rn-animated-progress-circle#readme - Issues: https://github.com/simonsteer/rn-animated-progress-circle/issues - npm.io page: https://npm.io/package/rn-animated-progress-circle ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.0 (latest) — 2019-07-13 ## README # 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](https://github.com/react-native-community/react-native-releases/blob/master/CHANGELOG.md#android-specific-additions-3) ### 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](https://facebook.github.io/react-native/docs/animated#timing), [spring](https://facebook.github.io/react-native/docs/animated#spring), [bounce](https://facebook.github.io/react-native/docs/animated#bounce), and [decay](https://facebook.github.io/react-native/docs/animated#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](https://raw.githubusercontent.com/simonsteer/rn-animated-progress-circle/master/examples/animated-spring.gif) [source](https://github.com/simonsteer/rn-animated-progress-circle/blob/master/examples/AnimatedSpring.js) #### A PieChart component that takes an array of objects as data: [{ color: String, value: Number }] ![a colourful pie chart with six slices](https://raw.githubusercontent.com/simonsteer/rn-animated-progress-circle/master/examples/pie-chart.png) [source](https://github.com/simonsteer/rn-animated-progress-circle/blob/master/examples/PieChart.js) --- _Source: https://npm.io/package/rn-animated-progress-circle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._