@edvnz/circular-progress

CircularProgress

A simple, customizable circular progress indicator for React Native.

Installation

To install the BottomSheet component, run the following command:

$ npm install @edvnz/circular-progress
# or
$ yarn add @edvnz/circular-progress

Features

• Display a customizable circular progress indicator
• Display a percentage or custom text in the center of the circle
• Optionally display an icon in the center of the circle
• Optionally display a main text in the center of the circle
• Customize the size, stroke width, and colors of the progress circle and background circle
• Customize the variant, color, and alignment of the text displayed in the center of the circle
• Use a default theme or customize the colors using the bgColor and pgColor props
• Use a progressPercent prop to specify the percentage of the progress circle to be displayed
• Use an innerStrokeWidth prop to display an inner circle within the progress circle

Usage

import CircularProgress from 'circular-progress';

<CircularProgress
  size={200}
  strokeWidth={10}
  text="50%"
  progressPercent={50}
  authenticated
  iconName="check"
  mainText="Complete"
  textVariant="heading2"
  textColor="#000"
  iconColor="#000"
  bgColor="#ddd"
  pgColor="#00f"
/>

Props

Prop name	Type	Description
size	number	The size of the progress circle.
strokeWidth	number	The width of the progress circle's stroke.
text	string	The text to be displayed in the center of the progress circle.
innerStrokeWidth	number	The width of the inner stroke of the progress circle.
progressPercent	number	The percentage of the progress circle to be displayed.
authenticated	boolean	Whether or not the progress is authenticated.
iconName	string	The name of the icon to be displayed in the center of the circle.
mainText	string	The main text to be displayed in the center of the circle.
textVariant	string	The variant of the text to be displayed in the center of the circle.
textColor	string	The color of the text to be displayed in the center of the circle.
iconColor	string	The color of the icon to be displayed in the center of the circle.
bgColor	string	The color of the background circle.
pgColor	string	The color of the progress circle.