React Native Circular Progress Indicator 🔥

A simple and customizable React Native circular progress indicator component.

This project is inspired from this Youtube tutorial. Do check it out. Special mention at @mironcatalin

Demo

❤️ Try on Expo Snack

Prerequisites

⚠️ Peer Dependencies

• react-native-svg
• react-native-reanimated-v2

This component has a peer dependency on react-native-reanimated-v2. react-native-reanimated-v2 has to be installed and linked into your project. Follow react-native-reanimated-v2 to install the dependency.

This component has a peer dependency on react-native-svg to draw the countdown circle. react-native-svg has to be installed and linked into your project. Follow react-native-svg to install the dependency.

This library also depends on withPause function from react-native-redash. If you have already installed react-native-redash, make sure the package version is at-least v15.0.1

Installation

Supported version: react-native >= 0.59.0

1npm install react-native-circular-progress-indicator

or

1yarn add react-native-circular-progress-indicator

Example

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5<CircularProgress value={58} />
6<CircularProgress
7  value={60}
8  radius={120}
9  duration={2000}
10  progressValueColor={'#ecf0f1'}
11  maxValue={200}
12  title={'KM/H'}
13  titleColor={'white'}
14  titleStyle={{fontWeight: 'bold'}}
15/>
16<CircularProgress
17  value={60}
18  activeStrokeWidth={12}
19  progressValueColor={'#ecf0f1'}
20/>
21

With value prefix/suffix

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5<CircularProgress
6  value={90}
7  valuePrefix={'$'}
8  inActiveStrokeColor={'#2ecc71'}
9  inActiveStrokeOpacity={0.2}
10/>
11
12<CircularProgress
13  value={85}
14  inActiveStrokeColor={'#2ecc71'}
15  inActiveStrokeOpacity={0.2}
16  progressValueColor={'#fff'}
17  valueSuffix={'%'}
18/>
19

With callback function

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5<CircularProgress
6  value={90}
7  inActiveStrokeColor={'#2ecc71'}
8  inActiveStrokeOpacity={0.2}
9  progressValueColor={'#fff'}
10  valueSuffix={'%'}
11  onAnimationComplete={() => { alert('callback') }}
12/>
13

Custom

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5 <CircularProgress
6  value={60}
7  radius={120}
8  progressValueColor={'#ecf0f1'}
9  activeStrokeColor={'#f39c12'}
10  inActiveStrokeColor={'#9b59b6'}
11  inActiveStrokeOpacity={0.5}
12  inActiveStrokeWidth={20}
13  activeStrokeWidth={40}
14/>
15       
16<CircularProgress
17  value={60}
18  radius={120}
19  progressValueColor={'#ecf0f1'}
20  activeStrokeColor={'#f39c12'}
21  inActiveStrokeColor={'#9b59b6'}
22  inActiveStrokeOpacity={0.5}
23  inActiveStrokeWidth={40}
24  activeStrokeWidth={20}
25/>
26
27<CircularProgress
28  value={60}
29  radius={120}
30  inActiveStrokeOpacity={0.5}
31  activeStrokeWidth={20}
32  inActiveStrokeWidth={20}
33  progressValueStyle={{ fontWeight: '100', color: 'yellow' }}
34/>
35

Use as a countdown timer

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5<CircularProgress
6  value={0}
7  radius={120}
8  maxValue={10}
9  initialValue={10}
10  progressValueColor={'#fff'}
11  activeStrokeWidth={15}
12  inActiveStrokeWidth={15}
13  duration={10000}
14  onAnimationComplete={() => alert('time out')}
15/>
16

With gradient effect

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5<CircularProgress
6  value={100}
7  activeStrokeColor={'#2465FD'}
8  activeStrokeSecondaryColor={'#C25AFF'}
9/>
10

With multiple child

⚠️ IMPORTANT ⚠️ CircularProgressWithChild component has been renamed to CircularProgressBase. The CircularProgressWithChild component is still available in the package but will be removed in the next releases Please use the new CircularProgressBase component instead.

1import { CircularProgressBase } from 'react-native-circular-progress-indicator';
2
3// accepts any react element as child
4....
5
6const props = {
7  activeStrokeWidth: 25,
8  inActiveStrokeWidth: 25,
9  inActiveStrokeOpacity: 0.2
10};
11
12...
13
14<CircularProgressBase
15  {...props}
16  value={80}
17  radius={125}
18  activeStrokeColor={'#e84118'}
19  inActiveStrokeColor={'#e84118'}
20>
21  <CircularProgressBase
22    {...props}
23    value={87}
24    radius={100}
25    activeStrokeColor={'#badc58'}
26    inActiveStrokeColor={'#badc58'}
27  >
28    <CircularProgressBase
29      {...props}
30      value={62}
31      radius={75}
32      activeStrokeColor={'#18dcff'}
33      inActiveStrokeColor={'#18dcff'}
34    />
35  </CircularProgressBase>
36</CircularProgressBase>
37

Custom progress formatter function

By default, the progress value is rounded to the nearest integer. If you want to display decimal place values, you can do so by,

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5<CircularProgress
6  value={30}
7  radius={150}
8  duration={1000}
9  progressValueColor={'cyan'}
10  titleFontSize={16}
11  titleColor={'#333'}
12  titleStyle={{ fontWeight: 'bold' }}
13  circleBackgroundColor={'#333'}
14  activeStrokeColor={'#2465FD'}
15  activeStrokeSecondaryColor={'#C3305D'}
16  inActiveStrokeColor={'white'}
17  progressFormatter={(value: number) => {
18    'worklet';
19      
20    return value.toFixed(2); // 2 decimal places
21  }}
22/>

