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

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