https://github.com/derekrsargent/react-native-progress-circle-gradient
An animated circular progress chart using an angular gradient
https://github.com/derekrsargent/react-native-progress-circle-gradient
angular circle gradient progress react-native
Last synced: 12 months ago
JSON representation
An animated circular progress chart using an angular gradient
- Host: GitHub
- URL: https://github.com/derekrsargent/react-native-progress-circle-gradient
- Owner: derekrsargent
- License: mit
- Created: 2023-05-23T22:25:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-28T20:18:27.000Z (almost 3 years ago)
- Last Synced: 2025-04-15T15:09:26.040Z (12 months ago)
- Topics: angular, circle, gradient, progress, react-native
- Language: TypeScript
- Homepage:
- Size: 11.7 MB
- Stars: 13
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-progress-circle-gradient
[]()
[](https://www.npmjs.com/package/react-native-progress-circle-gradient)
[](https://www.npmjs.com/package/react-native-progress-circle-gradient)
An animated progress circle with an angular gradient using _react-native-skia_. The **differentiator** between this package and other React Native animated circular progress charts with a gradient is that the start color can be different than the stop color.
This package has only 2 dependencies (_@shopify/react-native-skia_ and _color-interpolate_). It has 0 peer dependencies and so does **not** require _react-native-reanimated_ or _react-native-svg_ to also be installed, linked or configured for your project.
This project is inspired by this [YouTube](https://www.youtube.com/watch?v=7SCzL-XnfUU) tutorial.
## Installation
```sh
npm install react-native-progress-circle-gradient
```
or
```sh
yarn add react-native-progress-circle-gradient
```
## Props
| Prop | Description | Type | Default | Required |
| ------------------ | ------------------------------------------------------------------------------------ | -------- | --------- | -------- |
| colors | The color hex values array to be used for the angular gradient | String[] | N/A | ✓ |
| backgroundColor | The color hex value for the remaining progress | String | '#F0F8FF' | |
| duration | The duration of the animation in milliseconds | Number | 1250 | |
| easing | The easing options for the animation: 'cubic', 'ease', 'linear', 'quad' | String | 'cubic' | |
| granularity | Smaller progress circle charts can use a smaller granularity to increase performance | Number | 200 | |
| onAnimationFinish | Callback for when animation reaches 100% | Function | N/A | |
| percentageComplete | The percentage of progress completed ranging from 0-100 | Number | 0 | |
| radius | The radius of the progress circle in points, measured from the center of the stroke | Number | 100 | |
| rotation | The rotation of the progress circle in degrees | Number | 0 | |
| strokeWidth | The thickness of the progress circle | Number | 30 | |
## Usage
```js
import { CircularProgress } from 'react-native-progress-circle-gradient';
// ...
;
```
```js
import { CircularProgress } from 'react-native-progress-circle-gradient';
// ...
{
Alert.alert('Animation has finished!');
}}
/>;
```
```js
```
```js
```
## Roadmap
- Add functions for animation pause, play and reset
- Add support for text once default system fonts become available in [this PR](https://github.com/Shopify/react-native-skia/issues/1249)
- Add support for children components
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)