https://github.com/opengeekslab/react-native-circular-progress
https://github.com/opengeekslab/react-native-circular-progress
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/opengeekslab/react-native-circular-progress
- Owner: openGeeksLab
- License: mit
- Created: 2017-08-18T07:45:21.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-18T07:51:41.000Z (almost 9 years ago)
- Last Synced: 2025-01-09T17:55:05.139Z (over 1 year ago)
- Language: JavaScript
- Size: 116 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-circular-progress
React Native component for creating animated, circular progress with ReactART. Useful for displaying users points for example.
## Example app
## Installation
1. Install library `npm i --save react-native-circular-progress`
2. Link ART library to your ReactNative project ([how to link a library?](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#content)). You'll find ReactART library in `node_modules/react-native/Libraries/ART/ART.xcodeproj`
## Usage
Import CircularProgress or AnimatedCircularProgress.
```js
import { AnimatedCircularProgress } from 'react-native-circular-progress';
```
Use as follows:
```jsx
```
You can also define a function, that'll receive current progress and for example display it inside the circle:
```jsx
{
(fill) => (
{ this.state.fill }
)
}
```
Finally, you can manually trigger a duration-based timing animation by putting a ref on the component and calling the `performLinearAnimation(toValue, duration)` function like so:
```jsx
```
```javascript
this.refs.circularProgress.performLinearAnimation(100, 8000); // Will fill the progress bar linearly in 8 seconds
```
## Configuration
You can configure the passing by following props:
- **size** – width and height of the circle
- **width** - thickness of the line
- **fill** - current, percentage fill (from 0 to 100)
- **prefill** - percentage fill before the animation (from 0 to 100)
- **tintColor** - color of a progress line
- **backgroundColor** - color of a background for progress line
- **rotation** - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360
- **tension** - the tension value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api))
- **friction** - the friction value for the spring animation (see [here](https://facebook.github.io/react-native/docs/animations.html#core-api))
- **linecap** - the shape to be used at the ends of the circle. Possible values: butt (default), round or square. (see [here](https://developer.mozilla.org/en/docs/Web/SVG/Attribute/stroke-linecap))
- **children(fill)** - you can pass function as a child to receive current fill
## Working example app
You can find working example in the `example` directory of this repository. You can run it by:
```sh
git clone https://github.com/bgryszko/react-native-circular-progress.git
cd react-native-circular-progress/example/ProgressChart
npm install
open ios/ProgressChart.xcodeproj
```
XCode will open. Click Run button and that's it.
## 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.