rn-circular-bar

A light-weighted react-native module for creating a circular progress bar. This module incorporates animations and has peer dependency on react-native-reanimated@1.13.3.

Install

This component is built with React Native and works for Android and iOS.

Install with npm:

npm i --save rn-circular-bar

Install with yarn:

$ yarn add rn-circular-bar

Sample

Usage

Basic Usage

import React from 'react';
import { StatusBar, View } from 'react-native';
import ProgressBar from 'rn-circular-bar';

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: 'black'
  }
});

const App = () => {
  return (
    <View style={styles.wrapper}>
      <StatusBar hidden />
      <ProgressBar 
        progress={35}
        label={'Downloaded'}
        showPercentSymbol={true}
        progressFontSize={30}
        labelFontSize={15}
      />
    </View>
  );
};

export default App;

Properties

Property name	Type	Default	Description
radius	number	80	The radius of the circle
strokeWidth	number	10	The stroke/thickness of the circle
color	string	cyan	The color of the circle
opacity	number	0.2	The opacity of the slider
duration	number	2000	The duration in milliseconds
progress	number	-	The value out of 100.
progresFontSize	number	40	The font size of the progress
label	string	-	The lable along with the progress
labelFontSize	number	20	The font size of the label
showPercentSymbol	boolean	false	To show the % symbol

Note

This dependency takes the modulo of 100. Let's assume the user has passed 135 as progress, the progress will be 35.

Progress: This is the value on a scale of 100. If the entity has a value of 50 out of 150, the value of progress should be 33.

Author

Shivam Gupta