![Twitter Follow](https://camo.githubusercontent.com/ce8960fe9ad3043d86ac66252b831d6b831afa34198d5de4ecb395ea779dc578/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f636d696368656c696f2e7376673f7374796c653d736f6369616c266c6162656c3d466f6c6c6f77)
React Native Progress Circle
![React Native Progress Circles React Native Progress Circles](https://github.com/README/featured.png?raw=true)
- Custom colors
- Custom size and border radius
- Light-weight: No other dependencies besides
react-native
yarn add react-native-progress-circle
or
npm install --save react-native-progress-circle
import ProgressCircle from 'react-native-progress-circle'
render() {
return (
<ProgressCircle
percent={30}
radius={50}
borderWidth={8}
color="#3399FF"
shadowColor="#999"
bgColor="#fff"
>
<Text style={{ fontSize: 18 }}>{'30%'}</Text>
</ProgressCircle>
)
}
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' |
shadowColor |
The background color of the border |
String |
|
'#999' |
bgColor |
The inner background color of the component |
String |
|
'#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 |
Christoph Michel
React Native Progress Circle
MIT