Use flexbox

ProgressBar.js

@@ -3,64 +3,70 @@ import {
   Animated,
   Easing,
   StyleSheet,
-  View
+  View,
 } from 'react-native';
 
-var styles = StyleSheet.create({
+const styles = StyleSheet.create({
   background: {
     backgroundColor: '#bbbbbb',
     height: 5,
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
   fill: {
     backgroundColor: '#3b5998',
-    height: 5
-  }
-});
-
-var ProgressBar = React.createClass({
-
-  getDefaultProps() {
-    return {
-      style: styles,
-      easing: Easing.inOut(Easing.ease),
-      easingDuration: 500
-    };
+    height: 5,
   },
+});
 
-  getInitialState() {
-    return {
-      progress: new Animated.Value(this.props.initialProgress || 0)
+class ProgressBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      progress: new Animated.Value(this.props.initialProgress || 0),
+      calculatedWidth: 0,
     };
-  },
+  }
 
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
+  componentDidUpdate(prevProps) {
+    if (this.props.progress >= 0 && this.props.progress !== prevProps.progress) {
       this.update();
     }
-  },
+  }
 
-  render() {
+  update() {
+    Animated.timing(this.state.progress, {
+      easing: this.props.easing,
+      duration: this.props.easingDuration,
+      toValue: this.props.progress,
+    }).start();
+  }
 
-    var fillWidth = this.state.progress.interpolate({
+  render() {
+    const 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]}>
-        <Animated.View style={[styles.fill, this.props.fillStyle, { width: fillWidth }]}/>
+      <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();
   }
-});
+}
+
+ProgressBar.defaultProps = {
+  style: styles,
+  easing: Easing.inOut(Easing.ease),
+  easingDuration: 500,
+};
 
-module.exports = ProgressBar;
+export default ProgressBar;