react-native-circular-progress

license Version npm

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

Example app

image

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

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>

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.

Configuration

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

NameTypeDefault valueDescription
sizenumber|Animated.ValuerequiredWidth and height of circle
widthnumberrequiredThickness of the progress line
backgroundWidthnumberwidthThickness of background circle
fillnumber (0-100)0Current progress / fill
tintColorstringblackColor of the progress line
backgroundColorstringIf unspecified, no background line will be rendered
rotationnumber (-360 - 360)90Angle from which the progress starts from
lineCapstringbuttShape used at ends of progress line. Possible values: butt, round, square
arcSweepAnglenumber (0-360)360If you don't want a full circle, specify the arc angle
styleViewPropTypes.styleExtra styling for the main container
childrenfunctionPass a function as a child. It receiveds the current fill-value as an argument
childrenContainerStyleViewPropTypes.styleExtra styling for the children container

The following props can further be used on AnimatedCircularProgress:

NameTypeDefault valueDescription
prefillnumber (0-100)0Initial fill-value before animation starts
durationnumber500Duration of animation in ms
easingfunctionEasing.out(Easing.ease)Animation easing function
onAnimationCompletefunctionFunction that's invoked when the animation completes (both on mount and if called with .animate())

AnimatedCircularProgress also exposes the following functions:

NameArgumentsDescription
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)

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

Authors

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

License

MIT

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.