@edvnz/circular-progress v1.0.0

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