Animated React Native progress bar component
npm install react-native-simple-progress-barAnimated React Native progress bar.
1. yarn add react-native-simple-progress-bar
``javascript
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var ProgressBar = require('react-native-simple-progress-bar');
var rnsandbox = React.createClass({
getInitialState() {
return {
progress: 0
};
},
render() {
setTimeout((function() {
this.setState({ progress: this.state.progress + (0.4 * Math.random())});
}).bind(this), 1000);
return (
Welcome to React Native!
To get started, edit index.ios.js
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
style={{marginTop: 10, width: 300}}
progress={this.state.progress}
/>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('rnsandbox', () => rnsandbox);
`
| Prop | Description | Default |
|---|---|---|
|progress|The progress value for the progress bar. Ranges from 0..1.|None|easingDuration
||The time taken to complete the animation in milliseconds.|500|easing
||Function from Easing.|Easing.inOut(Easing.ease)|fillStyle
||The style for the progress bar fill.|None|backgroundStyle
||The style for the progress bar's background.|None|style
||The style for the entire component. This doesn't really differ from the backgroundStyle property. You must set width either here or in backgroundStyle in order to make sure the component works properly.|See ProgressBar.js|
property. If you prefer, you can use this update method to update the progress directly. To access this method, set the ref property on the and call this.refs.progressBarName.update(0.3)` |