https://github.com/lwansbrough/react-native-progress-bar
An animated progress bar for React Native
https://github.com/lwansbrough/react-native-progress-bar
Last synced: 11 days ago
JSON representation
An animated progress bar for React Native
- Host: GitHub
- URL: https://github.com/lwansbrough/react-native-progress-bar
- Owner: lwansbrough
- License: mit
- Created: 2015-04-25T00:56:45.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-07-19T06:07:54.000Z (over 6 years ago)
- Last Synced: 2025-03-29T13:09:13.319Z (18 days ago)
- Language: JavaScript
- Size: 13.7 KB
- Stars: 237
- Watchers: 6
- Forks: 72
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-progress-bar ★218 - An animated progress bar component for React Native (Components / UI)
- awesome-reactnative-ui - react-native-progress-bar
- awesome-react-native - react-native-progress-bar ★218 - An animated progress bar component for React Native (Components / UI)
- awesome-react-native - react-native-progress-bar ★218 - An animated progress bar component for React Native (Components / UI)
- awesome-reactnative-ui - react-native-progress-bar
- awesome-react-native - react-native-progress-bar ★218 - An animated progress bar component for React Native (Components / UI)
- awesome-react-native-ui - react-native-progress-bar ★134 - An animated progress bar component for React Native (Components / UI)
README
# react-native-progress-bar
An animated progress bar for React Native.
## Getting started
1. `npm install react-native-progress-bar@latest --save`
## Example usage
```javascript
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var ProgressBar = require('react-native-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
);
}
});
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);
```
## Properties
| 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`](https://github.com/facebook/react-native/blob/master/Libraries/Animation/Animated/Easing.js).|`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`](https://github.com/lwansbrough/react-native-progress-bar/blob/master/ProgressBar.js)|
## Component methods
| Method | Description |
|---|---|
| **`update(progress)`** | The recommended way to update the progress of the progress bar is to use the `progress` 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)` |