React Native Progress Circle2

:white_check_mark: Fixed the following error for latest RN version

:x: Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from deprecated-react-native-prop-types

Features

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

Installation

yarn add react-native-progress-circle2

npm install --save react-native-progress-circle2

Usage

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

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

 of the component (including border) | Number | ✓ |  |
| borderWidth | The border width in

 | 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` |

Implementation Details

React Native Progress Circle

License

MIT

Usage

javascript
import ProgressCircle from 'react-native-progress-circle2'

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

Props

|
| containerStyle | The custom styling which will be applied to the container of the

| Style | |