Skip to content

Commit

Permalink
onFillChange info added
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigithanyucedag
yigithanyucedag committed Aug 27, 2020
1 parent 77961b8 commit b314107
Showing 1 changed file with 51 additions and 49 deletions.
100 changes: 51 additions & 49 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
[![Version](https://img.shields.io/npm/v/react-native-circular-progress.svg)](https://www.npmjs.com/package/react-native-circular-progress)
[![npm](https://img.shields.io/npm/dt/react-native-circular-progress.svg)](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
Expand All @@ -14,25 +15,23 @@ React Native component for creating animated, circular progress. Useful for disp

1. Install this component and `react-native-svg`:

`npm i --save react-native-circular-progress 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`
`react-native link react-native-svg`

## Usage

```js
import { AnimatedCircularProgress } from "react-native-circular-progress";
import { AnimatedCircularProgress } from 'react-native-circular-progress';

<AnimatedCircularProgress
size={120}
width={15}
fill={100}
tintColor="#00e0ff"
onAnimationComplete={() => console.log("onAnimationComplete")}
backgroundColor="#3d5875"
/>;
onAnimationComplete={() => console.log('onAnimationComplete')}
backgroundColor="#3d5875" />
```

You can also define a function that'll receive current progress and for example display it inside the circle:
Expand All @@ -43,9 +42,14 @@ You can also define a function that'll receive current progress and for example
width={3}
fill={this.state.fill}
tintColor="#00e0ff"
backgroundColor="#3d5875"
>
{(fill) => <Text>{this.state.fill}</Text>}
backgroundColor="#3d5875">
{
(fill) => (
<Text>
{ this.state.fill }
</Text>
)
}
</AnimatedCircularProgress>
```

Expand All @@ -59,10 +63,8 @@ You can also define a function that'll receive the location at the top of the pr
tintColor="#00e0ff"
backgroundColor="#3d5875"
padding={10}
renderCap={({ center }) => (
<Circle cx={center.x} cy={center.y} r="10" fill="blue" />
)}
/>
renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
/>
```

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:
Expand All @@ -84,43 +86,43 @@ The `animate`-function returns the timing animation so you can chain, run in par

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 |
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 |
| 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 fill amount on every change |
| tintColorSecondary | string | the same as tintColor | To change fill color from tintColor to tintColorSecondary as animation progresses |
Name | Type | Default value | Description
--------------------|------------------------|-------------------------|--------------
prefill | number (0-100) | 0 | Initial fill-value before animation starts
duration | number | 500 | Duration 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 |
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)

Expand All @@ -133,10 +135,10 @@ yarn start

## Authors

- Bartosz Gryszko (b@gryszko.com)
- Markus Lindqvist
- Jacob Lauritzen
- Special thanks to all contributors!
* Bartosz Gryszko (b@gryszko.com)
* Markus Lindqvist
* Jacob Lauritzen
* Special thanks to all contributors!

## License

Expand Down

0 comments on commit b314107

Please sign in to comment.