Implement ES6 style class definition

.editorconfig

@@ -0,0 +1,17 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+[*.{js,jsx,html,sass}]
+charset = utf-8
+indent_style = spaces
+indent_size = 2
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+indent_style = spaces
+indent_size = 2

.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
+}

README.md

@@ -1,83 +1,62 @@
 # react-native-progress-bar
 
-An animated progress bar for React Native.
+An animated progress bar for React Native. This is an updated fork of https://github.com/lwansbrough/react-native-progress-bar/ working on React 16
 
 ![](https://i.imgur.com/EGufppz.gif)
 
 ## Getting started
 
-1. `npm install react-native-progress-bar@latest --save`
+`npm install mattslight/react-native-progress-bar`
+
+or
+
+`npm install git+https://github.com/mattslight/react-native-progress-bar`
+
 
 ## Example usage
 
 ```javascript
-var React = require('react-native');
-var {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View,
-} = React;
-var ProgressBar = require('react-native-progress-bar');
-
-var rnsandbox = React.createClass({
-
-  getInitialState() {
-    return {
-      progress: 0
-    };
-  },
-
-  render() {
-
-    setTimeout((function() {
-      this.setState({ progress: this.state.progress + (0.4 * Math.random())});
-    }).bind(this), 1000);
-
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+Control+Z for dev menu
-        </Text>
-        <ProgressBar
-          fillStyle={{}}
-          backgroundStyle={{backgroundColor: '#cccccc', borderRadius: 2}}
-          style={{marginTop: 10, width: 300}}
-          progress={this.state.progress}
-        />
-      </View>
-    );
-  }
-});
-
-var styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
-
-AppRegistry.registerComponent('rnsandbox', () => rnsandbox);
-
+import React from 'react'
+import { Dimensions } from 'react-native'
+import ProgressBar from 'react-native-progress-bar'
+
+export class MyComponentWithProgress extends React.Component {
+	constructor(props) {
+		super()
+		this.state = {
+			progress: 0
+		}
+	}
+
+	render() {
+
+		// ...
+		// example function controlling state
+
+		setTimeout(() => {
+			this.setState({ progress: this.state.progress + 0.4 * Math.random() }).bind(this)
+		}, 1000)
+
+		// ...
+
+		return (
+
+			// ...
+
+			<ProgressBar
+				fillStyle={{}}
+				backgroundStyle={{ backgroundColor: '#cccccc', borderRadius: 2 }}
+				style={{ width: Dimensions.get('window').width - 20 }}
+				progress={this.state.progress}
+			/>
+
+			// ...
+
+		)
+	}
+}
+
+AppRegistry.registerComponent('MyComponentWithProgress', () => MyComponentWithProgress);
 ```
 
 ## Properties