From 65e16992810b8a2672125d758ee02d864a8cc966 Mon Sep 17 00:00:00 2001
From: yasemincidem <yasemincidem@gmail.com>
Date: Wed, 16 Nov 2016 11:26:47 +0300
Subject: [PATCH 1/2] Flexbox used instead of fixed width so progressbar will
 be flexible.

---
 ProgressBar.js | 96 +++++++++++++++++++++++++++-----------------------
 1 file changed, 51 insertions(+), 45 deletions(-)

diff --git a/ProgressBar.js b/ProgressBar.js
index a21e79e..c760fb0 100644
--- a/ProgressBar.js
+++ b/ProgressBar.js
@@ -8,60 +8,66 @@ import {
 } from 'react-native';
 
 var styles = StyleSheet.create({
-  background: {
-    backgroundColor: '#bbbbbb',
-    height: 5,
-    overflow: 'hidden'
-  },
-  fill: {
-    backgroundColor: '#3b5998',
-    height: 5
-  }
+    background: {
+        backgroundColor: '#bbbbbb',
+        height: 5,
+        overflow: 'hidden'
+    },
+    fill: {
+        backgroundColor: '#3b5998',
+        height: 5
+    }
 });
 
 var ProgressBar = React.createClass({
 
-  getDefaultProps() {
-    return {
-      style: styles,
-      easing: Easing.inOut(Easing.ease),
-      easingDuration: 500
-    };
-  },
-
-  getInitialState() {
-    return {
-      progress: new Animated.Value(this.props.initialProgress || 0)
-    };
-  },
+    getDefaultProps() {
+        return {
+            style: styles,
+            easing: Easing.inOut(Easing.ease),
+            easingDuration: 500
+        };
+    },
 
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
-      this.update();
-    }
-  },
+    getInitialState() {
+        return {
+            progress: new Animated.Value(this.props.initialProgress || 0),
+            calculatedWidth: 0
+        };
+    },
 
-  render() {
+    componentDidUpdate(prevProps, prevState) {
+        if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
+            this.update();
+        }
+    },
 
-    var fillWidth = this.state.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0 * this.props.style.width, 1 * this.props.style.width],
-    });
+    render() {
+        var fillWidth = this.state.progress.interpolate({
+            inputRange: [0, 1],
+            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]}>
-        <Animated.View style={[styles.fill, this.props.fillStyle, { width: fillWidth }]}/>
-      </View>
-    );
-  },
+        return (
+            <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() {
-    Animated.timing(this.state.progress, {
-      easing: this.props.easing,
-      duration: this.props.easingDuration,
-      toValue: this.props.progress
-    }).start();
-  }
+    update() {
+        Animated.timing(this.state.progress, {
+            easing: this.props.easing,
+            duration: this.props.easingDuration,
+            toValue: this.props.progress
+        }).start();
+    }
 });
 
 module.exports = ProgressBar;

From d93f1ecf1795442c756f17268f569c14c491690e Mon Sep 17 00:00:00 2001
From: yasemincidem <yasemincidem@gmail.com>
Date: Wed, 16 Nov 2016 11:50:51 +0300
Subject: [PATCH 2/2] code refactor

---
 ProgressBar.js | 103 +++++++++++++++++++++++++------------------------
 1 file changed, 52 insertions(+), 51 deletions(-)

diff --git a/ProgressBar.js b/ProgressBar.js
index c760fb0..25c9e10 100644
--- a/ProgressBar.js
+++ b/ProgressBar.js
@@ -8,66 +8,67 @@ import {
 } from 'react-native';
 
 var styles = StyleSheet.create({
-    background: {
-        backgroundColor: '#bbbbbb',
-        height: 5,
-        overflow: 'hidden'
-    },
-    fill: {
-        backgroundColor: '#3b5998',
-        height: 5
-    }
+  background: {
+    backgroundColor: '#bbbbbb',
+    height: 5,
+    overflow: 'hidden'
+  },
+  fill: {
+    backgroundColor: '#3b5998',
+    height: 5
+  }
 });
 
 var ProgressBar = React.createClass({
 
-    getDefaultProps() {
-        return {
-            style: styles,
-            easing: Easing.inOut(Easing.ease),
-            easingDuration: 500
-        };
-    },
+  getDefaultProps() {
+    return {
+      style: styles,
+      easing: Easing.inOut(Easing.ease),
+      easingDuration: 500
+    };
+  },
+
+  getInitialState() {
+    return {
+      progress: new Animated.Value(this.props.initialProgress || 0),
+      calculatedWidth: 0
+    };
+  },
 
-    getInitialState() {
-        return {
-            progress: new Animated.Value(this.props.initialProgress || 0),
-            calculatedWidth: 0
-        };
-    },
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
+      this.update();
+    }
+  },
 
-    componentDidUpdate(prevProps, prevState) {
-        if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
-            this.update();
-        }
-    },
+  render() {
 
-    render() {
-        var fillWidth = this.state.progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0 * (this.props.style.width || this.state.calculatedWidth ),
-                1 * (this.props.style.width || this.state.calculatedWidth)],
-        });
+    var fillWidth = this.state.progress.interpolate({
+      inputRange: [0, 1],
+      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]}
-                  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>
-        );
-    },
+    return (
+      <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() {
-        Animated.timing(this.state.progress, {
-            easing: this.props.easing,
-            duration: this.props.easingDuration,
-            toValue: this.props.progress
-        }).start();
-    }
+  update() {
+    Animated.timing(this.state.progress, {
+      easing: this.props.easing,
+      duration: this.props.easingDuration,
+      toValue: this.props.progress
+    }).start();
+  }
 });
 
 module.exports = ProgressBar;