React Native Sumit Circular Progress

A customizable circular progress bar component for React Native applications.

Installation

npm install react-native-sumit-circular-progress react-native-svg

or

yarn add react-native-sumit-circular-progress react-native-svg

Note: This package requires react-native-svg as a peer dependency.

Usage

import React from 'react';
import { View, StyleSheet } from 'react-native';
import CircularProgressBar from 'react-native-sumit-circular-progress';

export default function App() {
  return (
    <View style={styles.container}>
      {/* Basic usage */}
      <CircularProgressBar progress={75} />
      
      {/* Custom styling */}
      <CircularProgressBar 
        size={200}
        strokeWidth={10}
        progress={65}
        backgroundColor="#e0e0e0"
        progressColor="#ff0000"
        textColor="#333"
      />
      
      {/* With value display */}
      <CircularProgressBar 
        currentValue={750}
        maxValue={1000}
        showValue={true}
        showPercentage={false}
      />
      
      {/* Custom format */}
      <CircularProgressBar 
        currentValue={42}
        maxValue={100}
        formatValue={(current, max) => `${current} of ${max}`}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    gap: 20,
  },
});

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 150 | Width and height of the component | | strokeWidth | number | 15 | Width of the progress and background stroke | | progress | number | 0 | Progress percentage (0-100) | | maxValue | number | 100 | Maximum value for calculating progress | | currentValue | number | 0 | Current value for calculating progress | | backgroundColor | string | '#E6E6E6' | Color of the background circle | | progressColor | string | '#2089DC' | Color of the progress circle | | textColor | string | '#000' | Color of the center text | | showPercentage | boolean | true | Whether to show percentage in the center | | showValue | boolean | false | Whether to show current/max values in the center | | animationDuration | string | '0.5s' | Duration of the progress animation | | formatValue | function | null | Custom function to format displayed text | | textStyle | object | {} | Additional styles for the text | | containerStyle | object | {} | Additional styles for the container |

License

MIT