# react-native-circular-progressdial

> React Native component for creating animated, circular progress with react-native-svg

Latest version **1.0.0** (published 2019-02-21) · 0 weekly downloads

## Install

```sh
npm install react-native-circular-progressdial
pnpm add react-native-circular-progressdial
yarn add react-native-circular-progressdial
bun add react-native-circular-progressdial
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-02-21 |
| First published | 2019-02-21 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 363.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Shohail Ahmed |
| Maintainers | suhailh36 |
| Keywords | react, react-native, react-component, progress, chart, react-svg |

## Links

- npm: https://www.npmjs.com/package/react-native-circular-progressdial
- npm.io page: https://npm.io/package/react-native-circular-progressdial

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2019-02-21

## README

React Native component for creating animated, circular progress. Useful for displaying users points for example. **Works on iOS & Android.**


## Installation

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

    `npm i --save react-native-circular-progress-dial react-native-svg`

2. Link native code for SVG:

`react-native link react-native-svg`

## Usage

Import CircularProgress or AnimatedCircularProgress:

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

Use as follows:

```jsx
<AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  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:

```jsx
<AnimatedCircularProgress
  size={200}
  width={3}
  fill={this.state.fill}
  tintColor="#00e0ff"
  backgroundColor="#3d5875">
  {
    (fill) => (
      <Text style={styles.points}>
        { this.state.fill }
      </Text>
    )
  }
</AnimatedCircularProgress>
```

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
<AnimatedCircularProgress
  ref={(ref) => this.circularProgress = ref}
  ...
/>
```

```javascript
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 passing by following props:

- **size** – width and height of the circle - could be `number` or `object` if you use `Aniamted.Value()`
- **width** - thickness of the lines
- **backgroundWidth** - thickness of the background line
- **fill** - current, percentage fill (from 0 to 100)
- **prefill** - percentage fill before the animation (from 0 to 100)
- **tintColor** - color of the progress line
- **backgroundColor** - color of the background for the progress line. If unspecified, no background will be rendered
- **rotation** - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360
- **duration** - duration of the animation in milliseconds. Default is 500ms
- **easing** - animation easing function
- **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))
- **arcSweepAngle** - the angle that you want your arc to sweep in the case where you don't want a full circle. Default is 360.
- **children(fill)** - you can pass function as a child to receive current fill
- **onAnimationComplete** - you can pass a callback function that will be invoked when animation completes. (see [here](https://facebook.github.io/react-native/docs/animated.html#working-with-animations))
- **reAnimate(prefill, toVal, dur, ease)** - Run the animation again

---
_Source: https://npm.io/package/react-native-circular-progressdial · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._