# react-native-circular-progress > React Native component for creating animated, circular progress with react-native-svg Latest version **1.4.1** (published 2024-10-26) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-circular-progress pnpm add react-native-circular-progress yarn add react-native-circular-progress bun add react-native-circular-progress ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.1 | | Published | 2024-10-26 | | First published | 2015-10-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 20.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2247 | | Author | Bart Gryszko | | Maintainers | bgryszko, markusl, jacse | | Keywords | react, react-native, react-component, progress, chart, react-svg | ## Links - npm: https://www.npmjs.com/package/react-native-circular-progress - Repository: https://github.com/bgryszko/react-native-circular-progress - Issues: https://github.com/bgryszko/react-native-circular-progress/issues - npm.io page: https://npm.io/package/react-native-circular-progress ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.8.1 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 1.4.1 (latest) — 2024-10-26 - 1.4.0 — 2024-04-23 - 1.3.9 — 2023-06-15 - 1.3.8 — 2023-01-19 - 1.3.7 — 2021-02-07 - 1.3.6 — 2020-01-28 - 1.3.5 — 2020-01-18 - 1.3.4 — 2019-11-01 - 1.3.3 — 2019-10-23 - 1.3.2 — 2019-10-20 - 1.3.0 — 2019-07-16 - 1.2.0 — 2019-07-16 - 1.1.0 — 2018-12-29 - 1.0.1 — 2018-07-26 - 1.0.0 — 2018-07-07 - … 13 more at https://npm.io/package/react-native-circular-progress/versions ## README # react-native-circular-progress [![license](https://img.shields.io/github/license/mashape/apistatus.svg)]() [![Version](https://img.shields.io/npm/v/react-native-circular-progress.svg)](https://www.npmjs.com/package/react-native-circular-progress) [![npm](https://img.shields.io/npm/dt/react-native-circular-progress.svg)](https://www.npmjs.com/package/react-native-circular-progress) React Native component for creating animated, circular progress. Useful for displaying users points for example. ## Example app ![image](screenshot.gif) ## Installation 1. Install this component and `react-native-svg`: `npm i --save react-native-circular-progress react-native-svg` 2. Link native code for SVG: `react-native link react-native-svg` ## Usage ```js import { AnimatedCircularProgress } from 'react-native-circular-progress'; console.log('onAnimationComplete')} backgroundColor="#3d5875" /> ``` You can also define a function that'll receive current progress and for example display it inside the circle: ```jsx { (fill) => ( { this.state.fill } ) } ``` You can also define a function that'll receive the location at the top of the progress circle and render a custom SVG element: ```jsx } /> ``` Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the `animate(toValue, duration, easing)` function like so: ```jsx this.circularProgress = ref} ... /> ``` ```js this.circularProgress.animate(100, 8000, Easing.quad); // Will fill the progress bar linearly in 8 seconds ``` The `animate`-function returns the timing animation so you can chain, run in parallel etc. ## Configuration You can configure the CircularProgress-component by passing the following props: Name | Type | Default value | Description ----------------------|------------------------|-------------------------|-------------- size | number\|Animated.Value | **required** | Width and height of circle width | number | **required** | Thickness of the progress line backgroundWidth | number | width | Thickness of background circle fill | number (0-100) | 0 | Current progress / fill tintColor | string | black | Color of the progress line tintTransparency | boolean | true | Transparency of the progress line backgroundColor | string | | If unspecified, no background line will be rendered rotation | number (-360 - 360) | 90 | Angle from which the progress starts from lineCap | string | butt | Shape used at ends of progress line. Possible values: butt, round, square arcSweepAngle | number (0-360) | 360 | If you don't want a full circle, specify the arc angle style | ViewPropTypes.style | | Extra styling for the main container children | function | | Pass a function as a child. It received the current fill-value as an argument childrenContainerStyle| ViewPropTypes.style | | Extra styling for the children container padding | number | 0 | Padding applied around the circle to allow for a cap that bleeds outside its boundary dashedBackground | object | { width: 0, gap: 0 } | Bar background as dashed type dashedTint | object | { width: 0, gap: 0 } | Bar tint as dashed type renderCap | function | undefined | Function that's invoked during rendering to draw at the tip of the progress circle The following props can further be used on `AnimatedCircularProgress`: Name | Type | Default value | Description --------------------|------------------------|-------------------------|-------------- prefill | number (0-100) | 0 | Initial fill-value before animation starts duration | number | 500 | Duration of animation in ms delay | number | 0 | Delay of animation in ms easing | function | Easing.out(Easing.ease) | Animation easing function onAnimationComplete | function | | Function that's invoked when the animation completes (both on mount and if called with `.animate()`) onFillChange | function | | Function that returns current progress on every change tintColorSecondary | string | the same as tintColor | To change fill color from tintColor to tintColorSecondary as animation progresses `AnimatedCircularProgress` also exposes the following functions: Name | Arguments | Description ------------|----------- |---------------- animate | (toVal: number, duration: number, ease: function) | Animate the progress bar to a specific value reAnimate | (prefill: number, toVal: number, duration: number, ease: function) | Re-run animation with a specified prefill-value ## Running example app (Expo) ```sh git clone https://github.com/bgryszko/react-native-circular-progress.git cd react-native-circular-progress/example-app yarn yarn start ``` ## Authors * Bartosz Gryszko (b@gryszko.com) * Markus Lindqvist * Jacob Lauritzen * Special thanks to all contributors! ## License MIT ## Special thanks Special thanks to [Chalk+Chisel](http://chalkchisel.com) for creating working environment where people grow. This component was created for one of the projects we're working on. --- _Source: https://npm.io/package/react-native-circular-progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._