Merge branch 'master' into tma538-friend-requests

32 files changed, 405 insertions, 313 deletions

diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
index 325e2788..f4f8197d 100644
--- a/src/components/comments/CommentsCount.tsx
+++ b/src/components/comments/CommentsCount.tsx
@@ -30,7 +30,7 @@ const CommentsCount: React.FC<CommentsCountProps> = ({
   };
   return (
     <>
-      <TouchableOpacity onPress={() => navigateToCommentsScreen()}>
+      <TouchableOpacity onPress={navigateToCommentsScreen}>
         <CommentIcon style={styles.image} />
         <Text style={styles.count}>
           {commentsCount !== '0' ? commentsCount : ''}
diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx
index 86a472b1..b5ac32ec 100644
--- a/src/components/common/TaggPopup.tsx
+++ b/src/components/common/TaggPopup.tsx
@@ -7,6 +7,7 @@ import {ArrowButton} from '..';
 import {OnboardingStackParams} from '../../routes';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {BlurView} from '@react-native-community/blur';
 
 type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>;
 type TaggPopupNavigationProps = StackNavigationProp<
@@ -31,41 +32,43 @@ const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => {
   const {messageHeader, messageBody, next} = route.params.popupProps;
 
   return (
-    <TouchableOpacity
-      style={styles.container}
-      onPressOut={() => {
-        navigation.goBack();
-      }}>
-      <View style={styles.popup}>
-        <Image
-          style={styles.icon}
-          source={require('../../assets/icons/plus-logo.png')}
-        />
-        <View style={styles.textContainer}>
-          <Text style={styles.header}>{messageHeader}</Text>
-          <Text style={styles.subtext}>{messageBody}</Text>
-        </View>
-        {!next && (
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={() => {
-              navigation.goBack();
-            }}>
-            <CloseIcon height={'50%'} width={'50%'} color={'white'} />
-          </TouchableOpacity>
-        )}
-      </View>
-      {next && (
-        <View style={styles.footer}>
-          <ArrowButton
-            direction="forward"
-            onPress={() => {
-              navigation.navigate('TaggPopup', {popupProps: next});
-            }}
+    <BlurView blurType="light" blurAmount={2} style={styles.container}>
+      <TouchableOpacity
+        style={styles.container}
+        onPressOut={() => {
+          navigation.goBack();
+        }}>
+        <View style={styles.popup}>
+          <Image
+            style={styles.icon}
+            source={require('../../assets/icons/plus-logo.png')}
           />
+          <View style={styles.textContainer}>
+            <Text style={styles.header}>{messageHeader}</Text>
+            <Text style={styles.subtext}>{messageBody}</Text>
+          </View>
+          {!next && (
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => {
+                navigation.goBack();
+              }}>
+              <CloseIcon height={'50%'} width={'50%'} color={'white'} />
+            </TouchableOpacity>
+          )}
         </View>
-      )}
-    </TouchableOpacity>
+        {next && (
+          <View style={styles.footer}>
+            <ArrowButton
+              direction="forward"
+              onPress={() => {
+                navigation.navigate('TaggPopup', {popupProps: next});
+              }}
+            />
+          </View>
+        )}
+      </TouchableOpacity>
+    </BlurView>
   );
 };
 
@@ -75,6 +78,8 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
+    width: '100%',
+    height: '100%',
   },
   whiteColor: {
     color: 'white',
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 623e328d..7905e8a9 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,27 +1,20 @@
 import {useNavigation} from '@react-navigation/native';
-import React from 'react';
-import {
-  Alert,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import React, {Fragment} from 'react';
+import {Alert, StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import ImagePicker from 'react-native-image-crop-picker';
 import LinearGradient from 'react-native-linear-gradient';
-import PlusIcon from '../../assets/icons/plus_icon-01.svg';
-import UpIcon from '../../assets/icons/up_icon.svg';
-import DownIcon from '../../assets/icons/down_icon.svg';
+import {MomentType, ScreenType} from 'src/types';
 import DeleteIcon from '../../assets/icons/delete-logo.svg';
+import DownIcon from '../../assets/icons/down_icon.svg';
+import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
+import UpIcon from '../../assets/icons/up_icon.svg';
 import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
 import {SCREEN_WIDTH} from '../../utils';
-import ImagePicker from 'react-native-image-crop-picker';
 import MomentTile from './MomentTile';
-import {MomentType, ScreenType} from 'src/types';
-import {useDispatch} from 'react-redux';
 
 interface MomentProps {
   title: string;
@@ -49,7 +42,6 @@ const Moment: React.FC<MomentProps> = ({
   externalStyles,
 }) => {
   const navigation = useNavigation();
-  const dispatch = useDispatch();
 
   const navigateToImagePicker = () => {
     ImagePicker.openPicker({
@@ -77,7 +69,7 @@ const Moment: React.FC<MomentProps> = ({
       })
       .catch((err) => {
         if (err.code && err.code !== 'E_PICKER_CANCELLED') {
-          Alert.alert('Unable to upload moment!');
+          Alert.alert(ERROR_UPLOAD_MOMENT_SHORT);
         }
       });
   };
@@ -88,23 +80,15 @@ const Moment: React.FC<MomentProps> = ({
         <Text style={[styles.titleText, externalStyles?.titleText]}>
           {title}
         </Text>
-        <View style={styles.flexer} />
         {!userXId ? (
           <>
-            <PlusIcon
-              width={21}
-              height={21}
-              onPress={() => navigateToImagePicker()}
-              color={TAGG_TEXT_LIGHT_BLUE}
-              style={{marginRight: 10}}
-            />
             {showUpButton && move && (
               <UpIcon
                 width={19}
                 height={19}
                 onPress={() => move('up', title)}
                 color={TAGG_TEXT_LIGHT_BLUE}
-                style={{marginRight: 10}}
+                style={{marginLeft: 5}}
               />
             )}
             {showDownButton && move && (
@@ -113,9 +97,23 @@ const Moment: React.FC<MomentProps> = ({
                 height={19}
                 onPress={() => move('down', title)}
                 color={TAGG_TEXT_LIGHT_BLUE}
-                style={{marginRight: 10}}
+                style={{marginLeft: 5}}
               />
             )}
+          </>
+        ) : (
+          <Fragment />
+        )}
+        <View style={styles.flexer} />
+        {!userXId ? (
+          <>
+            <PlusIcon
+              width={21}
+              height={21}
+              onPress={() => navigateToImagePicker()}
+              color={TAGG_TEXT_LIGHT_BLUE}
+              style={{marginRight: 10}}
+            />
             {shouldAllowDeletion && (
               <DeleteIcon
                 onPress={() => handleMomentCategoryDelete(title)}
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index efbda46f..e6d16f82 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -9,10 +9,8 @@ import {
   loadUserNotifications,
   updateUserXFriends,
 } from '../../store/actions';
-import {loadAvatar} from '../../services';
 import {acceptFriendRequest} from '../../store/actions';
-import {RootState} from '../../store/rootReducer';
-import {NotificationType, ProfilePreviewType, ScreenType} from '../../types';
+import {NotificationType, ProfilePreviewType, ScreenType, MomentType} from '../../types';
 import {
   fetchUserX,
   SCREEN_HEIGHT,
@@ -20,10 +18,13 @@ import {
   userXInStore,
 } from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
+import {loadAvatar, loadMomentThumbnail} from '../../services';
+
 
 interface NotificationProps {
   item: NotificationType;
   screenType: ScreenType;
+  moments: MomentType[];
 }
 
 const Notification: React.FC<NotificationProps> = (props) => {
@@ -36,6 +37,7 @@ const Notification: React.FC<NotificationProps> = (props) => {
       unread,
     },
     screenType,
+    moments: loggedInUserMoments,
   } = props;
 
   const navigation = useNavigation();
@@ -59,20 +61,21 @@ const Notification: React.FC<NotificationProps> = (props) => {
     };
   }, [id]);
 
-  // TODO: this should be moment thumbnail, waiting for that to complete
-  // useEffect(() => {
-  //   let mounted = true;
-  //   const loadMomentImage = async (user_id: string) => {
-  //     const response = await loadAvatar(user_id, true);
-  //     if (mounted) {
-  //       setMomentURI(response);
-  //     }
-  //   };
-  //   loadMomentImage(id);
-  //   return () => {
-  //     mounted = false;
-  //   };
-  // }, [id, notification_object]);
+  useEffect(() => {
+    let mounted = true;
+    const loadMomentImage = async (moment_id: string) => {
+      const response = await loadMomentThumbnail(moment_id);
+      if (mounted && response) {
+        setMomentURI(response);
+      }
+    };
+    if (notification_type === 'CMT' && notification_object) {
+      loadMomentImage(notification_object.moment_id);
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [id, notification_object, notification_type]);
 
   const onNotificationTap = async () => {
     switch (notification_type) {
@@ -90,6 +93,25 @@ const Notification: React.FC<NotificationProps> = (props) => {
           screenType,
         });
         break;
+      case 'CMT':
+        // find the moment we need to display
+        const moment = loggedInUserMoments?.find(
+          (m) => m.moment_id === notification_object?.moment_id,
+        );
+        if (moment) {
+          navigation.push('IndividualMoment', {
+            moment,
+            userXId: undefined, // we're only viewing our own moment here
+            screenType,
+          });
+          setTimeout(() => {
+            navigation.push('MomentCommentsScreen', {
+              moment_id: moment.moment_id,
+              screenType,
+            });
+          }, 500);
+        }
+        break;
       default:
         break;
     }
@@ -136,14 +158,10 @@ const Notification: React.FC<NotificationProps> = (props) => {
             />
           </View>
         )}
+        {notification_type === 'CMT' && notification_object && (
+        <Image style={styles.moment} source={{uri: momentURI}} />
+      )}
       </TouchableWithoutFeedback>
-      {/* TODO: Still WIP */}
-      {/* {notification_type === 'CMT' && notification_object && (
-        <Image
-          style={styles.moment}
-          source={{uri: momentURI, cache: 'only-if-cached'}}
-        />
-      )} */}
     </>
   );
 };
@@ -156,7 +174,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   avatarContainer: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     flex: 1,
     justifyContent: 'center',
   },
@@ -171,7 +189,7 @@ const styles = StyleSheet.create({
     height: '80%',
     flexDirection: 'column',
     justifyContent: 'space-around',
-    marginRight: SCREEN_WIDTH / 6,
+    marginRight: '15%',
   },
   actorName: {
     fontSize: 15,
diff --git a/src/components/onboarding/LinkSocialMedia.tsx b/src/components/onboarding/LinkSocialMedia.tsx
index c7b0a6b4..6cb7e9cf 100644
--- a/src/components/onboarding/LinkSocialMedia.tsx
+++ b/src/components/onboarding/LinkSocialMedia.tsx
@@ -13,6 +13,7 @@ import {
   SOCIAL_FONT_COLORS,
   TAGG_ICON_DIM,
 } from '../../constants/constants';
+import {ERROR_LINK, SUCCESS_LINK} from '../../constants/strings';
 import {
   handlePressForAuthBrowser,
   registerNonIntegratedSocialLink,
@@ -64,12 +65,12 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
 
   const linkNonIntegratedSocial = async (username: string) => {
     if (await registerNonIntegratedSocialLink(label, username)) {
-      Alert.alert(`Successfully linked ${label} 🎉`);
+      Alert.alert(SUCCESS_LINK(label));
       setAuthenticated(true);
     } else {
       // If we display too fast the alert will get dismissed with the modal
       setTimeout(() => {
-        Alert.alert(`Something went wrong, we can't link with ${label} 😔`);
+        Alert.alert(ERROR_LINK(label));
       }, 500);
     }
   };
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 9213e012..e7fb566b 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -107,10 +107,12 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
-  //These two booleans are used to see if user closed the pormpt displayed to them
   const [isStageTwoPromptClosed, setIsStageTwoPromptClosed] = useState<boolean>(
     false,
   );
+  const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
+    false,
+  );
   const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
     boolean
   >(false);
@@ -154,7 +156,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const move = (direction: 'up' | 'down', title: string) => {
     let categories = [...momentCategories];
     categories = moveCategory(categories, title, direction === 'up');
-    dispatch(updateMomentCategories(categories));
+    dispatch(updateMomentCategories(categories, false));
   };
 
   /**
@@ -173,11 +175,16 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       const navigateToMomentUploadPrompt = () => {
         switch (profile.profile_completion_stage) {
           case 1:
-            if (momentCategories && momentCategories[0]) {
+            if (
+              momentCategories &&
+              momentCategories[0] &&
+              !isStageOnePromptClosed
+            ) {
               navigation.navigate('MomentUploadPrompt', {
                 screenType,
                 momentCategory: momentCategories[0],
               });
+              setIsStageOnePromptClosed(true);
             }
             break;
           case 2:
@@ -190,8 +197,15 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
             break;
         }
       };
-      setTimeout(navigateToMomentUploadPrompt, 2000);
-    }, [profile.profile_completion_stage, momentCategories]),
+      if (!userXId) {
+        setTimeout(navigateToMomentUploadPrompt, 2000);
+      }
+    }, [
+      profile.profile_completion_stage,
+      momentCategories,
+      userXId,
+      isStageOnePromptClosed,
+    ]),
   );
 
   useEffect(() => {
@@ -270,7 +284,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
                 momentCategories.filter((mc) => mc !== category),
                 false,
               ),
-            );
+            )
             dispatch(deleteUserMomentsForCategory(category));
           },
         },
@@ -379,7 +393,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
               />
             ),
         )}
-        {!userXId && profile.profile_completion_stage !== 1 && (
+        {!userXId && (
           <TouchableOpacity
             onPress={() =>
               navigation.push('CategorySelection', {
diff --git a/src/components/profile/MomentMoreInfoDrawer.tsx b/src/components/profile/MomentMoreInfoDrawer.tsx
index e127e05c..77c349ca 100644
--- a/src/components/profile/MomentMoreInfoDrawer.tsx
+++ b/src/components/profile/MomentMoreInfoDrawer.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Alert, StyleSheet, TouchableOpacity, ViewProps} from 'react-native';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
+import {ERROR_DELETE_MOMENT, MOMENT_DELETED_MSG} from '../../constants/strings';
 import {deleteMoment, sendReport} from '../../services';
 import {GenericMoreInfoDrawer} from '../common';
 
@@ -21,7 +22,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
       if (success) {
         // set time out for UI transitions
         setTimeout(() => {
-          Alert.alert('Moment deleted!', '', [
+          Alert.alert(MOMENT_DELETED_MSG, '', [
             {
               text: 'OK',
               onPress: () => dismissScreenAndUpdate(),
@@ -31,9 +32,7 @@ const MomentMoreInfoDrawer: React.FC<MomentMoreInfoDrawerProps> = (props) => {
         }, 500);
       } else {
         setTimeout(() => {
-          Alert.alert(
-            'We were unable to delete that moment 😭 , please try again later!',
-          );
+          Alert.alert(ERROR_DELETE_MOMENT);
         }, 500);
       }
     });
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 0d8d9852..e6311daa 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -21,6 +21,7 @@ import {logout} from '../../store/actions';
 import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
 import {SearchResultsBackground} from '../search';
 import NavigationBar from 'src/routes/tabs';
+import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
 
 const NO_USER: UserType = {
   userId: '',
@@ -90,7 +91,7 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
         loggedInUser,
       );
       if (isUserBlocked) {
-        Alert.alert('You cannot view this profile');
+        Alert.alert(ERROR_UNABLE_TO_VIEW_PROFILE);
         return;
       }
       if (previewType !== 'Comment') {
@@ -129,21 +130,23 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
         }
       }
 
+      const userXId =
+        loggedInUser.username === user.username ? undefined : user.id;
+
       /**
-       * Dispatch an event to Fetch the user details
-       * If the user is already present in store, do not fetch again
-       * Finally, Navigate to profile of the user selected
+       * Dispatch an event to Fetch the user details only if we're navigating to
+       * a userX's profile.
+       * If the user is already present in store, do not fetch again.
+       * Finally, Navigate to profile of the user selected.
        */
-
-      if (!userXInStore(state, screenType, user.id)) {
+      if (userXId && !userXInStore(state, screenType, user.id)) {
         await fetchUserX(
           dispatch,
           {userId: user.id, username: user.username},
           screenType,
         );
       }
-      const userXId =
-        loggedInUser.username === user.username ? undefined : user.id;
+
       navigation.push('Profile', {
         userXId,
         screenType,
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 12172df9..82ac07df 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -17,6 +17,11 @@ import {
 } from '../../services';
 import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
 import {UserType} from '../../types';
+import {
+  ERROR_LINK,
+  ERROR_UNABLE_TO_FIND_PROFILE,
+  SUCCESS_LINK,
+} from '../../constants/strings';
 
 interface TaggProps {
   social: string;
@@ -56,7 +61,7 @@ const Tagg: React.FC<TaggProps> = ({
           show auth browser
         case !integrated_social:
           show modal
-  Tagg's "Tagg" will use the Ring instead of PurpleRing 
+  Tagg's "Tagg" will use the Ring instead of PurpleRing
   */
 
   const modalOrAuthBrowserOrPass = async () => {
@@ -71,7 +76,7 @@ const Tagg: React.FC<TaggProps> = ({
           if (socialURL) {
             Linking.openURL(socialURL);
           } else {
-            Alert.alert('We were unable to find this profile 😔');
+            Alert.alert(ERROR_UNABLE_TO_FIND_PROFILE);
           }
         });
       }
@@ -79,7 +84,9 @@ const Tagg: React.FC<TaggProps> = ({
       if (isIntegrated) {
         handlePressForAuthBrowser(social).then((success) => {
           setTaggsNeedUpdate(success);
-          if (success) setSocialDataNeedUpdate(social, '');
+          if (success) {
+            setSocialDataNeedUpdate(social, '');
+          }
         });
       } else {
         setModalVisible(true);
@@ -105,13 +112,13 @@ const Tagg: React.FC<TaggProps> = ({
 
   const linkNonIntegratedSocial = async (username: string) => {
     if (await registerNonIntegratedSocialLink(social, username)) {
-      Alert.alert(`Successfully linked ${social} 🎉`);
+      Alert.alert(SUCCESS_LINK(social));
       setTaggsNeedUpdate(true);
       setSocialDataNeedUpdate(social, username);
     } else {
       // If we display too fast the alert will get dismissed with the modal
       setTimeout(() => {
-        Alert.alert(`Something went wrong, we can't link with ${social} 😔`);
+        Alert.alert(ERROR_LINK(social));
       }, 500);
     }
   };
diff --git a/src/constants/api.ts b/src/constants/api.ts
index de43b94d..701070eb 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -18,6 +18,7 @@ export const GET_FB_POSTS_ENDPOINT: string = API_URL + 'posts-fb/';
 export const GET_TWITTER_POSTS_ENDPOINT: string = API_URL + 'posts-twitter/';
 export const SEARCH_ENDPOINT: string = API_URL + 'search/';
 export const MOMENTS_ENDPOINT: string = API_URL + 'moments/';
+export const MOMENT_THUMBNAIL_ENDPOINT: string = API_URL + 'moment-thumbnail/';
 export const VERIFY_INVITATION_CODE_ENDPOUNT: string = API_URL + 'verify-code/';
 export const COMMENTS_ENDPOINT: string = API_URL + 'comments/';
 export const FRIENDS_ENDPOINT: string = API_URL + 'friends/';
diff --git a/src/constants/regex.ts b/src/constants/regex.ts
index 6ab045bd..fe5ce3ab 100644
--- a/src/constants/regex.ts
+++ b/src/constants/regex.ts
@@ -40,7 +40,7 @@ export const websiteRegex: RegExp = /^$|^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._+
  * - max. 150 chars for bio
  * - match alphanumerics, and special characters used in URLs
  */
-export const bioRegex: RegExp = /^$|^[A-Za-z0-9'\-,.!@#$%^&*()_:?/ ]{1,150}$/;
+export const bioRegex: RegExp = /^[\s\S]{1,150}$/;
 
 /**
  * The gender regex has the following constraints
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
new file mode 100644
index 00000000..b5344afd
--- /dev/null
+++ b/src/constants/strings.ts
@@ -0,0 +1,47 @@
+/* eslint-disable */
+// Below is the regex to convert this into a csv for the Google Sheet
+// export const (.*) = .*?(['|"|`])(.*)\2;
+// replace with: $1\t$3
+export const COMING_SOON_MSG = 'Creating more fun things for you, surprises coming soon 😉';
+export const ERROR_AUTHENTICATION = 'An error occurred during authentication. Please login again!';
+export const ERROR_CATEGORY_CREATION = 'There was a problem creating your categories. Please refresh and try again.';
+export const ERROR_CATEGORY_UPDATE = 'There was a problem updating your categories. Please refresh and try again';
+export const ERROR_DELETE_CATEGORY = 'There was a problem while deleting category. Please try again';
+export const ERROR_DELETE_MOMENT = 'Unable to delete moment, please try again later!';
+export const ERROR_DOUBLE_CHECK_CONNECTION = 'Please double-check your network connection and retry';
+export const ERROR_DUP_OLD_PWD = 'You may not use a previously used password';
+export const ERROR_EMAIL_IN_USE = 'Email already in use, please try another one';
+export const ERROR_FAILED_LOGIN_INFO = 'Login failed, please try re-entering your login information';
+export const ERROR_FAILED_TO_COMMENT =  'Unable to post comment, refresh and try again!';
+export const ERROR_INVALID_INVITATION_CODE = 'Invitation code invalid, try again or talk to the friend that sent it 😬';
+export const ERROR_INVALID_LOGIN = 'Invalid login, Please login again';
+export const ERROR_INVALID_PWD_CODE = 'Looks like you have entered the wrong code, please try again';
+export const ERROR_INVALID_VERIFICATION_CODE = 'Invalid verification code, try re-entering or tap the resend code button for a new code';
+export const ERROR_INVALID_VERIFICATION_CODE_FORMAT = 'Please enter the 6 digit code sent to your phone';
+export const ERROR_INVLAID_CODE = 'The code entered is not valid!';
+export const ERROR_LINK = (str: string) =>  `Unable to link with ${str}, Please check your login and try again`;
+export const ERROR_LOGIN =  'There was a problem logging you in, please refresh and try again';
+export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and passoword, and try again';
+export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page 😓, try again in a couple minutes';
+export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed 😓';
+export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`;
+export const ERROR_REGISTRATION = (str: string) =>  `Registration failed 😔, ${str}`;
+export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year';
+export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins';
+export const ERROR_SOMETHING_WENT_WRONG = "Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app";
+export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again";
+export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again";
+export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile. Please check username and try again';
+export const ERROR_UNABLE_TO_VIEW_PROFILE = 'Unable to view this profile';
+export const ERROR_UPLOAD = 'An error occurred while uploading. Please try again!';
+export const ERROR_UPLOAD_LARGE_PROFILE_PIC = "Can't have the first image seen on the profile be blank, please upload a large picture";
+export const ERROR_UPLOAD_MOMENT = 'Unable to upload moment. Please retry';
+export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pic to represent you, please upload a small profile picture";
+export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓';
+export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`;
+export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones';
+export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
+export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
+export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
+export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
+export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index afc5be99..78f113cc 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -76,14 +76,6 @@ const Onboarding: React.FC = () => {
                 outputRange: [0, 0.25, 0.7, 1],
               }),
             },
-            overlayStyle: {
-              backgroundColor: '#505050',
-              opacity: progress.interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, 0.9],
-                extrapolate: 'clamp',
-              }),
-            },
           }),
         }}
       />
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index d6d47b02..219a0be9 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -17,6 +17,10 @@ import {NotificationType, ScreenType} from '../../types';
 import {getDateAge, SCREEN_HEIGHT} from '../../utils';
 
 const NotificationsScreen: React.FC = () => {
+  const {user: loggedInUser} = useSelector((state: RootState) => state.user);
+  const {moments: loggedInUserMoments} = useSelector(
+    (state: RootState) => state.moments,
+  );
   const [refreshing, setRefreshing] = useState(false);
   // used for figuring out which ones are unread
   const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
@@ -95,7 +99,11 @@ const NotificationsScreen: React.FC = () => {
   }, [lastViewed, notifications]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
-    <Notification item={item} screenType={ScreenType.Notifications} />
+    <Notification
+      item={item}
+      screenType={ScreenType.Notifications}
+      moments={item.notification_type === 'CMT' ? loggedInUserMoments : []}
+    />
   );
 
   const renderSectionHeader = ({section: {title, data}}) =>
@@ -127,7 +135,7 @@ const NotificationsScreen: React.FC = () => {
 
 const styles = StyleSheet.create({
   header: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     marginTop: '5%',
     alignSelf: 'flex-start',
     flexDirection: 'column',
@@ -149,10 +157,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#f3f2f2',
   },
   sectionHeader: {
-    marginLeft: '5%',
+    marginLeft: '8%',
     marginTop: '5%',
     marginBottom: '2%',
-    fontSize: 16,
+    fontSize: 15,
   },
 });
 
diff --git a/src/screens/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx
index 5589ea9e..a3acbbb7 100644
--- a/src/screens/onboarding/CategorySelection.tsx
+++ b/src/screens/onboarding/CategorySelection.tsx
@@ -15,11 +15,12 @@ import {useDispatch, useSelector} from 'react-redux';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {Background, MomentCategory} from '../../components';
 import {MOMENT_CATEGORIES} from '../../constants';
+import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings';
 import {OnboardingStackParams} from '../../routes';
 import {fcmService, postMomentCategories} from '../../services';
 import {
-  updateMomentCategories,
   updateIsOnboardedUser,
+  updateMomentCategories,
 } from '../../store/actions/';
 import {RootState} from '../../store/rootReducer';
 import {BackgroundGradientType, CategorySelectionScreenType} from '../../types';
@@ -180,7 +181,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
       }
     } catch (error) {
       console.log(error);
-      Alert.alert('There was a problem');
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     }
   };
 
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index cc7cd678..903a9912 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -31,6 +31,12 @@ import {
 } from 'react-native';
 
 import {BackgroundGradientType} from '../../types';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_INVALID_INVITATION_CODE,
+  ERROR_INVLAID_CODE,
+  ERROR_VERIFICATION_FAILED_SHORT,
+} from '../../constants/strings';
 
 type InvitationCodeVerificationScreenNavigationProp = StackNavigationProp<
   OnboardingStackParams,
@@ -66,23 +72,20 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
           },
         );
 
-        if (verifyInviteCodeResponse.status == 200) {
+        if (verifyInviteCodeResponse.status === 200) {
           navigation.navigate('RegistrationOne');
         } else {
-          Alert.alert('Invalid invitation code 🤔');
+          Alert.alert(ERROR_INVALID_INVITATION_CODE);
         }
       } catch (error) {
-        Alert.alert(
-          'Verifiation failed 😓',
-          'Please double-check your network connection and retry.',
-        );
+        Alert.alert(ERROR_VERIFICATION_FAILED_SHORT, ERROR_DOUBLE_CHECK_CONNECTION);
         return {
           name: 'Verification error',
           description: error,
         };
       }
     } else {
-      Alert.alert('The code entered is not valid!');
+      Alert.alert(ERROR_INVLAID_CODE);
     }
   };
 
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index d1717fc1..8974e000 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -1,30 +1,37 @@
-import React, {useEffect, useRef, useState} from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useEffect, useRef, useState} from 'react';
 import {
-  View,
-  Text,
   Alert,
-  StatusBar,
   Image,
-  TouchableOpacity,
-  StyleSheet,
   KeyboardAvoidingView,
   Platform,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
 } from 'react-native';
-import {fcmService} from '../../services';
-import {OnboardingStackParams} from '../../routes/onboarding';
-import {Background, TaggInput, SubmitButton} from '../../components';
+import SplashScreen from 'react-native-splash-screen';
+import {useDispatch} from 'react-redux';
+import {Background, SubmitButton, TaggInput} from '../../components';
 import {
-  usernameRegex,
   LOGIN_ENDPOINT,
   TAGG_LIGHT_PURPLE,
+  usernameRegex,
 } from '../../constants';
-import AsyncStorage from '@react-native-community/async-storage';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_FAILED_LOGIN_INFO,
+  ERROR_INVALID_LOGIN,
+  ERROR_LOGIN_FAILED,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+} from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes/onboarding';
+import {fcmService} from '../../services';
 import {BackgroundGradientType, UserType} from '../../types';
-import {useDispatch} from 'react-redux';
 import {userLogin} from '../../utils';
-import SplashScreen from 'react-native-splash-screen';
 
 type VerificationScreenRouteProp = RouteProp<OnboardingStackParams, 'Login'>;
 type VerificationScreenNavigationProp = StackNavigationProp<
@@ -167,28 +174,19 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
           } catch (err) {
             setUser(NO_USER);
             console.log(data);
-            Alert.alert('Auth token storage failed', 'Please login again!');
+            Alert.alert(ERROR_INVALID_LOGIN);
           }
         } else if (statusCode === 401) {
-          Alert.alert(
-            'Login failed 😔',
-            'Try re-entering your login information.',
-          );
+          Alert.alert(ERROR_FAILED_LOGIN_INFO);
         } else {
-          Alert.alert(
-            'Something went wrong! 😭',
-            "Would you believe me if I told you that I don't know what happened?",
-          );
+          Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
         }
       } else {
         setForm({...form, attemptedSubmit: false});
         setTimeout(() => setForm({...form, attemptedSubmit: true}));
       }
     } catch (error) {
-      Alert.alert(
-        'Login failed 😓',
-        'Please double-check your network connection and retry.',
-      );
+      Alert.alert(ERROR_LOGIN_FAILED, ERROR_DOUBLE_CHECK_CONNECTION);
       return {
         name: 'Login error',
         description: error,
diff --git a/src/screens/onboarding/ProfileOnboarding.tsx b/src/screens/onboarding/ProfileOnboarding.tsx
index 1f8e58da..127cd9cd 100644
--- a/src/screens/onboarding/ProfileOnboarding.tsx
+++ b/src/screens/onboarding/ProfileOnboarding.tsx
@@ -32,6 +32,14 @@ import {BackgroundGradientType} from '../../types';
 import {PickerSelectProps} from 'react-native-picker-select';
 import Animated from 'react-native-reanimated';
 import {SCREEN_WIDTH} from '../../utils';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_PROFILE_CREATION_SHORT,
+  ERROR_SELECT_CLASS_YEAR,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+  ERROR_UPLOAD_LARGE_PROFILE_PIC,
+  ERROR_UPLOAD_SMALL_PROFILE_PIC,
+} from '../../constants/strings';
 
 type ProfileOnboardingScreenRouteProp = RouteProp<
   OnboardingStackParams,
@@ -260,15 +268,15 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
 
   const handleSubmit = async () => {
     if (!form.largePic) {
-      Alert.alert('Please select a Header image!');
+      Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC);
       return;
     }
     if (!form.smallPic) {
-      Alert.alert('Please select a Profile Picture!');
+      Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC);
       return;
     }
     if (form.classYear === -1) {
-      Alert.alert('Please select Class Year');
+      Alert.alert(ERROR_SELECT_CLASS_YEAR);
       return;
     }
     if (!form.attemptedSubmit) {
@@ -363,16 +371,10 @@ const ProfileOnboarding: React.FC<ProfileOnboardingProps> = ({
           data.error || 'Something went wrong! 😭',
         );
       } else {
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
       }
     } catch (error) {
-      Alert.alert(
-        'Profile creation failed 😓',
-        'Please double-check your network connection and retry.',
-      );
+      Alert.alert(ERROR_PROFILE_CREATION_SHORT, ERROR_DOUBLE_CHECK_CONNECTION);
       return {
         name: 'Profile creation error',
         description: error,
diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx
index 54c4e210..2a1d884d 100644
--- a/src/screens/onboarding/RegistrationOne.tsx
+++ b/src/screens/onboarding/RegistrationOne.tsx
@@ -28,6 +28,7 @@ import {SEND_OTP_ENDPOINT} from '../../constants';
 
 import {phoneRegex} from '../../constants';
 import {BackgroundGradientType, VerificationScreenType} from '../../types';
+import {ERROR_EMAIL_IN_USE, ERROR_SERVER_DOWN} from '../../constants/strings';
 
 type RegistrationScreenOneRouteProp = RouteProp<
   OnboardingStackParams,
@@ -96,14 +97,9 @@ const RegistrationOne: React.FC<RegistrationOneProps> = ({navigation}) => {
             screenType: VerificationScreenType.Phone,
           });
         } else if (otpStatusCode === 409) {
-          Alert.alert(
-            'This phone number is already registered with us, please use another email.',
-          );
+          Alert.alert(ERROR_EMAIL_IN_USE);
         } else {
-          Alert.alert(
-            "Looks like Our phone servers might be down  😓'",
-            "Try again in a couple minutes. We're sorry for the inconvenience.",
-          );
+          Alert.alert(ERROR_SERVER_DOWN);
         }
       } else {
         setForm({...form, attemptedSubmit: false});
diff --git a/src/screens/onboarding/RegistrationThree.tsx b/src/screens/onboarding/RegistrationThree.tsx
index 52a6de84..03348e6b 100644
--- a/src/screens/onboarding/RegistrationThree.tsx
+++ b/src/screens/onboarding/RegistrationThree.tsx
@@ -30,6 +30,11 @@ import {
 import {passwordRegex, usernameRegex, REGISTER_ENDPOINT} from '../../constants';
 import AsyncStorage from '@react-native-community/async-storage';
 import {BackgroundGradientType} from '../../types';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_REGISTRATION,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+} from '../../constants/strings';
 
 type RegistrationScreenThreeRouteProp = RouteProp<
   OnboardingStackParams,
@@ -189,12 +194,9 @@ const RegistrationThree: React.FC<RegistrationThreeProps> = ({
               console.log(err);
             }
           } else if (statusCode === 409) {
-            Alert.alert('Registration failed 😔', `${data}`);
+            Alert.alert(ERROR_REGISTRATION(data));
           } else {
-            Alert.alert(
-              'Something went wrong! 😭',
-              "Would you believe me if I told you that I don't know what happened?",
-            );
+            Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
           }
         } else {
           Alert.alert(
@@ -207,10 +209,7 @@ const RegistrationThree: React.FC<RegistrationThreeProps> = ({
         setTimeout(() => setForm({...form, attemptedSubmit: true}));
       }
     } catch (error) {
-      Alert.alert(
-        'Registration failed 😓',
-        'Please double-check your network connection and retry.',
-      );
+      Alert.alert(ERROR_REGISTRATION(ERROR_DOUBLE_CHECK_CONNECTION));
       return {
         name: 'Registration error',
         description: error,
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index 2f67d8c8..707e621a 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -23,6 +23,7 @@ import {
 
 import {nameRegex, emailRegex} from '../../constants';
 import {BackgroundGradientType} from '../../types';
+import {ERROR_NEXT_PAGE} from '../../constants/strings';
 
 type RegistrationScreenTwoRouteProp = RouteProp<
   OnboardingStackParams,
@@ -143,10 +144,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
         setTimeout(() => setForm({...form, attemptedSubmit: true}));
       }
     } catch (error) {
-      Alert.alert(
-        'There was a problem while loading the next page 😓',
-        "Try again in a couple minutes. We're sorry for the inconvenience.",
-      );
+      Alert.alert(ERROR_NEXT_PAGE);
       return {
         name: 'Navigation error',
         description: error,
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index c808f30b..0fbe0d91 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -49,6 +49,10 @@ interface VerificationProps {
 }
 
 import {codeRegex} from '../../constants';
+import {
+  ERROR_INVALID_VERIFICATION_CODE_FORMAT,
+  ERROR_SOMETHING_WENT_WRONG,
+} from '../../constants/strings';
 
 const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
   const [value, setValue] = React.useState('');
@@ -93,10 +97,10 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
         }
       } catch (error) {
         console.log(error);
-        Alert.alert('Something went wrong');
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG);
       }
     } else {
-      Alert.alert('Please enter a valid 6 digit code');
+      Alert.alert(ERROR_INVALID_VERIFICATION_CODE_FORMAT);
     }
   };
 
@@ -115,7 +119,7 @@ const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
       }
     } catch (error) {
       console.log(error);
-      Alert.alert('Something went wrong');
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     }
   };
 
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 5537d6bf..bc85d338 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,30 +1,27 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
 import {
-  StyleSheet,
-  View,
   Image,
-  Alert,
   Keyboard,
-  TouchableWithoutFeedback,
   KeyboardAvoidingView,
   Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
 } from 'react-native';
 import {Button} from 'react-native-elements';
