From 4ec594d00b897ac9882a65a60f0523bbe5dbcb0f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Feb 2021 07:41:39 -0800 Subject: New screen to request permission to contacts --- src/assets/icons/findFriends/find-friend-icon.png | Bin 0 -> 100964 bytes src/assets/icons/findFriends/lock-icon.png | Bin 0 -> 7272 bytes src/assets/icons/findFriends/phone-cross-icon.png | Bin 0 -> 16729 bytes .../findFriends/unstored-contact-data-icon.png | Bin 0 -> 11421 bytes src/routes/main/MainStackNavigator.tsx | 3 + src/routes/main/MainStackScreen.tsx | 19 ++- src/screens/search/RequestContactsAccess.tsx | 176 +++++++++++++++++++++ src/screens/search/index.ts | 1 + 8 files changed, 196 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/findFriends/find-friend-icon.png create mode 100644 src/assets/icons/findFriends/lock-icon.png create mode 100644 src/assets/icons/findFriends/phone-cross-icon.png create mode 100644 src/assets/icons/findFriends/unstored-contact-data-icon.png create mode 100644 src/screens/search/RequestContactsAccess.tsx 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 Binary files /dev/null and b/src/assets/icons/findFriends/find-friend-icon.png 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 Binary files /dev/null and b/src/assets/icons/findFriends/lock-icon.png 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 Binary files /dev/null and b/src/assets/icons/findFriends/phone-cross-icon.png differ diff --git a/src/assets/icons/findFriends/unstored-contact-data-icon.png b/src/assets/icons/findFriends/unstored-contact-data-icon.png new file mode 100644 index 00000000..8974a790 Binary files /dev/null and b/src/assets/icons/findFriends/unstored-contact-data-icon.png differ diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index bd838ef2..e038d2c2 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..8042d267 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -12,6 +12,7 @@ import { MomentUploadPromptScreen, NotificationsScreen, ProfileScreen, + RequestContactsAccess, SearchScreen, SocialMediaTaggs, } from '../../screens'; @@ -47,7 +48,14 @@ const MainStackScreen: React.FC = ({route}) => { case ScreenType.Profile: return 'Profile'; case ScreenType.Search: - return 'Search'; + // Check if user responded to access contacts and return appropriate screen + // When app is opened, load the value from Async Storage to react native store + // Every time the user clicks on this tab + // Retrieve the information from the store + // If responded is true, show search screen + // Else, show RequestContactsAccess + // If user responds, update store and Async and remove popup + return 'RequestContactsAccess'; case ScreenType.Notifications: return 'Notifications'; } @@ -91,9 +99,14 @@ const MainStackScreen: React.FC = ({route}) => { }} /> {isSearchTab && ( + // )} diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx new file mode 100644 index 00000000..af511f23 --- /dev/null +++ b/src/screens/search/RequestContactsAccess.tsx @@ -0,0 +1,176 @@ +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'; + +const RequestContactsAccess: React.FC = () => { + const navigation = useNavigation(); + return ( + + + + + + + + FIND FRIENDS! + + This is so you can find your friends already on here! Isn’t a + party better when your favorite people are there? + + + + Always Stays Private + + + + + We don’t keep any contact data + + + + + + We wouldn’t dare send any messages + + + { + console.log('Show IOS opoup'); + }} + style={styles.allowButton}> + Allow Contacts + + navigation.pop()}> + Don’t Allow + + + + + + + ); +}; + +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'; -- cgit v1.2.3-70-g09d2 From c4de05cff65c1b81c135aeee6c8fe2ed6420ba5d Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Feb 2021 10:50:46 -0800 Subject: Added package, configution --- ios/Frontend/Info.plist | 2 ++ ios/Podfile | 1 + package.json | 1 + 3 files changed, 4 insertions(+) diff --git a/ios/Frontend/Info.plist b/ios/Frontend/Info.plist index 0f036f56..fbfcc441 100644 --- a/ios/Frontend/Info.plist +++ b/ios/Frontend/Info.plist @@ -2,6 +2,8 @@ + NSContactsUsageDescription + Connect your contacts to tagg to help quickly get in touch with your friends, and invite them to the application CFBundleDevelopmentRegion en CFBundleDisplayName diff --git a/ios/Podfile b/ios/Podfile index 64383591..0d33de2d 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -6,6 +6,7 @@ platform :ios, '10.0' target 'Frontend' do config = use_native_modules! use_react_native!(:path => config["reactNativePath"]) + # pod 'react-native-contacts', :path => '../node_modules/react-native-contacts' target 'FrontendTests' do inherit! :complete 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", -- cgit v1.2.3-70-g09d2 From bbc7d3b3169e145708c6646a6f4003fc2735f1fb Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Feb 2021 10:51:11 -0800 Subject: Enabled button functionality --- src/routes/main/MainStackScreen.tsx | 39 ++++++++++++++++++---------- src/screens/search/RequestContactsAccess.tsx | 27 ++++++++++++++++--- 2 files changed, 48 insertions(+), 18 deletions(-) diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 8042d267..15695288 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, @@ -43,6 +44,14 @@ const MainStackScreen: React.FC = ({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: @@ -55,7 +64,7 @@ const MainStackScreen: React.FC = ({route}) => { // If responded is true, show search screen // Else, show RequestContactsAccess // If user responds, update store and Async and remove popup - return 'RequestContactsAccess'; + return 'Search'; case ScreenType.Notifications: return 'Notifications'; } @@ -98,18 +107,20 @@ const MainStackScreen: React.FC = ({route}) => { screenType, }} /> - {isSearchTab && ( - // - - )} + {isSearchTab && + (respondedToAccessContacts && respondedToAccessContacts === 'true' ? ( + + ) : ( + + ))} {isNotificationsTab && ( { 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 ( { { - console.log('Show IOS opoup'); - }} + onPress={handleAllowAccess} style={styles.allowButton}> Allow Contacts navigation.pop()}> + onPress={handleDontAllowAccess}> Don’t Allow -- cgit v1.2.3-70-g09d2 From 5f2b6ed00823430780105061ed5b83d217cfd9d7 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Feb 2021 11:18:46 -0800 Subject: New description for ios permission alert --- ios/Frontend/Info.plist | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/Frontend/Info.plist b/ios/Frontend/Info.plist index fbfcc441..2483dee8 100644 --- a/ios/Frontend/Info.plist +++ b/ios/Frontend/Info.plist @@ -3,7 +3,7 @@ NSContactsUsageDescription - Connect your contacts to tagg to help quickly get in touch with your friends, and invite them to the application + This helps you quickly get in touch with friends on the app and more CFBundleDevelopmentRegion en CFBundleDisplayName -- cgit v1.2.3-70-g09d2 From a3019b1be25db59c5c80305c8bc6769254a222cd Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Feb 2021 11:33:56 -0800 Subject: removed unnecessary comment --- src/routes/main/MainStackScreen.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 15695288..76fc55e0 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -57,13 +57,6 @@ const MainStackScreen: React.FC = ({route}) => { case ScreenType.Profile: return 'Profile'; case ScreenType.Search: - // Check if user responded to access contacts and return appropriate screen - // When app is opened, load the value from Async Storage to react native store - // Every time the user clicks on this tab - // Retrieve the information from the store - // If responded is true, show search screen - // Else, show RequestContactsAccess - // If user responds, update store and Async and remove popup return 'Search'; case ScreenType.Notifications: return 'Notifications'; -- cgit v1.2.3-70-g09d2 From 53a858b1fc698fab339da536a162cfe67fc6993e Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 3 Feb 2021 19:11:09 -0800 Subject: removed commented line --- ios/Podfile | 1 - 1 file changed, 1 deletion(-) diff --git a/ios/Podfile b/ios/Podfile index 0d33de2d..64383591 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -6,7 +6,6 @@ platform :ios, '10.0' target 'Frontend' do config = use_native_modules! use_react_native!(:path => config["reactNativePath"]) - # pod 'react-native-contacts', :path => '../node_modules/react-native-contacts' target 'FrontendTests' do inherit! :complete -- cgit v1.2.3-70-g09d2 From 1d7890a41a2fa01f1fc84e04b1144ab705c5bd58 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Fri, 5 Feb 2021 09:53:30 -0800 Subject: removed second point --- .../icons/findFriends/unstored-contact-data-icon.png | Bin 11421 -> 0 bytes src/screens/search/RequestContactsAccess.tsx | 9 --------- 2 files changed, 9 deletions(-) delete mode 100644 src/assets/icons/findFriends/unstored-contact-data-icon.png diff --git a/src/assets/icons/findFriends/unstored-contact-data-icon.png b/src/assets/icons/findFriends/unstored-contact-data-icon.png deleted file mode 100644 index 8974a790..00000000 Binary files a/src/assets/icons/findFriends/unstored-contact-data-icon.png and /dev/null differ diff --git a/src/screens/search/RequestContactsAccess.tsx b/src/screens/search/RequestContactsAccess.tsx index c869ed1e..de023464 100644 --- a/src/screens/search/RequestContactsAccess.tsx +++ b/src/screens/search/RequestContactsAccess.tsx @@ -69,15 +69,6 @@ const RequestContactsAccess: React.FC = () => { /> Always Stays Private - - - - We don’t keep any contact data - -