React Native component for creating animated, circular progress. Useful for displaying users points for example.

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

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

<AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  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:

<AnimatedCircularProgress
  size={200}
  width={3}
  fill={this.state.fill}
  tintColor="#00e0ff"
  backgroundColor="#3d5875">
  {
    (fill) => (
      <Text>
        { this.state.fill }
      </Text>
    )
  }
</AnimatedCircularProgress>

You can also define a function that'll receive the location at the top of the progress circle and render a custom SVG element:

<AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  backgroundColor="#3d5875"
  padding={10}
  renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
  />

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:

<AnimatedCircularProgress
  ref={(ref) => this.circularProgress = ref}
  ...
/>

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.

You can configure the CircularProgress-component by passing the following props:

The following props can further be used on AnimatedCircularProgress:

AnimatedCircularProgress also exposes the following functions:

git clone https://github.com/bgryszko/react-native-circular-progress.git
cd react-native-circular-progress/example-app
yarn
yarn start

• Bartosz Gryszko ([email protected])
• Markus Lindqvist
• Jacob Lauritzen
• Special thanks to all contributors!

MIT

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.