React Native Progress Circle
Features
- Custom colors
- Custom size and border radius
- Light-weight: No other dependencies besides
react-native
Installation
yarn add react-native-progress-circle
or
npm install --save react-native-progress-circle
Usage
{ return <ProgressCircle percent=30 radius=50 borderWidth=8 color="#3399FF" shadowColor="#999" bgColor="#fff" > <Text style= fontSize: 18 >'30%'</Text> </ProgressCircle> }
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' |
|
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 |
Author
Implementation Details
License
MIT