Added progress bar, progress modal and bubble loader

mobile/src/ui/ProgressBar.js

@@ -0,0 +1,86 @@
+import React from "react"
+import {
+  AppRegistry,
+  StyleSheet,
+  Text,
+  View,
+  Easing,
+  Animated,
+} from "react-native"
+import PropTypes from "prop-types"
+
+var style = StyleSheet.create({
+  container: {
+    width: "100%",
+    flexDirection: "row",
+    overflow: "hidden",
+    borderWidth: 2,
+    borderColor: "#555555",
+    borderRadius: 8,
+    marginBottom: 5,
+    backgroundColor: "#FFFFFF",
+  },
+  bar: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    backgroundColor: "#3BB0FD",
+  },
+  value: {
+    position: "absolute",
+    right: 0,
+    paddingRight: 5,
+    backgroundColor: "#00000000",
+    color: "#FFFFFF",
+  },
+})
+
+export class ProgressBar extends React.Component {
+  static propInfo = {
+    height: PropTypes.number,
+    value: PropTypes.number,
+  }
+
+  static defaultProps = {
+    value: 0,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      animatedValue: new Animated.Value(props.value % 101),
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (this.props.value !== nextProps.value) {
+      Animated.timing(this.state.animatedValue, {
+        toValue: nextProps.value % 101,
+        easing: Easing.out(Easing.ease),
+        duration: 500,
+      }).start()
+    }
+  }
+
+  render() {
+    const { height } = this.props
+    const width = this.state.animatedValue.interpolate({
+      inputRange: [0, 100],
+      outputRange: ["0%", "100%"],
+    })
+
+    return (
+      <View style={[style.container, { height }]}>
+        <Animated.View
+          style={[
+            style.bar,
+            {
+              width,
+            },
+          ]}>
+          <Text style={style.value}>{this.props.value}%</Text>
+        </Animated.View>
+      </View>
+    )
+  }
+}