-import {SearchBackground, TaggBigInput} from '../../components';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
-import AsyncStorage from '@react-native-community/async-storage';
-import {RouteProp} from '@react-navigation/native';
+import {useDispatch, useSelector} from 'react-redux';
 import {MainStackParams} from 'src/routes';
-import {StackNavigationProp} from '@react-navigation/stack';
+import {SearchBackground, TaggBigInput} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
-import {MOMENTS_ENDPOINT} from '../../constants';
-import {useDispatch, useSelector} from 'react-redux';
+import {postMoment} from '../../services';
 import {
   loadUserMoments,
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {postMoment} from '../../services';
+import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index d86ae7cb..3fea14bf 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -40,6 +40,12 @@ import {RootState} from '../../store/rootReducer';
 import {useDispatch, useSelector} from 'react-redux';
 import {loadUserData} from '../../store/actions';
 import {BackgroundGradientType} from '../../types';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+  ERROR_UPLOAD_LARGE_PROFILE_PIC,
+  ERROR_UPLOAD_SMALL_PROFILE_PIC,
+} from '../../constants/strings';
 
 type EditProfileNavigationProp = StackNavigationProp<
   ProfileStackParams,
@@ -250,11 +256,11 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
 
   const handleSubmit = useCallback(async () => {
     if (!form.largePic) {
-      Alert.alert('Please select a Header image!');
+      Alert.alert(ERROR_UPLOAD_LARGE_PROFILE_PIC);
       return;
     }
     if (!form.smallPic) {
-      Alert.alert('Please select a Profile Picture!');
+      Alert.alert(ERROR_UPLOAD_SMALL_PROFILE_PIC);
       return;
     }
     if (!form.attemptedSubmit) {
@@ -355,13 +361,10 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
           data.error || 'Something went wrong! 😭',
         );
       } else {
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
       }
     } catch (error) {
-      Alert.alert('Please double-check your network connection and retry.');
+      Alert.alert(ERROR_DOUBLE_CHECK_CONNECTION);
       return {
         name: 'Profile creation error',
         description: error,
@@ -442,7 +445,7 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
                     valid={form.isValidBio}
                     attemptedSubmit={form.attemptedSubmit}
                     invalidWarning={
-                      'Bio must be less than 150 characters and must contain valid characters'
+                      'Bio must be less than 150 characters'
                     }
                     width={280}
                     value={form.bio}
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 1b9a1049..0ea96cd2 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -3,7 +3,7 @@ import {StatusBar} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {Content, Cover, TabsGradient} from '../../components';
 import {RouteProp, useFocusEffect} from '@react-navigation/native';
-import {ProfileStackParams} from '../../routes/';
+import {MainStackParams} from '../../routes/';
 import {resetScreenType} from '../../store/actions';
 import {useDispatch, useStore} from 'react-redux';
 import {DUMMY_USERID} from '../../store/initialStates';
@@ -13,7 +13,7 @@ import {DUMMY_USERID} from '../../store/initialStates';
  * including posts, messaging, and settings
  */
 
-type ProfileScreenRouteProps = RouteProp<ProfileStackParams, 'Profile'>;
+type ProfileScreenRouteProps = RouteProp<MainStackParams, 'Profile'>;
 
 interface ProfileOnboardingProps {
   route: ProfileScreenRouteProps;
diff --git a/src/services/BlockUserService.ts b/src/services/BlockUserService.ts
index 21e259b6..12ea0184 100644
--- a/src/services/BlockUserService.ts
+++ b/src/services/BlockUserService.ts
@@ -2,6 +2,7 @@
 
 import {Alert} from 'react-native';
 import {BLOCK_USER_ENDPOINT} from '../constants';
+import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../constants/strings';
 
 export const loadBlockedUsers = async (userId: string, token: string) => {
   try {
@@ -44,18 +45,12 @@ export const blockOrUnblockUser = async (
       return true;
     } else {
       console.log(await response.json());
-      Alert.alert(
-        'Something went wrong! 😭',
-        "Would you believe me if I told you that I don't know what happened?",
-      );
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
       return false;
     }
   } catch (error) {
     console.log(error);
-    Alert.alert(
-      'Something went wrong! 😭',
-      "Would you believe me if I told you that I don't know what happened?",
-    );
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
     return false;
   }
 };
@@ -77,18 +72,12 @@ export const isUserBlocked = async (
 
     if (Math.floor(response.status / 100) === 2) {
       const data = await response.json();
-      return data['is_blocked'];
+      return data.is_blocked;
     } else {
       console.log(await response.json());
-      Alert.alert(
-        'Something went wrong! 😭',
-        "Would you believe me if I told you that I don't know what happened?",
-      );
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
     }
   } catch (error) {
-    Alert.alert(
-      'Something went wrong! 😭',
-      "Would you believe me if I told you that I don't know what happened?",
-    );
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
   }
 };
diff --git a/src/services/MomentCategoryService.ts b/src/services/MomentCategoryService.ts
index 57e64830..bb2c5542 100644
--- a/src/services/MomentCategoryService.ts
+++ b/src/services/MomentCategoryService.ts
@@ -1,5 +1,6 @@
 import {Alert} from 'react-native';
 import {MOMENT_CATEGORY_ENDPOINT} from '../constants';
+import {ERROR_CATEGORY_CREATION} from '../constants/strings';
 
 export const loadMomentCategories: (
   userId: string,
@@ -44,10 +45,10 @@ export const postMomentCategories: (
     const status = response.status;
     const data = await response.json();
     if (status === 200) {
-      return data['profile_completion_stage'];
+      return data.profile_completion_stage;
     } else {
-      Alert.alert('There was a problem updating categories!');
-      console.log('Unable to update categories');
+      Alert.alert(ERROR_CATEGORY_CREATION);
+      console.log('Could not post categories!');
     }
   } catch (err) {
     console.log(err);
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 91ecf712..514b674c 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -1,6 +1,16 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {Alert} from 'react-native';
-import {COMMENTS_ENDPOINT, MOMENTS_ENDPOINT} from '../constants';
+import RNFetchBlob from 'rn-fetch-blob';
+import {
+  COMMENTS_ENDPOINT,
+  MOMENTS_ENDPOINT,
+  MOMENT_THUMBNAIL_ENDPOINT,
+} from '../constants';
+import {
+  ERROR_FAILED_TO_COMMENT,
+  ERROR_UPLOAD,
+  SUCCESS_PIC_UPLOAD,
+} from '../constants/strings';
 import {MomentType} from '../types';
 import {checkImageUploadStatus} from '../utils';
 
@@ -48,20 +58,12 @@ export const postMomentComment = async (
       },
       body: request,
     });
-    const status = response.status;
-    if (status === 200) {
-      const response_data = await response.json();
-      return response_data;
-    } else {
-      Alert.alert('Something went wrong! 😭', 'Not able to post a comment');
-      return {};
+    if (response.status !== 200) {
+      throw 'server error';
     }
+    return await response.json();
   } catch (error) {
-    Alert.alert(
-      'Something went wrong! 😭',
-      'Not able to post a comment',
-      error,
-    );
+    Alert.alert(ERROR_FAILED_TO_COMMENT);
     return {};
   }
 };
@@ -136,15 +138,15 @@ export const postMoment: (
     });
     let statusCode = response.status;
     let data = await response.json();