Make sure to mark this function as a worklet function. Read more about worklets at https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/worklets/

Dashed circular progress

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5<CircularProgress
6  value={97}
7  radius={120}
8  inActiveStrokeOpacity={0.5}
9  activeStrokeWidth={15}
10  inActiveStrokeWidth={20}
11  progressValueStyle={{ fontWeight: '100', color: 'white' }}
12  activeStrokeSecondaryColor="yellow"
13  inActiveStrokeColor="black"
14  duration={5000}
15  dashedStrokeConfig={{
16    count: 50,
17    width: 4,
18  }}
19/>

Animated stroke color

1import CircularProgress from 'react-native-circular-progress-indicator';
2
3....
4
5 <CircularProgress
6  value={100}
7  radius={120}
8  progressValueColor={'#fff'}
9  duration={10000}
10  strokeColorConfig={[
11    { color: 'red', value: 0 },
12    { color: 'skyblue', value: 50 },
13    { color: 'yellowgreen', value: 100 },
14  ]}
15/>

Play, Pause, and ReAnimate

1import CircularProgress, { ProgressRef } from 'react-native-circular-progress-indicator';
2
3const progressRef = useRef<ProgressRef>(null);
4
5// to pause animation
6progressRef.current.pause();
7
8// to play animation
9progressRef.current.play();
10
11// to re-play animation
12progressRef.current.reAnimate();
13
14....
15
16 <CircularProgress
17  ref={progressRef}
18  value={100}
19  radius={120}
20  duration={10000}
21/>

Props

CircularProgressBase Props

Prop	Description	Type	Default Value	Required
value	progress value	Number	0	true
initialValue	initial progress value. Helpful when used as a countdown timer	Number	0	false
circleBackgroundColor	progress circle background color	String	'transparent'	false
radius	progress circle radius	Number	60	false
activeStrokeWidth	active progress circle stroke width	Number	10	false
inActiveStrokeWidth	inactive progress circle stroke width	Number	10	false
duration	progress animation duration	Number	500	false
delay	progress animation delay	Number	0	false
maxValue	progress maximum value. Percentage calculation is based on the maximum value provided	String	100	false
inActiveStrokeOpacity	inactive progress circle opacity value	Number	1	false
rotation	rotate the progress ring by this value. Accepts a number from -360 to 360	Number	0	false
strokeLinecap	progress stroke line cap	'round' or 'butt' or 'square'	'round'	false
onAnimationComplete	callback when animation is completed.	Function	()=>null	false
activeStrokeColor	active progress circle color	String	'#2ecc71'	false
activeStrokeSecondaryColor	active progress secondary color. Use this to provide a gradient effect	String	''	false
inActiveStrokeColor	inactive progress circle color	String	'rgba(0,0,0,0.3)'	false
clockwise	show ring progress clockwise or anti-clockwise. pass false to enable anti clock-wise	Bool	true	false
dashedStrokeConfig	display the progress circle as dashed lines with customizable stroke count and width.	DashedStrokeConfigType	{ width: 0, count: 0 }	false
strokeColorConfig	animate the progress circle stroke color based on the animation value.	StrokeColorConfigType[]	undefined	false
startInPausedState	render the progress circle initially without any animation.	Bool	false	false
children	any react element	React Element	null	false

CircularProgress Props

CircularProgress component accepts all CircularProgressBase props except the children prop. Along with that, it also accepts the following props.

Prop	Description	Type	Default Value	Required
title	title to display below the progress value	String	''	false
titleStyle	title text style	Object	{}	false
titleColor	title text color	String		false
titleFontSize	title text font size	Number		false
subtitle	subtitle to display below the progress value	String	''	false
subtitleStyle	subtitle text style	Object	{}	false
subtitleColor	subtitle text color	String		false
subtitleFontSize	subtitle text font size	Number		false
progressValueColor	progress value text color	String		false
progressValueStyle	progress value text style	Object	{}	false
progressValueFontSize	progress value text font size	Number		false
inActiveStrokeOpacity	inactive progress circle opacity value	Number	1	false
valuePrefix	prefix value	String	''	false
valueSuffix	suffix value	String	''	false
showProgressValue	show or hide the progress text value	Bool	true	false
progressFormatter	function to format the progress value. Make sure to define it as a worklet function.	Function	(v)=> Math.round(v)	false
allowFontScaling	specifies whether fonts should scale to respect Text Size accessibility settings.	Bool	true	false
valuePrefixStyle	custom styling to value prefix. Use this to customize the styling of the value prefix. If not provided, the progress value style/colors will be used.	TextStyle	{}	false
valueSuffixStyle	custom styling to value suffix. Use this to customize the styling of the value suffix. If not provided, the progress value style/colors will be used.	TextStyle	{}	false

Methods

pause Imperative method to pause the animation.

1progressRef.current.pause();

play Imperative method to play the animation once paused.

1progressRef.current.play();

reAnimate Imperative method to restart the animation.

1progressRef.current.reAnimate();

License

This project is licensed under the MIT License.