From 142c84c7c45411b9badf7da3182c9e4bd0e96e38 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 20 Jul 2021 17:35:20 -0400
Subject: Add gradient progress bar

---
 src/components/common/GradientProgressBar.tsx | 45 +++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/common/GradientProgressBar.tsx

(limited to 'src/components/common/GradientProgressBar.tsx')

diff --git a/src/components/common/GradientProgressBar.tsx b/src/components/common/GradientProgressBar.tsx
new file mode 100644
index 00000000..3483f8ac
--- /dev/null
+++ b/src/components/common/GradientProgressBar.tsx
@@ -0,0 +1,45 @@
+import React, {FC} from 'react';
+import {StyleSheet, View, ViewProps} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {
+  TAGG_LIGHT_BLUE_2,
+  TAGG_LIGHT_BLUE_3,
+  TAGG_PURPLE,
+} from '../../constants';
+import {normalize, SCREEN_WIDTH} from '../../utils';
+
+interface GradientProgressBarProps extends ViewProps {
+  progress: number;
+}
+
+const GradientProgressBar: FC<GradientProgressBarProps> = ({
+  style,
+  progress,
+}) => {
+  return (
+    <LinearGradient
+      style={[styles.bar, style]}
+      useAngle={true}
+      colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}>
+      <View style={[styles.blank, {width: `${(1 - progress) * 100}%`}]} />
+    </LinearGradient>
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 6.5,
+  },
+  bar: {
+    width: SCREEN_WIDTH * 0.9,
+    height: normalize(10),
+    borderRadius: 6.5,
+  },
+  blank: {
+    alignSelf: 'flex-end',
+    height: normalize(10),
+    width: '80%',
+    backgroundColor: TAGG_LIGHT_BLUE_3,
+  },
+});
+
+export default GradientProgressBar;
-- 
cgit v1.2.3-70-g09d2