-    if (statusCode === 200 && checkImageUploadStatus(data['moments'])) {
-      Alert.alert('The picture was uploaded successfully!');
-      return data['profile_completion_stage'];
+    if (statusCode === 200 && checkImageUploadStatus(data.moments)) {
+      Alert.alert(SUCCESS_PIC_UPLOAD);
+      return data.profile_completion_stage;
     } else {
-      Alert.alert('An error occured while uploading. Please try again!');
+      Alert.alert(ERROR_UPLOAD);
     }
   } catch (err) {
     console.log(err);
-    Alert.alert('An error occured during authenticaion. Please login again!');
+    Alert.alert(ERROR_UPLOAD);
   }
   return undefined;
 };
@@ -193,3 +195,24 @@ export const deleteMoment = async (momentId: string) => {
     return false;
   }
 };
+
+export const loadMomentThumbnail = async (momentId: string) => {
+  try {
+    const token = await AsyncStorage.getItem('token');
+    const response = await RNFetchBlob.config({
+      fileCache: true,
+      appendExt: 'jpg',
+    }).fetch('GET', MOMENT_THUMBNAIL_ENDPOINT + `${momentId}/`, {
+      Authorization: 'Token ' + token,
+    });
+    const status = response.info().status;
+    if (status === 200) {
+      return response.path();
+    } else {
+      return undefined;
+    }
+  } catch (error) {
+    console.log(error);
+    return undefined;
+  }
+};
diff --git a/src/services/ReportingService.ts b/src/services/ReportingService.ts
index 1563d086..8c0a4bfb 100644
--- a/src/services/ReportingService.ts
+++ b/src/services/ReportingService.ts
@@ -3,6 +3,10 @@
 import {REPORT_ISSUE_ENDPOINT} from '../constants';
 import {Alert} from 'react-native';
 import AsyncStorage from '@react-native-community/async-storage';
