Skip to content
A light-weight progress circle indicator for React Native.
JavaScript
Branch: master
Clone or download
Latest commit 5184172 Oct 24, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README Initial Release May 13, 2017
src Fix cWRP deprecation warning by not using state Oct 24, 2019
.eslintrc Initial Release May 13, 2017
.gitignore Initial Release May 13, 2017
.npmignore Bump version to 1.0.1. Update Git-Url. Update npmignore May 13, 2017
LICENSE Initial commit May 13, 2017
README.md Allow outer circle styling May 7, 2018
package.json 2.1.0 Oct 24, 2019
yarn.lock Initial Release May 13, 2017

README.md

license Version npm Twitter Follow

React Native Progress Circle

React Native Progress Circles

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 '#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

Christoph Michel

Implementation Details

React Native Progress Circle

License

MIT

You can’t perform that action at this time.