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


From 3d616c5d445919c476aa926c6d2c44db38cbab37 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 20 Jul 2021 17:38:04 -0400
Subject: Move out width style

---
 src/components/common/GradientProgressBar.tsx      |  3 +--
 src/components/moments/MomentUploadProgressBar.tsx | 10 ++++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

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

diff --git a/src/components/common/GradientProgressBar.tsx b/src/components/common/GradientProgressBar.tsx
index 3483f8ac..2f7f0431 100644
--- a/src/components/common/GradientProgressBar.tsx
+++ b/src/components/common/GradientProgressBar.tsx
@@ -6,7 +6,7 @@ import {
   TAGG_LIGHT_BLUE_3,
   TAGG_PURPLE,
 } from '../../constants';
-import {normalize, SCREEN_WIDTH} from '../../utils';
+import {normalize} from '../../utils';
 
 interface GradientProgressBarProps extends ViewProps {
   progress: number;
@@ -30,7 +30,6 @@ const styles = StyleSheet.create({
     borderRadius: 6.5,
   },
   bar: {
-    width: SCREEN_WIDTH * 0.9,
     height: normalize(10),
     borderRadius: 6.5,
   },
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index bbd0cb06..7310727e 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -1,11 +1,10 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {View} from 'react-native-animatable';
-import Animated, {useSharedValue} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
-import {normalize, StatusBarHeight} from '../../utils';
+import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {GradientProgressBar} from '../common';
 
 interface MomentUploadProgressBarProps {}
@@ -23,7 +22,7 @@ const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
       <View style={styles.background}>
         <SafeAreaView style={styles.container}>
           <Text style={styles.text}>Uploading Moment...</Text>
-          <GradientProgressBar progress={0.6} />
+          <GradientProgressBar style={styles.bar} progress={0.6} />
         </SafeAreaView>
       </View>
     );
@@ -48,6 +47,9 @@ const styles = StyleSheet.create({
     lineHeight: 17,
     marginVertical: 12,
   },
+  bar: {
+    width: SCREEN_WIDTH * 0.9,
+  },
 });
 
 export default MomentUploadProgressBar;
-- 
cgit v1.2.3-70-g09d2


From 74c853034e893aeda18ee78f59e4539fba6d8fc0 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Tue, 20 Jul 2021 17:58:31 -0400
Subject: Fix logic to make progress bar work

---
 src/components/common/GradientProgressBar.tsx      | 10 +++++++---
 src/components/moments/MomentUploadProgressBar.tsx | 18 +++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

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

diff --git a/src/components/common/GradientProgressBar.tsx b/src/components/common/GradientProgressBar.tsx
index 2f7f0431..fc62bd3c 100644
--- a/src/components/common/GradientProgressBar.tsx
+++ b/src/components/common/GradientProgressBar.tsx
@@ -1,6 +1,7 @@
 import React, {FC} from 'react';
-import {StyleSheet, View, ViewProps} from 'react-native';
+import {StyleSheet, ViewProps, ViewStyle} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
+import Animated, {useAnimatedStyle} from 'react-native-reanimated';
 import {
   TAGG_LIGHT_BLUE_2,
   TAGG_LIGHT_BLUE_3,
@@ -9,19 +10,22 @@ import {
 import {normalize} from '../../utils';
 
 interface GradientProgressBarProps extends ViewProps {
-  progress: number;
+  progress: Animated.SharedValue<number>;
 }
 
 const GradientProgressBar: FC<GradientProgressBarProps> = ({
   style,
   progress,
 }) => {
+  const animatedProgressStyle = useAnimatedStyle<ViewStyle>(() => ({
+    width: `${(1 - progress.value) * 100}%`,
+  }));
   return (
     <LinearGradient
       style={[styles.bar, style]}
       useAngle={true}
       colors={[TAGG_PURPLE, TAGG_LIGHT_BLUE_2]}>
-      <View style={[styles.blank, {width: `${(1 - progress) * 100}%`}]} />
+      <Animated.View style={[styles.blank, animatedProgressStyle]} />
     </LinearGradient>
   );
 };
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index 7310727e..26c20a46 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {View} from 'react-native-animatable';
+import {Easing, useSharedValue, withTiming} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useSelector} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
@@ -12,17 +13,20 @@ interface MomentUploadProgressBarProps {}
 const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
   ({}) => {
     const {momentUploadStatus} = useSelector((state: RootState) => state.user);
-    // const [progress, setProgress] = useState(0);
-    // const progressTime = useSharedValue<number>(0);
-    // const [indeterminate, setIndeterminate] = useState(false);
-    // const range = new Animated.Value(0);
-    // const transX = new Animated.Value(0);
+    const progress = useSharedValue(0);
+
+    useEffect(() => {
+      progress.value = withTiming(1, {
+        duration: 5000,
+        easing: Easing.linear,
+      });
+    }, []);
 
     return (
       <View style={styles.background}>
         <SafeAreaView style={styles.container}>
           <Text style={styles.text}>Uploading Moment...</Text>
-          <GradientProgressBar style={styles.bar} progress={0.6} />
+          <GradientProgressBar style={styles.bar} progress={progress} />
         </SafeAreaView>
       </View>
     );
-- 
cgit v1.2.3-70-g09d2