+import {
+  ERROR_SOMETHING_WENT_WRONG,
+  MARKED_AS_MSG,
+} from '../constants/strings';
 
 export const sendReport = async (
   moment_id: string,
@@ -25,15 +29,15 @@ export const sendReport = async (
 
     let statusCode = response.status;
     if (statusCode === 200) {
-      Alert.alert('Marked as ' + message.split(' ')[2]);
+      Alert.alert(MARKED_AS_MSG(message.split(' ')[2]));
     } else {
-      Alert.alert('Something went wrong!', 'Please try again.');
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     }
     if (callback) {
       callback();
     }
   } catch (error) {
-    Alert.alert('Something went wrong!', 'Please try again.');
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     console.log(
       'Something went wrong! 😭',
       'Unable able to retrieve data',
diff --git a/src/services/SocialLinkingService.ts b/src/services/SocialLinkingService.ts
index 4a01ee50..1423c8c0 100644
--- a/src/services/SocialLinkingService.ts
+++ b/src/services/SocialLinkingService.ts
@@ -12,6 +12,8 @@ import {
   LINK_TWITTER_ENDPOINT,
   LINK_TWITTER_OAUTH,
 } from '../constants';
+import {COMING_SOON_MSG, ERROR_LINK, SUCCESS_LINK} from '../constants/strings';
+import {CategorySelection} from '../screens';
 
 // A list of endpoint strings for all the integrated socials
 export const integratedEndpoints: {[social: string]: [string, string]} = {
@@ -124,7 +126,7 @@ export const handlePressForAuthBrowser: (
 ) => Promise<boolean> = async (socialType: string) => {
   try {
     if (!(socialType in integratedEndpoints)) {
-      Alert.alert('Coming soon!');
+      Alert.alert(COMING_SOON_MSG);
       return false;
     }
 
@@ -168,7 +170,7 @@ export const handlePressForAuthBrowser: (
           if (!success) {
             throw 'Unable to register with backend';
           }
-          Alert.alert(`Successfully linked ${socialType} 🎉`);
+          Alert.alert(SUCCESS_LINK(socialType));
           return true;
         } else if (response.type === 'cancel') {
           return false;
@@ -178,14 +180,12 @@ export const handlePressForAuthBrowser: (
       })
       .catch((error) => {
         console.log(error);
-        Alert.alert(
-          `Something went wrong, we can't link with ${socialType} 😔`,
-        );
+        Alert.alert(ERROR_LINK(socialType));
         return false;
       });
   } catch (error) {
     console.log(error);
-    Alert.alert(`Something went wrong, we can't link with ${socialType} 😔`);
+    Alert.alert(ERROR_LINK(socialType));
   }
   return false;
 };
diff --git a/src/services/UserFriendsServices.ts b/src/services/UserFriendsServices.ts
index 18a92481..f2e15824 100644
--- a/src/services/UserFriendsServices.ts
+++ b/src/services/UserFriendsServices.ts
@@ -3,6 +3,7 @@
 import {Alert} from 'react-native';
 import {FriendshipStatusType} from 'src/types';
 import {FRIENDS_ENDPOINT} from '../constants';
+import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../constants/strings';
 
 export const loadFriends = async (userId: string, token: string) => {
   try {
@@ -104,18 +105,12 @@ export const declineFriendRequestService = async (
       return true;
     } else {
       console.log(await response.json());
-      Alert.alert(
-        'Something went wrong! 😭',
-        "Would you believe me if I told you that I don't know what happened?",
-      );
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
       return false;
     }
   } catch (error) {
     console.log(error);
-    Alert.alert(
-      'Something went wrong! 😭',
-      "Would you believe me if I told you that I don't know what happened?",
-    );
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
     return false;
   }
 };
diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts
index c9ec3604..75d7d367 100644
--- a/src/services/UserProfileService.ts
+++ b/src/services/UserProfileService.ts
@@ -17,6 +17,17 @@ import {
   SEND_OTP_ENDPOINT,
   PROFILE_PHOTO_THUMBNAIL_ENDPOINT,
 } from '../constants';
+import {
+  ERROR_DOUBLE_CHECK_CONNECTION,
+  ERROR_DUP_OLD_PWD,
+  ERROR_INVALID_PWD_CODE,
+  ERROR_PWD_ACCOUNT,
+  ERROR_SOMETHING_WENT_WRONG,
+  ERROR_SOMETHING_WENT_WRONG_REFRESH,
+  ERROR_VERIFICATION_FAILED_SHORT,
+  SUCCESS_PWD_RESET,
+  SUCCESS_VERIFICATION_CODE_SENT,
+} from '../constants/strings';
 
 export const loadProfileInfo = async (token: string, userId: string) => {
   try {
@@ -60,10 +71,7 @@ export const loadProfileInfo = async (token: string, userId: string) => {
       throw 'Unable to load profile data';
     }
   } catch (error) {
-    Alert.alert(
-      'Something went wrong! 😭',
-      "Would you believe me if I told you that I don't know what happened?",
-    );
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
   }
 };
 
@@ -178,10 +186,7 @@ export const handlePasswordResetRequest = async (value: string) => {
           `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${TAGG_CUSTOMER_SUPPORT}`,
         );
       } else {
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
       }
 
       console.log(response);
@@ -189,7 +194,7 @@ export const handlePasswordResetRequest = async (value: string) => {
     }
   } catch (error) {
     console.log(error);
-    Alert.alert('Something went wrong! 😭', 'Looks like our servers are down');
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     return false;
   }
 };
@@ -215,16 +220,11 @@ export const handlePasswordCodeVerification = async (
       return true;
     } else {
       if (status == 404) {
-        Alert.alert(
-          `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${TAGG_CUSTOMER_SUPPORT}`,
-        );
+        Alert.alert(ERROR_PWD_ACCOUNT(TAGG_CUSTOMER_SUPPORT));
       } else if (status === 401) {
-        Alert.alert('Looks like you have entered the wrong code');
+        Alert.alert(ERROR_INVALID_PWD_CODE);
       } else {
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG);
       }
 
       console.log(response);
@@ -232,7 +232,7 @@ export const handlePasswordCodeVerification = async (
     }
   } catch (error) {
     console.log(error);
-    Alert.alert('Something went wrong! 😭', 'Looks like our servers are down');
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     return false;
   }
 };
