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

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>
    )
}

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

Christoph Michel

Implementation Details

React Native Progress Circle

License

MIT