rn-circular-bar

A light-weighted react-native module for creating a circular progress bar. This module incorporates animations and has peer dependency on [email protected].

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