node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »


license Version npm Twitter Follow


React Native component for creating animated, circular progress with ReactART. Useful for displaying users points for example. Works on iOS & Android.

Looking for a circular slider? Take a look at my other component – react-native-circular-slider

Example app



  1. Install library npm i --save react-native-circular-progress
  2. As Expo user you are good to go right now, or alternatively install ART:
  3. Link ART library to your ReactNative project (how to link a library?). You'll find ReactART library in node_modules/react-native/Libraries/ART/ART.xcodeproj


Import CircularProgress or AnimatedCircularProgress.

import { AnimatedCircularProgress } from 'react-native-circular-progress';

Use as follows:

  onAnimationComplete={() => console.log('onAnimationComplete')}
  backgroundColor="#3d5875" />

You can also define a function, that'll receive current progress and for example display it inside the circle:

    (fill) => (
      <Text style={styles.points}>
        { this.state.fill }

Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the performLinearAnimation(toValue, duration) function like so:

this.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the progress bar linearly in 8 seconds


You can configure the passing by following props:

  • size – width and height of the circle
  • width - thickness of the lines
  • backgroundWidth - thickness of the background line
  • fill - current, percentage fill (from 0 to 100)
  • prefill - percentage fill before the animation (from 0 to 100)
  • tintColor - color of a progress line
  • backgroundColor - color of a background for progress line
  • rotation - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360
  • tension - the tension value for the spring animation (see here)
  • friction - the friction value for the spring animation (see here)
  • linecap - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see here)
  • children(fill) - you can pass function as a child to receive current fill
  • onAnimationComplete - you can pass a callback function that will be invoked when animation is complete. (see here)
  • onLinearAnimationComplete - you can pass a callback function that will be invoked when linear animation is complete. (see here)

Running example app

git clone
cd  react-native-circular-progress/example
yarn start


Bartosz Gryszko (

For new components and updates follow me on twitter.



Special thanks

Special thanks to Chalk+Chisel for creating working environment where people grow. This component was created for one of the projects we're working on.