@@ -252,27 +252,22 @@ export const handlePasswordReset = async (value: string, password: string) => {
     });
     const status = response.status;
     if (status === 200) {
-      Alert.alert('Your password was reset successfully');
+      Alert.alert(SUCCESS_PWD_RESET);
       return true;
     } else {
       if (status == 404) {
-        Alert.alert(
-          `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${TAGG_CUSTOMER_SUPPORT}`,
-        );
+        Alert.alert(ERROR_PWD_ACCOUNT(TAGG_CUSTOMER_SUPPORT));
       } else if (status == 406) {
-        Alert.alert('You may not use an already used password');
+        Alert.alert(ERROR_DUP_OLD_PWD);
       } else {
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
       }
       console.log(response);
       return false;
     }
   } catch (error) {
     console.log(error);
-    Alert.alert('Something went wrong! 😭', 'Looks like our servers are down');
+    Alert.alert(ERROR_SOMETHING_WENT_WRONG);
     return false;
   }
 };
@@ -296,17 +291,11 @@ export const verifyOtp = async (phone: string, otp: string) => {
           'Try again. Tap the resend code button if you need a new code.',
         );
       } else {
-        Alert.alert(
-          'Something went wrong! 😭',
-          "Would you believe me if I told you that I don't know what happened?",
-        );
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG_REFRESH);
       }
     }
   } catch (error) {
-    Alert.alert(
-      'Verifiation failed 😓',
-      'Please double-check your network connection and retry.',
-    );
+    Alert.alert(ERROR_VERIFICATION_FAILED_SHORT, ERROR_DOUBLE_CHECK_CONNECTION);
     return {
       name: 'Verification error',
       description: error,
@@ -326,13 +315,10 @@ export const sendOtp = async (phone: string) => {
 
     let status = response.status;
     if (status === 200) {
-      Alert.alert(
-        'New verification code sent!',
-        'Check your phone messages for your code.',
-      );
+      Alert.alert(SUCCESS_VERIFICATION_CODE_SENT);
       return true;
     } else {
-      Alert.alert('Something went wrong!');
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
       return false;
     }
   } catch (error) {