Implement ES6 style class definition

.eslintrc

@@ -0,0 +1,37 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+          "jsx": true,
+          "experimentalObjectRestSpread": true
+      }
+  },
+  "plugins": [
+    "react",
+    "react-native",
+    "react-native-globals",
+    "babel",
+    "flowtype"
+  ],
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:flowtype/recommended"],
+  "rules": {
+    "strict": 0,
+    "comma-dangle": 0,
+    "no-console": 1,
+    "no-var": 2,
+    "react/prop-types": 1,
+    "no-unused-vars": 1,
+    "react/react-in-jsx-scope": 0
+  },
+  "settings": {
+    "react": {
+      "pragma": "React"
+    }
+  },
+  "env": {
+    "node": true,
+    "react-native-globals/all": true
+  }
+}

.gitignore

@@ -0,0 +1,56 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle

ProgressBar.js

@@ -1,67 +1,56 @@
-import React from 'react';
-import {
-    StyleSheet,
-    Text,
-    View,
-    Animated,
-    Easing,
-} from 'react-native';
-
-var styles = StyleSheet.create({
-  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)
-    };
-  },
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
-      this.update();
-    }
-  },
-
-  render() {
-
-    var fillWidth = this.state.progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0 * this.props.style.width, 1 * this.props.style.width],
-    });
-
-    return (
-      <View style={[styles.background, this.props.backgroundStyle, this.props.style]}>
-        <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();
-  }
-});
-
-module.exports = ProgressBar;
+import React from 'react'
+import { StyleSheet, View, Animated, Easing } from 'react-native'
+
+const styles = StyleSheet.create({
+	background: {
+		backgroundColor: '#bbbbbb',
+		height: 5,
+		overflow: 'hidden'
+	},
+	fill: {
+		backgroundColor: '#3b5998',
+		height: 5
+	}
+})
+
+export default class ProgressBar extends React.Component {
+	constructor(props) {
+		super(props)
+		this.state = {
+			progress: new Animated.Value(this.props.initialProgress || 0)
+		}
+	}
+
+	componentDidUpdate(prevProps) {
+		if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
+			this.update()
+		}
+	}
+
+	render() {
+		let fillWidth = this.state.progress.interpolate({
+			inputRange: [0, 1],
+			outputRange: [0 * this.props.style.width, 1 * this.props.style.width]
+		})
+
+		return (
+			<View style={[styles.background, this.props.backgroundStyle, this.props.style]}>
+				<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
+}