Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-circular-progress-indicator

Package Overview
Dependencies
Maintainers
1
Versions
34
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-circular-progress-indicator

React Native customizable circular progress indicator

  • 4.4.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
18K
decreased by-40%
Maintainers
1
Weekly downloads
 
Created
Source

React Native Circular Progress Indicator 🔥

license platforms Version npm

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

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

npm install react-native-circular-progress-indicator

or

yarn add react-native-circular-progress-indicator

Example

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

....

<CircularProgress value={58} />
<CircularProgress
  value={60}
  radius={120}
  duration={2000}
  progressValueColor={'#ecf0f1'}
  maxValue={200}
  title={'KM/H'}
  titleColor={'white'}
  titleStyle={{fontWeight: 'bold'}}
/>
<CircularProgress
  value={60}
  activeStrokeWidth={12}
  progressValueColor={'#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}
  progressValueColor={'#fff'}
  valueSuffix={'%'}
/>

With callback function
import CircularProgress from 'react-native-circular-progress-indicator';

....

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

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

....

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

<CircularProgress
  value={60}
  radius={120}
  inActiveStrokeOpacity={0.5}
  activeStrokeWidth={20}
  inActiveStrokeWidth={20}
  progressValueStyle={{ 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}
  progressValueColor={'#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

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

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

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

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

...

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

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,

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

....

<CircularProgress
  value={30}
  radius={150}
  duration={1000}
  progressValueColor={'cyan'}
  titleFontSize={16}
  titleColor={'#333'}
  titleStyle={{ fontWeight: 'bold' }}
  circleBackgroundColor={'#333'}
  activeStrokeColor={'#2465FD'}
  activeStrokeSecondaryColor={'#C3305D'}
  inActiveStrokeColor={'white'}
  progressFormatter={(value: number) => {
    'worklet';
      
    return value.toFixed(2); // 2 decimal places
  }}
/>

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
import CircularProgress from 'react-native-circular-progress-indicator';

....

<CircularProgress
  value={97}
  radius={120}
  inActiveStrokeOpacity={0.5}
  activeStrokeWidth={15}
  inActiveStrokeWidth={20}
  progressValueStyle={{ fontWeight: '100', color: 'white' }}
  activeStrokeSecondaryColor="yellow"
  inActiveStrokeColor="black"
  duration={5000}
  dashedStrokeConfig={{
    count: 50,
    width: 4,
  }}
/>

Animated stroke color
import CircularProgress from 'react-native-circular-progress-indicator';

....

 <CircularProgress
  value={100}
  radius={120}
  progressValueColor={'#fff'}
  duration={10000}
  strokeColorConfig={[
    { color: 'red', value: 0 },
    { color: 'skyblue', value: 50 },
    { color: 'yellowgreen', value: 100 },
  ]}
/>

Play, Pause, and ReAnimate
import CircularProgress, { ProgressRef } from 'react-native-circular-progress-indicator';

const progressRef = useRef<ProgressRef>(null);

// to pause animation
progressRef.current.pause();

// to play animation
progressRef.current.play();

// to re-play animation
progressRef.current.reAnimate();

....

 <CircularProgress
  ref={progressRef}
  value={100}
  radius={120}
  duration={10000}
/>

Props

CircularProgressBase Props

PropDescriptionTypeDefault ValueRequired
valueprogress valueNumber0true
initialValueinitial progress value. Helpful when used as a countdown timerNumber0false
circleBackgroundColorprogress circle background colorString'transparent'false
radiusprogress circle radiusNumber60false
activeStrokeWidthactive progress circle stroke widthNumber10false
inActiveStrokeWidthinactive progress circle stroke widthNumber10false
durationprogress animation durationNumber500false
delayprogress animation delayNumber0false
maxValueprogress maximum value. Percentage calculation is based on the maximum value providedString100false
inActiveStrokeOpacityinactive progress circle opacity valueNumber1false
rotationrotate the progress ring by this value. Accepts a number from -360 to 360Number0false
strokeLinecapprogress stroke line cap'round' or 'butt' or 'square''round'false
onAnimationCompletecallback when animation is completed.Function()=>nullfalse
activeStrokeColoractive progress circle colorString'#2ecc71'false
activeStrokeSecondaryColoractive progress secondary color. Use this to provide a gradient effectString''false
inActiveStrokeColorinactive progress circle colorString'rgba(0,0,0,0.3)'false
clockwiseshow ring progress clockwise or anti-clockwise. pass false to enable anti clock-wiseBooltruefalse
dashedStrokeConfigdisplay the progress circle as dashed lines with customizable stroke count and width.DashedStrokeConfigType{ width: 0, count: 0 }false
strokeColorConfiganimate the progress circle stroke color based on the animation value.StrokeColorConfigType[]undefinedfalse
startInPausedStaterender the progress circle initially without any animation.Boolfalsefalse
childrenany react elementReact Elementnullfalse

CircularProgress Props

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

PropDescriptionTypeDefault ValueRequired
titletitle to display below the progress valueString''false
titleStyletitle text styleObject{}false
titleColortitle text colorStringfalse
titleFontSizetitle text font sizeNumberfalse
subtitlesubtitle to display below the progress valueString''false
subtitleStylesubtitle text styleObject{}false
subtitleColorsubtitle text colorStringfalse
subtitleFontSizesubtitle text font sizeNumberfalse
progressValueColorprogress value text colorStringfalse
progressValueStyleprogress value text styleObject{}false
progressValueFontSizeprogress value text font sizeNumberfalse
inActiveStrokeOpacityinactive progress circle opacity valueNumber1false
valuePrefixprefix valueString''false
valueSuffixsuffix valueString''false
showProgressValueshow or hide the progress text valueBooltruefalse
progressFormatterfunction to format the progress value. Make sure to define it as a worklet function.Function(v)=> Math.round(v)false
allowFontScalingspecifies whether fonts should scale to respect Text Size accessibility settings.Booltruefalse
valuePrefixStylecustom 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
valueSuffixStylecustom 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.

progressRef.current.pause();

play Imperative method to play the animation once paused.

progressRef.current.play();

reAnimate Imperative method to restart the animation.

progressRef.current.reAnimate();

License

This project is licensed under the MIT License.

Keywords

FAQs

Package last updated on 06 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc