React-Native-CircularProgress
A pure React Native Component for circular progress bars for iOS.
Demo
Installation
- Install library
npm i --save react-native-progress-circular - Include in your project
var CircularProgressDisplay = require('react-native-progress-circular');
Issues
As of react-native 0.17:
      Due to react-native not yet supporting individual corner radius properties on android, support is lacking.
Basic Usage
'use strict'; var React = require('react-native'); var CircularProgressDisplay = require('react-native-progress-circular'); var {View, Text} = React; module.exports = React.createClass({ getInitialState(){ return { progress:0}; }, componentDidMount(){ // automatically increment the progress var time = 150; var count = 0; setInterval(() => { if (++count < 15){ return; } var progress = this.state.progress + Math.round((Math.random() * 4)); if (progress >100) { progress = 0; count = 0; } this.setState({progress: progress}); }, time); }, render() { var progress = this.state.progress; // displayed inside of the component var innerDisplay = ( <View style={{width: 200, height: 200, flex:1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#036282'}}> <Text style={{fontSize: 30}}>{progress + "%"}</Text> </View> ); return (<View style={{backgroundColor: 'orange',flex:1, flexDirection: 'row'}}> <View style={{ flex: 1, top:200, left: 20}}> <CircularProgressDisplay.Hollow size={200} progressBarWidth={20} outlineWidth={0} outlineColor={'black'} backgroundColor={'orange'} progressBarColor={'#02BAF7'} innerComponent={innerDisplay} rotate={((progress/100)*360)}/> </View> </View>); } });Hollow Progress Bar Props
size(Number:ReactComponent) - The size of the component. The resulting components height and width are equalprogressBarWidth(Integer) - The width of the circular progress bar.progressBarColor(String) - The color of the progress bar.backgroundColor(String) - The color of the center of the component and the zero progress area.outlineWidth(Integer) - If this prop is present, the resulting component has a round border of this width.outlineColor(String) - The color of the border outlining the component.rotate(Integer) - The current progress to track specified in degrees. E.G. 270. Can take a value between 0 and 360, inclusive.innerComponent(ReactComponent) - A component to display inside of the round hollow progress bar. Can be used display an inner progress bar, or track the current progress with a<Text>component.
Filled Progress Bar Props
size(Number:ReactComponent) - The size of the component. The resulting components height and width are equalrotate(Integer) - The current progress to track specified in degrees. E.G. 270. Can take a value between 0 and 360, inclusive.backgroundColor(String) - The color of the center of the component and the zero progress area. This is the color of the component when no progress has been made.progressBarColor(String) - The color of the progress bar. This is the color when progress has been made.
MIT Licensed
