Merge branch 'master' into tma756-bugfix-onpress-tagg-on-sp

# Conflicts:
#	src/components/taggs/TaggsBar.tsx

4 files changed, 235 insertions, 190 deletions

diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index c7b9aeee..819ca785 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -50,7 +50,7 @@ const Routes: React.FC = () => {
       fcmService.setUpPushNotifications();
       fcmService.sendFcmTokenToServer();
     }
-  });
+  }, []);
 
   useEffect(() => {
     const checkVersion = async () => {
@@ -61,7 +61,7 @@ const Routes: React.FC = () => {
       }
     };
     checkVersion();
-  });
+  }, []);
 
   return userId && !newVersionAvailable ? <NavigationBar /> : <Onboarding />;
 };
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 9b089634..64ad9198 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -73,6 +73,7 @@ export type MainStackParams = {
     screenType: ScreenType;
     momentCategory: string;
     profileBodyHeight: number;
+    socialsBarHeight: number;
   };
   AnimatedTutorial: {
     screenType: ScreenType;
@@ -92,6 +93,9 @@ export type MainStackParams = {
     screenType: ScreenType;
   };
   SPWelcomeScreen: {};
+  ChatList: undefined;
+  Chat: undefined;
+  NewChatModal: undefined;
 };
 
 export const MainStack = createStackNavigator<MainStackParams>();
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index d855f0df..37867151 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {normalize} from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
@@ -11,6 +11,8 @@ import {
   BadgeSelection,
   CaptionScreen,
   CategorySelection,
+  ChatListScreen,
+  ChatScreen,
   CreateCustomCategory,
   DiscoverUsers,
   EditProfile,
@@ -19,20 +21,21 @@ import {
   InviteFriendsScreen,
   MomentCommentsScreen,
   MomentUploadPromptScreen,
+  NewChatModal,
   NotificationsScreen,
-  ProfileScreen,
   PrivacyScreen,
+  ProfileScreen,
   RequestContactsAccess,
   SearchScreen,
+  SettingsScreen,
   SocialMediaTaggs,
   SuggestedPeopleScreen,
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
-  SettingsScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
-import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
+import {AvatarHeaderHeight, ChatHeaderHeight, SCREEN_WIDTH} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
 
 /**
@@ -50,7 +53,6 @@ type MainStackRouteProps = RouteProp<MainStackParams, 'Profile'>;
 interface MainStackProps {
   route: MainStackRouteProps;
 }
-
 const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
   const {screenType} = route.params;
 
@@ -62,6 +64,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     'true',
   );
 
+  useEffect(() => {
+    loadResponseToAccessContacts();
+  }, []);
+
   const loadResponseToAccessContacts = () => {
     AsyncStorage.getItem('respondedToAccessContacts')
       .then((value) => {
@@ -73,8 +79,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       });
   };
 
-  loadResponseToAccessContacts();
-
   const initialRouteName = (() => {
     switch (screenType) {
       case ScreenType.Profile:
@@ -85,6 +89,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         return 'Notifications';
       case ScreenType.SuggestedPeople:
         return 'SuggestedPeople';
+      case ScreenType.Chat:
+        return 'ChatList';
     }
   })();
 
@@ -102,200 +108,228 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }),
   };
 
-  return (
-    <MainStack.Navigator
-      screenOptions={{
-        headerShown: false,
-        gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
-      }}
-      mode="card"
-      initialRouteName={initialRouteName}>
-      <MainStack.Screen
-        name="Profile"
-        component={ProfileScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('white', ''),
+  const newChatModalStyle: StackNavigationOptions = {
+    cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
+    cardOverlayEnabled: true,
+    animationEnabled: false,
+  };
+
+  const mainStackScreen = () => {
+    return (
+      <MainStack.Navigator
+        screenOptions={{
+          headerShown: false,
+          gestureResponseDistance: {horizontal: SCREEN_WIDTH * 0.6},
         }}
-      />
-      {isSuggestedPeopleTab &&
-        (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
+        mode="card"
+        initialRouteName={initialRouteName}>
+        <MainStack.Screen
+          name="Profile"
+          component={ProfileScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        {isSuggestedPeopleTab &&
+          (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
+            <MainStack.Screen
+              name="SuggestedPeople"
+              component={SuggestedPeopleScreen}
+              initialParams={{screenType}}
+            />
+          ) : (
+            <MainStack.Screen
+              name="SuggestedPeople"
+              component={RequestContactsAccess}
+              initialParams={{screenType}}
+            />
+          ))}
+        {isNotificationsTab && (
           <MainStack.Screen
-            name="SuggestedPeople"
-            component={SuggestedPeopleScreen}
+            name="Notifications"
+            component={NotificationsScreen}
             initialParams={{screenType}}
           />
-        ) : (
+        )}
+        {isSearchTab && (
           <MainStack.Screen
-            name="SuggestedPeople"
-            component={RequestContactsAccess}
+            name="Search"
+            component={SearchScreen}
             initialParams={{screenType}}
           />
-        ))}
-      {isNotificationsTab && (
+        )}
+        <MainStack.Screen
+          name="DiscoverUsers"
+          component={DiscoverUsers}
+          options={{
+            ...headerBarOptions('white', 'Discover Users'),
+          }}
+        />
+        <MainStack.Screen
+          name="SettingsScreen"
+          component={SettingsScreen}
+          options={{
+            ...headerBarOptions('white', 'Settings and Privacy'),
+          }}
+        />
+        <MainStack.Screen
+          name="PrivacyScreen"
+          component={PrivacyScreen}
+          options={{
+            ...headerBarOptions('white', 'Privacy'),
+          }}
+        />
+        <MainStack.Screen
+          name="AccountTypeScreen"
+          component={AccountType}
+          options={{
+            ...headerBarOptions('white', 'Account Type'),
+          }}
+        />
         <MainStack.Screen
-          name="Notifications"
-          component={NotificationsScreen}
+          name="AnimatedTutorial"
+          component={AnimatedTutorial}
+          options={{
+            ...tutorialModalStyle,
+          }}
           initialParams={{screenType}}
         />
-      )}
-      {isSearchTab && (
         <MainStack.Screen
-          name="Search"
-          component={SearchScreen}
+          name="CaptionScreen"
+          component={CaptionScreen}
+          options={{
+            ...modalStyle,
+            gestureEnabled: false,
+          }}
+        />
+        <MainStack.Screen
+          name="SocialMediaTaggs"
+          component={SocialMediaTaggs}
           initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('white', ''),
+            headerStyle: {height: AvatarHeaderHeight},
+          }}
         />
-      )}
-      <MainStack.Screen
-        name="DiscoverUsers"
-        component={DiscoverUsers}
-        options={{
-          ...headerBarOptions('white', 'Discover Users'),
-        }}
-      />
-      <MainStack.Screen
-        name="SettingsScreen"
-        component={SettingsScreen}
-        options={{
-          ...headerBarOptions('white', 'Settings and Privacy'),
-        }}
-      />
-      <MainStack.Screen
-        name="PrivacyScreen"
-        component={PrivacyScreen}
-        options={{
-          ...headerBarOptions('white', 'Privacy'),
-        }}
-      />
-      <MainStack.Screen
-        name="AccountTypeScreen"
-        component={AccountType}
-        options={{
-          ...headerBarOptions('white', 'Account Type'),
-        }}
-      />
-      <MainStack.Screen
-        name="AnimatedTutorial"
-        component={AnimatedTutorial}
-        options={{
-          ...tutorialModalStyle,
-        }}
-        initialParams={{screenType}}
-      />
-      <MainStack.Screen
-        name="CaptionScreen"
-        component={CaptionScreen}
-        options={{
-          ...modalStyle,
-          gestureEnabled: false,
-        }}
-      />
-      <MainStack.Screen
-        name="SocialMediaTaggs"
-        component={SocialMediaTaggs}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('white', ''),
-          headerStyle: {height: AvatarHeaderHeight},
-        }}
-      />
-      <MainStack.Screen
-        name="CategorySelection"
-        component={CategorySelection}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="CreateCustomCategory"
-        component={CreateCustomCategory}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="IndividualMoment"
-        component={IndividualMoment}
-        initialParams={{screenType}}
-        options={{
-          ...modalStyle,
-          gestureEnabled: false,
-        }}
-      />
-      <MainStack.Screen
-        name="MomentCommentsScreen"
-        component={MomentCommentsScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('black', 'Comments'),
-        }}
-      />
-      <MainStack.Screen
-        name="MomentUploadPrompt"
-        component={MomentUploadPromptScreen}
-        initialParams={{screenType}}
-        options={{
-          ...modalStyle,
-        }}
-      />
-      <MainStack.Screen
-        name="FriendsListScreen"
-        component={FriendsListScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('black', 'Friends'),
-        }}
-      />
-      <MainStack.Screen
-        name="InviteFriendsScreen"
-        component={InviteFriendsScreen}
-        initialParams={{screenType}}
-        options={{
-          ...headerBarOptions('black', 'Invites'),
-        }}
-      />
-      <MainStack.Screen
-        name="RequestContactsAccess"
-        component={RequestContactsAccess}
-        initialParams={{screenType}}
-      />
-      <MainStack.Screen
-        name="EditProfile"
-        component={EditProfile}
-        options={{
-          ...headerBarOptions('white', 'Edit Profile'),
-        }}
-      />
-      <MainStack.Screen
-        name="UpdateSPPicture"
-        component={SuggestedPeopleUploadPictureScreen}
-        initialParams={{editing: true}}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="BadgeSelection"
-        component={BadgeSelection}
-        initialParams={{editing: true}}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-      <MainStack.Screen
-        name="MutualBadgeHolders"
-        component={MutualBadgeHolders}
-        options={{...modalStyle}}
-      />
-      <MainStack.Screen
-        name="SPWelcomeScreen"
-        component={SuggestedPeopleWelcomeScreen}
-        options={{
-          ...headerBarOptions('white', ''),
-        }}
-      />
-    </MainStack.Navigator>
-  );
+        <MainStack.Screen
+          name="CategorySelection"
+          component={CategorySelection}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="CreateCustomCategory"
+          component={CreateCustomCategory}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="IndividualMoment"
+          component={IndividualMoment}
+          initialParams={{screenType}}
+          options={{
+            ...modalStyle,
+            gestureEnabled: false,
+          }}
+        />
+        <MainStack.Screen
+          name="MomentCommentsScreen"
+          component={MomentCommentsScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('black', 'Comments'),
+          }}
+        />
+        <MainStack.Screen
+          name="MomentUploadPrompt"
+          component={MomentUploadPromptScreen}
+          initialParams={{screenType}}
+          options={{
+            ...modalStyle,
+          }}
+        />
+        <MainStack.Screen
+          name="FriendsListScreen"
+          component={FriendsListScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('black', 'Friends'),
+          }}
+        />
+        <MainStack.Screen
+          name="InviteFriendsScreen"
+          component={InviteFriendsScreen}
+          initialParams={{screenType}}
+          options={{
+            ...headerBarOptions('black', 'Invites'),
+          }}
+        />
+        <MainStack.Screen
+          name="RequestContactsAccess"
+          component={RequestContactsAccess}
+          initialParams={{screenType}}
+        />
+        <MainStack.Screen
+          name="EditProfile"
+          component={EditProfile}
+          options={{
+            ...headerBarOptions('white', 'Edit Profile'),
+          }}
+        />
+        <MainStack.Screen
+          name="UpdateSPPicture"
+          component={SuggestedPeopleUploadPictureScreen}
+          initialParams={{editing: true}}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="BadgeSelection"
+          component={BadgeSelection}
+          initialParams={{editing: true}}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="MutualBadgeHolders"
+          component={MutualBadgeHolders}
+          options={{...modalStyle}}
+        />
+        <MainStack.Screen
+          name="SPWelcomeScreen"
+          component={SuggestedPeopleWelcomeScreen}
+          options={{
+            ...headerBarOptions('white', ''),
+          }}
+        />
+        <MainStack.Screen
+          name="ChatList"
+          component={ChatListScreen}
+          options={{headerTitle: 'Chats'}}
+        />
+        <MainStack.Screen
+          name="Chat"
+          component={ChatScreen}
+          options={{
+            ...headerBarOptions('black', ''),
+            headerStyle: {height: ChatHeaderHeight},
+          }}
+        />
+        <MainStack.Screen
+          name="NewChatModal"
+          component={NewChatModal}
+          options={{headerShown: false, ...newChatModalStyle}}
+        />
+      </MainStack.Navigator>
+    );
+  };
+
+  return mainStackScreen();
 };
 
 export const headerBarOptions: (
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index e9208525..9b8427e7 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -54,6 +54,8 @@ const NavigationBar: React.FC = () => {
                   disabled={!focused}
                 />
               );
+            case 'Chat':
+              return <NavigationIcon tab="Chat" disabled={!focused} />;
             case 'Profile':
               return <NavigationIcon tab="Profile" disabled={!focused} />;
             case 'SuggestedPeople':
@@ -93,6 +95,11 @@ const NavigationBar: React.FC = () => {
         initialParams={{screenType: ScreenType.Notifications}}
       />
       <Tabs.Screen
+        name="Chat"
+        component={MainStackScreen}
+        initialParams={{screenType: ScreenType.Chat}}
+      />
+      <Tabs.Screen
         name="Profile"
         component={MainStackScreen}
         initialParams={{screenType: ScreenType.Profile}}