First commit

Author: lwansbrough

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Loch Wansbrough
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

ProgressBar.js

@@ -0,0 +1,70 @@
+var React = require('react-native');
+var {
+  StyleSheet,
+  View
+} = React;
+var tweenState = require('react-tween-state');
+
+
+var styles = StyleSheet.create({
+  background: {
+    backgroundColor: '#bbbbbb',
+    height: 5,
+    overflow: 'hidden'
+  },
+  fill: {
+    backgroundColor: '#3b5998',
+    height: 5
+  }
+});
+
+
+var ProgressBar = React.createClass({
+
+  mixins: [tweenState.Mixin],
+
+  getDefaultProps() {
+    return {
+      style: styles,
+      easing: tweenState.easingTypes.easeInOutQuad,
+      easingDuration: 500
+    };
+  },
+
+  getInitialState() {
+    return {
+      progress: 0
+    };
+  },
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.progress >= 0 && this.props.progress != prevProps.progress) {
+      this.update(this.props.progress);
+    }
+  },
+
+  render() {
+
+    var progress = this.getTweeningValue('progress') || this.props.progress;
+
+    var fillWidth = progress * this.props.style.width;
+
+    return (
+      <View style={[styles.background, this.props.backgroundStyle, this.props.style]}>
+        <View style={[styles.fill, this.props.fillStyle, { width: fillWidth }]}/>
+      </View>
+    );
+  },
+
+  update(progress) {
+    this.tweenState('progress', {
+      easing: this.props.easing,
+      duration: this.props.easingDuration,
+      endValue: this.props.progress
+    });
+  }
+});
+
+ProgressBar.easingTypes = tweenState.easingTypes;
+
+module.exports = ProgressBar;

README.md

@@ -0,0 +1,106 @@
+# react-native-google-analytics
+
+An animated progress bar for React Native.
+
+![](https://i.imgur.com/EGufppz.gif)
+
+## Getting started
+
+1. `npm install react-native-progress-bar@latest --save`
+
+## 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);
+
+```
+
+## Properties
+
+#### `progress`
+
+The progress value for the progress bar. Ranges from `0..1`.
+
+#### `fillStyle`
+
+The style for the progress bar fill.
+
+#### `backgroundStyle`
+
+The style for the progress bar's background.
+
+#### `style`
+
+The style for the entire component. This doesn't really differ from the `backgroundStyle` property. You must set `width` either here or in `backgroundStyle` in order to make sure the component works properly.
+
+
+## Component methods
+
+#### `update(progress)`
+
+The recommended way to update the progress of the progress bar is to use the `progress` property. If you prefer, you can use this `update` method to update the progress directly. To access this method, set the `ref` property on the `<ProgressBar>` and call `this.refs.progressBarName.update(0.3)`

index.js

@@ -0,0 +1 @@
+module.exports = require('./ProgressBar');

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "react-native-progress-bar",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lwansbrough/react-native-progress-bar.git"
+  },
+  "version": "0.1.0",
+  "description": "An animated progress bar component for React Native",
+  "main": "index.js",
+  "author": "Lochlan Wansbrough <lochie@live.com> (http://lwansbrough.com)",
+  "peerDependencies": {
+    "react-native": "^0.4.0"
+  },
+  "keywords": [
+    "react",
+    "native",
+    "react-native",
+    "progress",
+    "bar",
+    "load",
+    "loading"
+  ],
+  "dependencies": {
+    "react-tween-state": "0.0.5"
+  }
+}