react-native-progress-circle-gradient

An animated progress circle with an angular gradient. 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 to also be installed, linked and configured for your project.

This project is inspired by this YouTube tutorial.

Installation

npm install react-native-progress-circle-gradient

or

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 | 1250 | | | 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

import { CircularProgress } from 'react-native-progress-circle-gradient';

// ...

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={100}
  strokeWidth={20}
  percentageComplete={percentageComplete}
  colors={['#0000FF', '#00FF00']}
/>;

import { CircularProgress } from 'react-native-progress-circle-gradient';

// ...

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={128}
  strokeWidth={20}
  percentageComplete={progress}
  colors={['#0000FF', '#00FF00']}
  duration={3000}
  onAnimationFinish={() => {
    Alert.alert('Animation has finished!');
  }}
/>;

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={100}
  strokeWidth={20}
  percentageComplete={percentageComplete}
  colors={['#0000FF', '#00FF00', '#FF0000']}
/>

<CircularProgress
  backgroundColor={'#1F1B24'}
  radius={100}
  strokeWidth={20}
  percentageComplete={percentageComplete}
  colors={['#0000FF', '#00FF00', '#0000FF']}
  rotation={270}
/>

Roadmap

• Add support for text once default system fonts become available in this PR
• Add support for children components

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library