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: about 1 month 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 (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-07-19T06:07:54.000Z (about 6 years ago)
• Last Synced: 2024-08-08T08:45:25.299Z (about 2 months ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 237
• Watchers: 7
• Forks: 76
• 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.

![](https://i.imgur.com/EGufppz.gif)

## 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)` |