TMA-688-SP Default with Modal

3 files changed, 73 insertions, 62 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 7104b429..91f41fe4 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -113,16 +113,16 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           ...headerBarOptions('white', ''),
         }}
       />
-      {isSearchTab &&
+      {isSuggestedPeopleTab &&
         (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
           <MainStack.Screen
-            name="Search"
-            component={SearchScreen}
+            name="SuggestedPeople"
+            component={SuggestedPeopleScreen}
             initialParams={{screenType}}
           />
         ) : (
           <MainStack.Screen
-            name="Search"
+            name="SuggestedPeople"
             component={RequestContactsAccess}
             initialParams={{screenType}}
           />
@@ -134,10 +134,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           initialParams={{screenType}}
         />
       )}
-      {isSuggestedPeopleTab && (
+      {isSearchTab && (
         <MainStack.Screen
-          name="SuggestedPeople"
-          component={SuggestedPeopleScreen}
+          name="Search"
+          component={SearchScreen}
           initialParams={{screenType}}
         />
       )}
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 5d4f7cf2..e9208525 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -65,7 +65,7 @@ const NavigationBar: React.FC = () => {
           }
         },
       })}
-      initialRouteName={isOnboardedUser ? 'Profile' : 'Search'}
+      initialRouteName={isOnboardedUser ? 'Profile' : 'SuggestedPeople'}
       tabBarOptions={{
         showLabel: false,
         style: {
diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx
index 08548c69..f5d2de1a 100644
--- a/src/screens/search/RequestContactsAccess.tsx
+++ b/src/screens/search/RequestContactsAccess.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Modal,
   StyleSheet,
   View,
   Text,
@@ -19,7 +20,7 @@ import AsyncStorage from '@react-native-community/async-storage';
 
 const RequestContactsAccess: React.FC = () => {
   const navigation = useNavigation();
-
+  const [isVisible, setVisible] = React.useState(true);
   const handleAllowAccess = async () => {
     try {
       let permission = await checkPermission();
@@ -27,81 +28,91 @@ const RequestContactsAccess: React.FC = () => {
         await requestPermission();
       }
       await AsyncStorage.setItem('respondedToAccessContacts', 'true');
-      navigation.navigate('Search');
+      navigation.navigate('SuggestedPeople');
     } catch (err) {
       console.log(
         'Unable to check and request permission to get access to user contacts',
       );
     }
+    setVisible(false);
   };
 
   const handleDontAllowAccess = async () => {
     try {
       await AsyncStorage.setItem('respondedToAccessContacts', 'true');
-      navigation.navigate('Search');
+      navigation.navigate('SuggestedPeople');
     } catch (err) {
       console.log(
         'Unable to check and request permission to get access to user contacts',
       );
     }
+    setVisible(false);
   };
 
   return (
-    <LinearGradient
-      colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Light]}
-      useAngle={true}
-      angle={154.72}
-      angleCenter={{x: 0.5, y: 0.5}}
-      style={{flex: 1}}>
-      <SafeAreaView>
-        <View style={{height: SCREEN_HEIGHT}}>
-          <Animated.ScrollView
-            showsHorizontalScrollIndicator={false}
-            showsVerticalScrollIndicator={false}
-            scrollEnabled={isIPhoneX() ? false : true}>
-            <StatusBar barStyle="light-content" translucent={false} />
-            <View style={styles.mainContainer}>
-              <Image
-                source={require('../../assets/icons/findFriends/find-friend-icon.png')}
-                style={styles.image}
-              />
-              <Text style={styles.title}>FIND FRIENDS!</Text>
-              <Text style={styles.subtext}>
-                This is so you can find your friends already on here! Isn’t a
-                party better when your favorite people are there?
-              </Text>
-              <View style={styles.bulletPointView}>
-                <Image
-                  source={require('../../assets/icons/findFriends/lock-icon.png')}
-                  style={styles.icon}
-                />
-                <Text style={styles.bulletPointText}>Always Stays Private</Text>
-              </View>
-              <View style={styles.bulletPointView}>
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={isVisible}
+      onRequestClose={() => {}}>
+      <LinearGradient
+        colors={BACKGROUND_GRADIENT_MAP[BackgroundGradientType.Light]}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={{flex: 1}}>
+        <SafeAreaView>
+          <View style={{height: SCREEN_HEIGHT}}>
+            <Animated.ScrollView
+              showsHorizontalScrollIndicator={false}
+              showsVerticalScrollIndicator={false}
+              scrollEnabled={isIPhoneX() ? false : true}>
+              <StatusBar barStyle="light-content" translucent={false} />
+              <View style={styles.mainContainer}>
                 <Image
-                  source={require('../../assets/icons/findFriends/phone-cross-icon.png')}
-                  style={styles.icon}
+                  source={require('../../assets/icons/findFriends/find-friend-icon.png')}
+                  style={styles.image}
                 />
-                <Text style={styles.bulletPointText}>
-                  We wouldn’t dare send any messages
+                <Text style={styles.title}>FIND FRIENDS!</Text>
+                <Text style={styles.subtext}>
+                  This is so you can find your friends already on here! Isn’t a
+                  party better when your favorite people are there?
                 </Text>
+                <View style={styles.bulletPointView}>
+                  <Image
+                    source={require('../../assets/icons/findFriends/lock-icon.png')}
+                    style={styles.icon}
+                  />
+                  <Text style={styles.bulletPointText}>
+                    Always Stays Private
+                  </Text>
+                </View>
+                <View style={styles.bulletPointView}>
+                  <Image
+                    source={require('../../assets/icons/findFriends/phone-cross-icon.png')}
+                    style={styles.icon}
+                  />
+                  <Text style={styles.bulletPointText}>
+                    We wouldn’t dare send any messages
+                  </Text>
+                </View>
+                <TouchableOpacity
+                  onPress={handleAllowAccess}
+                  style={styles.allowButton}>
+                  <Text style={styles.allowButtonLabel}>Allow Contacts</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  accessibilityLabel="Don't allow button"
+                  style={styles.dontAllowButton}
+                  onPress={handleDontAllowAccess}>
+                  <Text style={styles.dontAllowButtonText}>Don’t Allow</Text>
+                </TouchableOpacity>
               </View>
-              <TouchableOpacity
-                onPress={handleAllowAccess}
-                style={styles.allowButton}>
-                <Text style={styles.allowButtonLabel}>Allow Contacts</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                accessibilityLabel="Don't allow button"
-                style={styles.dontAllowButton}
-                onPress={handleDontAllowAccess}>
-                <Text style={styles.dontAllowButtonText}>Don’t Allow</Text>
-              </TouchableOpacity>
-            </View>
-          </Animated.ScrollView>
-        </View>
-      </SafeAreaView>
-    </LinearGradient>
+            </Animated.ScrollView>
+          </View>
+        </SafeAreaView>
+      </LinearGradient>
+    </Modal>
   );
 };