3 files changed, 90 insertions, 5 deletions
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;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 4f5c0232..5edbb3ad 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -29,3 +29,4 @@ export {default as TaggUserRowCell} from './TaggUserRowCell';
 export {default as LikeButton} from './LikeButton';
 export {default as TaggUserSelectionCell} from './TaggUserSelectionCell';
 export {default as MomentTags} from './MomentTags';
+export {default as GradientProgressBar} from './GradientProgressBar';
diff --git a/src/components/moments/MomentUploadProgressBar.tsx b/src/components/moments/MomentUploadProgressBar.tsx
index 1dee4185..bbd0cb06 100644
--- a/src/components/moments/MomentUploadProgressBar.tsx
+++ b/src/components/moments/MomentUploadProgressBar.tsx
@@ -1,14 +1,53 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import * as Progress from 'react-native-progress';
+import React, {useState} 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 {GradientProgressBar} from '../common';
 
 interface MomentUploadProgressBarProps {}
 
 const MomentUploadProgressBar: React.FC<MomentUploadProgressBarProps> =
   ({}) => {
-    return <Progress.Bar progress={0.3} width={200} />;
+    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);
+
+    return (
+      <View style={styles.background}>
+        <SafeAreaView style={styles.container}>
+          <Text style={styles.text}>Uploading Moment...</Text>
+          <GradientProgressBar progress={0.6} />
+        </SafeAreaView>
+      </View>
+    );
   };
 
-const styles = StyleSheet.create({});
+const styles = StyleSheet.create({
+  background: {
+    position: 'absolute',
+    zIndex: 999,
+    height: StatusBarHeight + 100,
+    backgroundColor: 'white',
+    width: '100%',
+    alignItems: 'center',
+  },
+  container: {
+    justifyContent: 'space-evenly',
+    height: '100%',
+  },
+  text: {
+    fontSize: normalize(14),
+    fontWeight: 'bold',
+    lineHeight: 17,
+    marginVertical: 12,
+  },
+});
 
 export default MomentUploadProgressBar;