1 files changed, 220 insertions, 199 deletions
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 48c57920..1d222040 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,7 +1,12 @@
 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 {
+  StackNavigationOptions,
+  createStackNavigator,
+  TransitionSpecs,
+} from '@react-navigation/stack';
+import {NavigationContainer} from '@react-navigation/native';
+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';
@@ -31,6 +36,7 @@ import {
   SettingsScreen,
   ChatListScreen,
   ChatScreen,
+  NewChatModal,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -52,7 +58,8 @@ type MainStackRouteProps = RouteProp<MainStackParams, 'Profile'>;
 interface MainStackProps {
   route: MainStackRouteProps;
 }
-
+const RootStack = createStackNavigator();
+const tempStack = createStackNavigator();
 const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
   const {screenType} = route.params;
 
@@ -64,6 +71,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     'true',
   );
 
+  useEffect(() => {
+    loadResponseToAccessContacts();
+  }, []);
+
   const loadResponseToAccessContacts = () => {
     AsyncStorage.getItem('respondedToAccessContacts')
       .then((value) => {
@@ -75,8 +86,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       });
   };
 
-  loadResponseToAccessContacts();
-
   const initialRouteName = (() => {
     switch (screenType) {
       case ScreenType.Profile:
@@ -106,213 +115,225 @@ 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="Notifications"
-          component={NotificationsScreen}
+          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}}
         />
-      )}
-      {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.Screen
-        name="ChatList"
-        component={ChatListScreen}
-        options={{headerTitle: 'Chats'}}
-      />
-      <MainStack.Screen
-        name="Chat"
-        component={ChatScreen}
-        options={{
-          ...headerBarOptions('black', ''),
-          headerStyle: {height: ChatHeaderHeight},
-        }}
-      />
-    </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={{headerShown: true}}
+        />
+        <MainStack.Screen
+          name="NewChatModal"
+          component={NewChatModal}
+          options={{headerShown: false, ...newChatModalStyle}}
+        />
+      </MainStack.Navigator>
+    );
+  };
+
+  return mainStackScreen();
 };
 
 export const headerBarOptions: (