rn-circular-bar v1.1.3

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

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