![license]()

Progress Circle React Native

!Progress Circles React Native

This package was created to fix the dependency issues on the original package here

Features

- Custom colors
- Custom size and border radius
- Light-weight: No other dependencies besides react-native

Installation

yarn add progress-circle-react-native

or

npm install --save progress-circle-react-native

Usage

``javascript
import ProgressCircle from 'progress-circle-react-native'

render() {
return (
percent={30}
radius={50}
borderWidth={8}
color="#3399FF"
shadowColor="#999"
bgColor="#fff"
>
{'30%'}

)
}
`

Props

| Name | Description | Type | Required | Default Value |
| :--------------- | :-------------------------------------------------------------------------- | :----- | :------: | :------------------------------------------------------------------: |
| percent | The percentage used for displaying the progress | Number | ✓ | |
| radius | The radius in px of the component (including border) | Number | ✓ | |
| borderWidth | The border width in px | Number | ✓ | |
| color | The border color | String | | !#f00 '#f00' |
| shadowColor | The background color of the border | String | | !#999 '#999' |
| bgColor | The inner background color of the component | String | | !#e9e9ef '#e9e9ef' |
| children | The children to render inside this component | Node | | null |
| containerStyle | The custom styling which will be applied to the container of the children | Style | | null |
| outerCircleStyle | The custom styling which will be applied to the outer circle | Style | | null` |

Author

Boma Amakiri

License

MIT