Circular Progress Indicator For React Native

A simple and customizable React Native circular progress indicator component.

How to use it:

1. Install & import.

# Yarn
$ yarn add react-native-circular-progress-indicator

# NPM
$ npm i react-native-circular-progress-indicator
import CircularProgress from 'react-native-circular-progress-indicator';

2. Basic usage.

<CircularProgress value={60} />

3. Available component props.

value,
initialValue = 0,
circleBackgroundColor = 'transparent',
radius = 60,
duration = 500,
delay = 0,
maxValue = 100,
strokeLinecap = 'round', // 'round' or 'butt' or 'square'
onAnimationComplete = () => null,
activeStrokeColor = '#2ecc71',
activeStrokeSecondaryColor = null,
activeStrokeWidth = 10,
inActiveStrokeColor = 'rgba(0,0,0,0.3)',
inActiveStrokeWidth = 10,
inActiveStrokeOpacity = 1,
clockwise = true,
startInPausedState = false,
rotation = 0,
title = '',
titleStyle = {},
titleColor,
titleFontSize,
progressValueColor,
progressValueStyle = {},
progressValueFontSize,
valuePrefix = '',
valueSuffix = '',
showProgressValue = true,
subtitle = '',
subtitleStyle = {},
subtitleColor,
subtitleFontSize,
progressFormatter = (v: number) => {
  'worklet';
  return Math.round(v);
},
allowFontScaling = true,
dashedStrokeConfig = { count: 0, width: 0 },
valuePrefixStyle = {},
valueSuffixStyle = {},
strokeColorConfig = undefined,

Preview:

Circular Progress Indicator For React Native

Download Details:

Author: nithinpp69

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/nithinpp69/react-native-circular-progress-indicator

License: MIT

Add Comment