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

❤️ 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.

Installation

Supported version: react-native >= 0.59.0

npm install react-native-circular-progress-view

or

yarn add react-native-circular-progress-view

Example

import CircularProgress from 'react-native-circular-progress-indicator';

....

<CircularProgress value={58} />
<CircularProgress
  value={60}
  radius={120}
  duration={2000}
  textColor={'#ecf0f1'}
  maxValue={200}
  title={'KM/H'}
  titleColor={'white'}
  titleStyle={{fontWeight: 'bold'}}
/>
<CircularProgress
  value={60}
  activeStrokeWidth={12}
  textColor={'#ecf0f1'}
/>

with value prefix/suffix

import CircularProgress from 'react-native-circular-progress-indicator';

....

<CircularProgress
  value={90}
  valuePrefix={'$'}
  inActiveStrokeColor={'#2ecc71'}
  inActiveStrokeOpacity={0.2}
/>

<CircularProgress
  value={85}
  inActiveStrokeColor={'#2ecc71'}
  inActiveStrokeOpacity={0.2}
  textColor={'#fff'}
  valueSuffix={'%'}
/>

with callback function

import CircularProgress from 'react-native-circular-progress-indicator';

....

<CircularProgress
  value={90}
  inActiveStrokeColor={'#2ecc71'}
  inActiveStrokeOpacity={0.2}
  textColor={'#fff'}
  valueSuffix={'%'}
  onAnimationComplete={() => { alert('callback') }}
/>

custom

import CircularProgress from 'react-native-circular-progress-indicator';

....

 <CircularProgress
  value={60}
  radius={120}
  textColor={'#ecf0f1'}
  activeStrokeColor={'#f39c12'}
  inActiveStrokeColor={'#9b59b6'}
  inActiveStrokeOpacity={0.5}
  inActiveStrokeWidth={20}
  activeStrokeWidth={40}
/>

<CircularProgress
  value={60}
  radius={120}
  textColor={'#ecf0f1'}
  activeStrokeColor={'#f39c12'}
  inActiveStrokeColor={'#9b59b6'}
  inActiveStrokeOpacity={0.5}
  inActiveStrokeWidth={40}
  activeStrokeWidth={20}
/>

<CircularProgress
  value={60}
  radius={120}
  inActiveStrokeOpacity={0.5}
  activeStrokeWidth={20}
  inActiveStrokeWidth={20}
  textStyle={{ fontWeight: '100', color: 'yellow' }}
/>

use as a countdown timer

import CircularProgress from 'react-native-circular-progress-indicator';

....

<CircularProgress
  value={0}
  radius={120}
  maxValue={10}
  initialValue={10}
  textColor={'#fff'}
  activeStrokeWidth={15}
  inActiveStrokeWidth={15}
  duration={10000}
  onAnimationComplete={() => alert('time out')}
/>

with gradient effect

import CircularProgress from 'react-native-circular-progress-indicator';

....

<CircularProgress
  value={100}
  activeStrokeColor={'#2465FD'}
  activeStrokeSecondaryColor={'#C25AFF'}
/>

with multiple child

import { CircularProgressWithChild } from 'react-native-circular-progress-indicator';

// accepts any react element as child
....

const props = {
  activeStrokeWidth: 25,
  inActiveStrokeWidth: 25,
  inActiveStrokeOpacity: 0.2
};

...

<CircularProgressWithChild
  {...props}
  value={80}
  radius={125}
  activeStrokeColor={'#e84118'}
  inActiveStrokeColor={'#e84118'}
>
  <CircularProgressWithChild
    {...props}
    value={87}
    radius={100}
    activeStrokeColor={'#badc58'}
    inActiveStrokeColor={'#badc58'}
  >
    <CircularProgressWithChild
      {...props}
      value={62}
      radius={75}
      activeStrokeColor={'#18dcff'}
      inActiveStrokeColor={'#18dcff'}
    />
  </CircularProgressWithChild>
</CircularProgressWithChild>

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
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
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
textColor	progress value text color	String		false
textStyle	progress value text style	Object	{}	false
maxValue	progress maximum value. Percentage calculation is based on the maximum value provided	String	100	false
fontSize	progress value text font size	Number		false
inActiveStrokeOpacity	inactive progress circle opacity value	Number	1	false
strokeLinecap	progress stroke line cap	'round' or 'butt' or 'square'	'round'	false
onAnimationComplete	callback when animation is completed.	Function	()=>{}	false
valuePrefix	prefix value	String	''	false
valueSuffix	suffix value	String	''	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
showProgressValue	show or hide the progress text value	Bool	true	false
clockwise	show ring progress clockwise or anti-clockwise. pass false to enable anti clock-wise	Bool	true	false

License

This project is licenced under the MIT License.