1 files changed, 63 insertions, 0 deletions
diff --git a/frontend/app/components/progressBar.js b/frontend/app/components/progressBar.js
new file mode 100644
index 0000000..dd3a3a1
--- /dev/null
+++ b/frontend/app/components/progressBar.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  StyleSheet,
+  View,
+  Animated,
+  Easing,
+  ViewPropTypes,
+} from 'react-native';
+import PropTypes from 'prop-types';
+import { RkTheme } from 'react-native-ui-kitten';
+
+export class ProgressBar extends React.Component {
+  static propTypes = {
+    width: PropTypes.number.isRequired,
+    progress: PropTypes.number,
+    color: PropTypes.string,
+    style: ViewPropTypes.style,
+  };
+  static defaultProps = {
+    progress: 0,
+    color: RkTheme.current.colors.accent,
+    style: {},
+  };
+
+  state = {
+    progress: new Animated.Value(0),
+  };
+
+  componentDidUpdate(prevProps) {
+    if (this.props.progress >= 0 && this.props.progress !== prevProps.progress) {
+      this.animate(this.props.progress);
+    }
+  }
+
+  animate = (endValue) => {
+    Animated.timing(this.state.progress, {
+      easing: Easing.inOut(Easing.ease),
+      duration: 500,
+      toValue: endValue,
+    }).start();
+  };
+
+  render() {
+    const width = this.state.progress.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, this.props.width],
+    });
+    return (
+      <View style={[styles.container, this.props.style, { width: this.props.width }]}>
+        <Animated.View style={[styles.value, { width }, { backgroundColor: this.props.color }]} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 3,
+  },
+  value: {
+    height: 3,
+  },
+});