Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bartgryszko/react-native-circular-progress
React Native component for creating animated, circular progress with ReactART
https://github.com/bartgryszko/react-native-circular-progress
animation circle fill progress react-native
Last synced: 2 months ago
JSON representation
React Native component for creating animated, circular progress with ReactART
- Host: GitHub
- URL: https://github.com/bartgryszko/react-native-circular-progress
- Owner: bartgryszko
- License: mit
- Created: 2015-10-27T15:09:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T06:05:51.000Z (2 months ago)
- Last Synced: 2024-04-23T10:42:42.984Z (2 months ago)
- Topics: animation, circle, fill, progress, react-native
- Language: JavaScript
- Size: 6.06 MB
- Stars: 2,090
- Watchers: 22
- Forks: 420
- Open Issues: 68
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-react-native - react-native-circular-progress ★1088 - React Native component for creating animated, circular progress with ReactART (Components / UI)
- awesome-ui-component-library - React Native Circular Progress - native-circular-progress.svg?label=&style=social)](https://github.com/bartgryszko/react-native-circular-progress) - React Native component for creating animated, circular progress with ReactART (React Native / Special use case libraries)
- awesome-ui-components - React Native Circular Progress - native-circular-progress.svg?label=&style=social)](https://github.com/bartgryszko/react-native-circular-progress) - React Native component for creating animated, circular progress with ReactART (React Native / Special use case libraries)
README
# react-native-circular-progress
[]()
[](https://www.npmjs.com/package/react-native-circular-progress)
[](https://www.npmjs.com/package/react-native-circular-progress)
React Native component for creating animated, circular progress. Useful for displaying users points for example.
## Example app
## Installation
1. Install this component and `react-native-svg`:
`npm i --save react-native-circular-progress react-native-svg`
2. Link native code for SVG:
`react-native link react-native-svg`
## Usage
```js
import { AnimatedCircularProgress } from 'react-native-circular-progress';
console.log('onAnimationComplete')}
backgroundColor="#3d5875" />
```
You can also define a function that'll receive current progress and for example display it inside the circle:
```jsx
{
(fill) => (
{ this.state.fill }
)
}
```
You can also define a function that'll receive the location at the top of the progress circle and render a custom SVG element:
```jsx
}
/>
```
Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the `animate(toValue, duration, easing)` function like so:
```jsx
this.circularProgress = ref}
...
/>
```
```js
this.circularProgress.animate(100, 8000, Easing.quad); // Will fill the progress bar linearly in 8 seconds
```
The `animate`-function returns the timing animation so you can chain, run in parallel etc.
## Configuration
You can configure the CircularProgress-component by passing the following props:
Name | Type | Default value | Description
----------------------|------------------------|-------------------------|--------------
size | number\|Animated.Value | **required** | Width and height of circle
width | number | **required** | Thickness of the progress line
backgroundWidth | number | width | Thickness of background circle
fill | number (0-100) | 0 | Current progress / fill
tintColor | string | black | Color of the progress line
tintTransparency | boolean | true | Transparency of the progress line
backgroundColor | string | | If unspecified, no background line will be rendered
rotation | number (-360 - 360) | 90 | Angle from which the progress starts from
lineCap | string | butt | Shape used at ends of progress line. Possible values: butt, round, square
arcSweepAngle | number (0-360) | 360 | If you don't want a full circle, specify the arc angle
style | ViewPropTypes.style | | Extra styling for the main container
children | function | | Pass a function as a child. It received the current fill-value as an argument
childrenContainerStyle| ViewPropTypes.style | | Extra styling for the children container
padding | number | 0 | Padding applied around the circle to allow for a cap that bleeds outside its boundary
dashedBackground | object | { width: 0, gap: 0 } | Bar background as dashed type
dashedTint | object | { width: 0, gap: 0 } | Bar tint as dashed type
renderCap | function | undefined | Function that's invoked during rendering to draw at the tip of the progress circle
The following props can further be used on `AnimatedCircularProgress`:
Name | Type | Default value | Description
--------------------|------------------------|-------------------------|--------------
prefill | number (0-100) | 0 | Initial fill-value before animation starts
duration | number | 500 | Duration of animation in ms
delay | number | 0 | Delay of animation in ms
easing | function | Easing.out(Easing.ease) | Animation easing function
onAnimationComplete | function | | Function that's invoked when the animation completes (both on mount and if called with `.animate()`)
onFillChange | function | | Function that returns current progress on every change
tintColorSecondary | string | the same as tintColor | To change fill color from tintColor to tintColorSecondary as animation progresses
`AnimatedCircularProgress` also exposes the following functions:
Name | Arguments | Description
------------|----------- |----------------
animate | (toVal: number, duration: number, ease: function) | Animate the progress bar to a specific value
reAnimate | (prefill: number, toVal: number, duration: number, ease: function) | Re-run animation with a specified prefill-value
## Running example app (Expo)
```sh
git clone https://github.com/bgryszko/react-native-circular-progress.git
cd react-native-circular-progress/example-app
yarn
yarn start
```
## Authors
* Bartosz Gryszko ([email protected])
* Markus Lindqvist
* Jacob Lauritzen
* Special thanks to all contributors!
## License
MIT
## Special thanks
Special thanks to [Chalk+Chisel](http://chalkchisel.com) for creating working environment where people grow. This component was created for one of the projects we're working on.