Add gradient progress bar

1 files changed, 44 insertions, 5 deletions

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;