aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ios/Frontend/Info.plist2
-rw-r--r--package.json1
-rw-r--r--src/assets/icons/findFriends/find-friend-icon.pngbin0 -> 100964 bytes
-rw-r--r--src/assets/icons/findFriends/lock-icon.pngbin0 -> 7272 bytes
-rw-r--r--src/assets/icons/findFriends/phone-cross-icon.pngbin0 -> 16729 bytes
-rw-r--r--src/routes/main/MainStackNavigator.tsx3
-rw-r--r--src/routes/main/MainStackScreen.tsx33
-rw-r--r--src/screens/search/RequestContactsAccess.tsx186
-rw-r--r--src/screens/search/index.ts1
9 files changed, 218 insertions, 8 deletions
diff --git a/ios/Frontend/Info.plist b/ios/Frontend/Info.plist
index dd9ebb83..0d75ca35 100644
--- a/ios/Frontend/Info.plist
+++ b/ios/Frontend/Info.plist
@@ -2,6 +2,8 @@
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
+ <key>NSContactsUsageDescription</key>
+ <string>This helps you quickly get in touch with friends on the app and more</string>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleDisplayName</key>
diff --git a/package.json b/package.json
index a40111a0..0451e743 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
"react-native": "0.63.3",
"react-native-animatable": "^1.3.3",
"react-native-confirmation-code-field": "^6.5.0",
+ "react-native-contacts": "^6.0.4",
"react-native-date-picker": "^3.2.5",
"react-native-device-info": "^7.3.1",
"react-native-elements": "^2.3.2",
diff --git a/src/assets/icons/findFriends/find-friend-icon.png b/src/assets/icons/findFriends/find-friend-icon.png
new file mode 100644
index 00000000..62abcac0
--- /dev/null
+++ b/src/assets/icons/findFriends/find-friend-icon.png
Binary files differ
diff --git a/src/assets/icons/findFriends/lock-icon.png b/src/assets/icons/findFriends/lock-icon.png
new file mode 100644
index 00000000..20ccbe2f
--- /dev/null
+++ b/src/assets/icons/findFriends/lock-icon.png
Binary files differ
diff --git a/src/assets/icons/findFriends/phone-cross-icon.png b/src/assets/icons/findFriends/phone-cross-icon.png
new file mode 100644
index 00000000..0801e9f1
--- /dev/null
+++ b/src/assets/icons/findFriends/phone-cross-icon.png
Binary files differ
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 663aeaea..74993af9 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -14,6 +14,9 @@ export type MainStackParams = {
Search: {
screenType: ScreenType;
};
+ RequestContactsAccess: {
+ screenType: ScreenType;
+ };
Profile: {
userXId: string | undefined;
screenType: ScreenType;
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 3e425101..76fc55e0 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -1,6 +1,7 @@
+import AsyncStorage from '@react-native-community/async-storage';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationOptions} from '@react-navigation/stack';
-import React from 'react';
+import React, {useState} from 'react';
import {
CaptionScreen,
CategorySelection,
@@ -12,6 +13,7 @@ import {
MomentUploadPromptScreen,
NotificationsScreen,
ProfileScreen,
+ RequestContactsAccess,
SearchScreen,
SocialMediaTaggs,
} from '../../screens';
@@ -42,6 +44,14 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
const isSearchTab = screenType === ScreenType.Search;
const isNotificationsTab = screenType === ScreenType.Notifications;
+ AsyncStorage.getItem('respondedToAccessContacts').then((value) =>
+ setRespondedToAccessContacts(value ? value : 'false'),
+ );
+
+ const [respondedToAccessContacts, setRespondedToAccessContacts] = useState(
+ 'false',
+ );
+
const initialRouteName = (() => {
switch (screenType) {
case ScreenType.Profile:
@@ -90,13 +100,20 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
screenType,
}}
/>
- {isSearchTab && (
- <MainStack.Screen
- name="Search"
- component={SearchScreen}
- initialParams={{screenType}}
- />
- )}
+ {isSearchTab &&
+ (respondedToAccessContacts && respondedToAccessContacts === 'true' ? (
+ <MainStack.Screen
+ name="Search"
+ component={SearchScreen}
+ initialParams={{screenType}}
+ />
+ ) : (
+ <MainStack.Screen
+ name="Search"
+ component={RequestContactsAccess}
+ initialParams={{screenType}}
+ />
+ ))}
{isNotificationsTab && (
<MainStack.Screen
name="Notifications"
diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx
new file mode 100644
index 00000000..de023464
--- /dev/null
+++ b/src/screens/search/RequestContactsAccess.tsx
@@ -0,0 +1,186 @@
+import * as React from 'react';
+import {
+ StyleSheet,
+ View,
+ Text,
+ Image,
+ TouchableOpacity,
+ StatusBar,
+} from 'react-native';
+import {BACKGROUND_GRADIENT_MAP} from '../../constants';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {BackgroundGradientType} from '../../types';
+import {useNavigation} from '@react-navigation/native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import Animated from 'react-native-reanimated';
+import LinearGradient from 'react-native-linear-gradient';
+import {checkPermission, requestPermission} from 'react-native-contacts';
+import AsyncStorage from '@react-native-community/async-storage';
+
+const RequestContactsAccess: React.FC = () => {
+ const navigation = useNavigation();
+
+ const handleAllowAccess = async () => {
+ checkPermission().then((permission) => {
+ if (permission === 'undefined') {
+ requestPermission().then((response) => {
+ if (response === 'authorized' || response === 'denied') {
+ navigation.navigate('Search');
+ }
+ });
+ }
+ });
+ await AsyncStorage.setItem('respondedToAccessContacts', 'true');
+ };
+
+ const handleDontAllowAccess = async () => {
+ await AsyncStorage.setItem('respondedToAccessContacts', 'true');
+ navigation.navigate('Search');
+ };
+
+ 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}>
+ <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>
+ </Animated.ScrollView>
+ </View>
+ </SafeAreaView>
+ </LinearGradient>
+ );
+};
+
+const styles = StyleSheet.create({
+ mainContainer: {
+ flex: 1,
+ flexDirection: 'column',
+ alignContent: 'center',
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
+ marginBottom: '15%',
+ },
+ image: {
+ marginBottom: '2%',
+ width: SCREEN_WIDTH,
+ height: SCREEN_WIDTH * 0.49,
+ },
+ title: {
+ color: '#fff',
+ alignSelf: 'center',
+ fontSize: normalize(28),
+ lineHeight: normalize(35),
+ fontWeight: '600',
+ textAlign: 'center',
+ marginBottom: '2%',
+ },
+ subtext: {
+ color: '#fff',
+ alignSelf: 'center',
+ fontSize: normalize(16),
+ lineHeight: normalize(25),
+ fontWeight: '600',
+ textAlign: 'center',
+ width: '83%',
+ height: '15%',
+ },
+ bulletPointView: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignSelf: 'center',
+ width: SCREEN_WIDTH * 0.55,
+ marginBottom: '7%',
+ },
+ icon: {
+ margin: '1%',
+ width: normalize(38),
+ height: normalize(38),
+ alignSelf: 'flex-start',
+ },
+ bulletPointText: {
+ color: '#fff',
+ fontSize: normalize(15),
+ fontWeight: '500',
+ lineHeight: normalize(20),
+ alignSelf: 'center',
+ width: '75%',
+ textAlign: 'center',
+ },
+ allowButton: {
+ backgroundColor: '#fff',
+ justifyContent: 'center',
+ alignItems: 'center',
+ alignSelf: 'center',
+ width: '41.5%',
+ height: '6%',
+ borderRadius: 5,
+ borderWidth: 1,
+ borderColor: '#fff',
+ marginTop: '8%',
+ marginBottom: '3%',
+ },
+ allowButtonLabel: {
+ fontSize: normalize(17),
+ fontWeight: '600',
+ lineHeight: normalize(20.29),
+ color: '#3C4461',
+ },
+ dontAllowButton: {
+ alignSelf: 'center',
+ borderBottomWidth: 1,
+ borderBottomColor: 'white',
+ },
+ dontAllowButtonText: {
+ fontSize: normalize(15),
+ fontWeight: '500',
+ lineHeight: normalize(20),
+ color: '#fff',
+ },
+});
+export default RequestContactsAccess;
diff --git a/src/screens/search/index.ts b/src/screens/search/index.ts
index b6680aa4..d5eb9c3e 100644
--- a/src/screens/search/index.ts
+++ b/src/screens/search/index.ts
@@ -1 +1,2 @@
export {default as SearchScreen} from './SearchScreen';
+export {default as RequestContactsAccess} from './RequestContactsAccess';