From 07ff0ea104dd4ed51b64f23cad00ce10fb6b6927 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Mon, 2 Jan 2017 23:27:46 -0800
Subject: [PATCH] Use setNativeProps to update ProgressBar

---
 src/components/ProgressBar/index.js | 31 ++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/ProgressBar/index.js b/src/components/ProgressBar/index.js
index d1478588..d45b95d5 100644
--- a/src/components/ProgressBar/index.js
+++ b/src/components/ProgressBar/index.js
@@ -22,6 +22,14 @@ class ProgressBar extends Component {
     trackColor: 'transparent'
   };
 
+  componentDidMount() {
+    this._updateProgressWidth();
+  }
+
+  componentDidUpdate() {
+    this._updateProgressWidth();
+  }
+
   render() {
     const {
       color,
@@ -32,7 +40,7 @@ class ProgressBar extends Component {
       ...other
     } = this.props;
 
-    const percentageProgress = indeterminate ? 50 : progress * 100;
+    const percentageProgress = progress * 100;
 
     return (
       <View {...other}
@@ -47,15 +55,29 @@ class ProgressBar extends Component {
         ]}
       >
         <View
+          ref={this._setProgressRef}
           style={[
             styles.progress,
-            indeterminate ? styles.indeterminate : { width: `${percentageProgress}%` },
+            indeterminate && styles.animation,
             { backgroundColor: color }
           ]}
         />
       </View>
     );
   }
+
+  _setProgressRef = (component) => {
+    this._progressRef = component;
+  }
+
+  _updateProgressWidth = () => {
+    const { indeterminate, progress } = this.props;
+    const percentageProgress = indeterminate ? 50 : progress * 100;
+    const width = indeterminate ? '25%' : `${percentageProgress}%`;
+    this._progressRef.setNativeProps({
+      style: { width }
+    });
+  }
 }
 
 const styles = StyleSheet.create({
@@ -67,12 +89,11 @@ const styles = StyleSheet.create({
   progress: {
     height: '100%'
   },
-  indeterminate: {
+  animation: {
     animationDuration: '1s',
     animationName: 'rn-ProgressBar-animation',
     animationTimingFunction: 'linear',
-    animationIterationCount: 'infinite',
-    width: '25%'
+    animationIterationCount: 'infinite'
   }
 });