Add gradient progress bar

6 files changed, 100 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;
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 13a73208..476e7af4 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -69,6 +69,7 @@ export const TAGG_DARK_BLUE = '#4E699C';
 export const TAGG_DARK_PURPLEISH_BLUE = '#4755A1';
 export const TAGG_LIGHT_BLUE: string = '#698DD3';
 export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7';
+export const TAGG_LIGHT_BLUE_3 = '#DDE8FE';
 export const TAGG_LIGHT_PURPLE = '#F4DDFF';
 export const RADIO_BUTTON_GREY: string = '#BEBEBE';
 
diff --git a/src/store/initialStates.ts b/src/store/initialStates.ts
index 92a1e456..5ae62838 100644
--- a/src/store/initialStates.ts
+++ b/src/store/initialStates.ts
@@ -10,6 +10,7 @@ import {
 import {
   CommentThreadType,
   MomentPostType,
+  MomentUploadStatusType,
   UniversityType,
 } from './../types/types';
 
@@ -48,6 +49,7 @@ export const NO_USER_DATA = {
   profile: <ProfileInfoType>NO_PROFILE,
   avatar: <string | undefined>undefined,
   cover: <string | undefined>undefined,
+  momentUploadStatus: <MomentUploadStatusType>MomentUploadStatusType.Empty,
   isOnboardedUser: false,
   newVersionAvailable: false,
   newNotificationReceived: false,
diff --git a/src/types/types.ts b/src/types/types.ts
index 5f70d1f8..930f833b 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -61,6 +61,13 @@ export interface ProfileInfoType {
   is_private: boolean;
 }
 
+export enum MomentUploadStatusType {
+  Empty = 'Empty',
+  Uploading = 'Uploading',
+  Done = 'Done',
+  Error = 'Error',
+}
+
 export interface SocialAccountType {
   handle?: string;
   profile_pic?: string;