https://github.com/kartikeyvaish/react-native-circular-progress

Circular Progress for React Native apps.
https://github.com/kartikeyvaish/react-native-circular-progress

circular-progress-bar expo progress-bar reactnative

Last synced: about 1 year ago
JSON representation

Circular Progress for React Native apps.

• Host: GitHub
• URL: https://github.com/kartikeyvaish/react-native-circular-progress
• Owner: kartikeyvaish
• License: mit
• Created: 2022-03-24T12:21:32.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-03-24T18:56:35.000Z (about 4 years ago)
• Last Synced: 2025-04-12T11:16:29.145Z (about 1 year ago)
• Topics: circular-progress-bar, expo, progress-bar, reactnative
• Language: TypeScript
• Homepage:
• Size: 287 KB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# React Native Circular Progress

This is a simple example of a circular progress bar.

You can use it in both React Native CLI apps as well as in Expo apps.

I've not yet published it on NPM. You can use the [`CircularProgress.tsx`](https://github.com/kartikeyvaish/react-native-circular-progress/blob/main/CircularProgress.tsx) file in the repo locally.

Expo Snack [Link](https://snack.expo.dev/@kartikeyvaish/react-native-circular-progress) to play around

## App Previews

![React Native Circular Progress Preview](./assets/images/App_Preview_1.png)

## Usage

1. Simple progress component with default values.

```typescript

```

2. You can change colors of the progress

```typescript

```

3. You can show or remove the percentage label

```typescript

```

4. Change stroke width of progress bar

```typescript

```

## Parameters

| Parameter           | required | Default       | Description                                         |

| ------------------- | -------- | ------------- | --------------------------------------------------- |

| progress            | YES      | 0             | progress value should be a number between 0 and 100 |

| size                | NO       | 80            | size of the progress component                      |

| showLabel           | NO       | true          | show or hide the percentage label                   |

| strokeWidth         | NO       | 5% of `size`  | stroke width of the progress bar                    |

| outerCircleColor    | NO       | white         | color of the outer circle                           |

| progressCircleColor | NO       | dodgerblue    | color of the progress circle                        |

| labelColor          | NO       | white         | color of the percentage label                       |

| labelStyle          | NO       |               | style of the percentage label                       |

| labelSize           | NO       | 20% of `size` | size of the percentage label                        |