Infinite progress method of using included

ProgressBar.js

@@ -25,13 +25,16 @@ var ProgressBar = React.createClass({
     return {
       style: styles,
       easing: Easing.inOut(Easing.ease),
-      easingDuration: 500
+      easingDuration: 850,
+      updateInterval: 1000,
+      updateRatio: .15
     };
   },
 
   getInitialState() {
     return {
-      progress: new Animated.Value(this.props.initialProgress || 0)
+      progress: new Animated.Value(this.props.initialProgress || 0),
+      calculatedWidth: 0
     };
   },
 
@@ -41,25 +44,56 @@ var ProgressBar = React.createClass({
     }
   },
 
+  componentWillUnmount(){
+    this.clearIntt();
+  },
+  clearIntt(){
+    if(this._interval) clearInterval(this._interval);
+  },
+  start() {
+    this.clearIntt();
+    this._interval = setInterval((()=>{
+      console.log('PROG BAR: ' + JSON.stringify(this.state));
+      var val = JSON.stringify(this.state.progress)*1;
+      console.log('PROG BAR IS: ' + val);
+      var to = val + ((1-val)*this.props.updateRatio);
+      if(to>.99)
+        to = .99;
+      console.log('UPDATE PROG BAR TO: ' + to);
+      this.update(to);
+    }).bind(this),this.props.updateInterval)
+  },
+
+  end() {
+    this.clearIntt();
+    this.update(1);    
+  },
+
   render() {
 
     var fillWidth = this.state.progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [0 * this.props.style.width, 1 * this.props.style.width],
+      outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ),
+          1 * (this.props.style.width || this.state.calculatedWidth)]
     });
 
     return (
-      <View style={[styles.background, this.props.backgroundStyle, this.props.style]}>
+      <View style={[styles.background, this.props.backgroundStyle, this.props.style]}
+            onLayout={(event) => {
+               if (!this.props.style.width) {
+                    this.setState({calculatedWidth: event.nativeEvent.layout.width})
+                    }
+                }}>
         <Animated.View style={[styles.fill, this.props.fillStyle, { width: fillWidth }]}/>
       </View>
     );
   },
 
-  update() {
+  update(prog) {
     Animated.timing(this.state.progress, {
       easing: this.props.easing,
       duration: this.props.easingDuration,
-      toValue: this.props.progress
+      toValue: prog ? prog  : this.props.progress
     }).start();
   }
 });

README.md

@@ -80,6 +80,55 @@ AppRegistry.registerComponent('rnsandbox', () => rnsandbox);
 
 ```
 
+## Infinite progress usage example
+
+```javascript
+var React = require('react-native');
+var {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Button
+} = React;
+var ProgressBar = require('react-native-progress-bar');
+
+var rnsandbox = React.createClass({
+
+  render() {
+
+    return (
+      <View style={styles.container}>
+       <Button
+          onPress={()=>{this.progbar.start()}}
+          title="Start Progress Bar"/>
+        <Button style={{margin:20}}
+          onPress={()=>{this.progbar.end()}}
+          title="Done!"/>
+        <ProgressBar
+          fillStyle={{}}
+          backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
+          style={{marginTop: 10, width: 300}}
+          ref={(p)=>{this.progbar = p}}
+        />
+      </View>
+    );
+  }
+});
+
+var styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  }
+});
+
+AppRegistry.registerComponent('rnsandbox', () => rnsandbox);
+
+```
+
 ## Properties
 
 | Prop | Description | Default |
@@ -90,9 +139,13 @@ AppRegistry.registerComponent('rnsandbox', () => rnsandbox);
 |**`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)|
+|**`updateInterval`**|The interval in milliseconds to update the animation when using method **`start()`**.|`1000`|
+|**`updateRatio`**|The ratio (of the remaining value) to periodically update the progressbar value when using method **`start()`**. It increases by `15%` periodically by default|`.15`|
 
 
 ## 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 `<ProgressBar>` and call `this.refs.progressBarName.update(0.3)` |
+| **`start()`** | To start the progressbar in infinite method. It updates every `updateInterval` (default: 1000) milliseconds some amount in percentage (set on prop `updateRatio`), so that it never actually finishes. Nice for when you don't know how much time it's going to take. It locks on `.99` so it never ends. When you want to finish it call `end()` and it sets itself to `1` |
+| **`end()`** | Sets value to `1` and clears interval |