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

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']}
  easing={'quad'}
  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 functions for animation pause, play and reset
• 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