From 7d5ca57dde9fdf135d697e27defba9199761754c Mon Sep 17 00:00:00 2001
From: ankit-thanekar007 <ankit.thanekar007@gmail.com>
Date: Tue, 9 Mar 2021 10:23:26 -0800
Subject: TMA-688-SP Default with Modal

---
 src/screens/search/RequestContactsAccess.tsx | 119 +++++++++++++++------------
 1 file changed, 65 insertions(+), 54 deletions(-)

(limited to 'src/screens/search')

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>
   );
 };
 
-- 
cgit v1.2.3-70-g09d2