diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/App.tsx | 12 | ||||
-rw-r--r-- | src/assets/icons/findFriends/find-friend-icon.png | bin | 0 -> 100964 bytes | |||
-rw-r--r-- | src/assets/icons/findFriends/lock-icon.png | bin | 0 -> 7272 bytes | |||
-rw-r--r-- | src/assets/icons/findFriends/phone-cross-icon.png | bin | 0 -> 16729 bytes | |||
-rw-r--r-- | src/routes/Routes.tsx | 8 | ||||
-rw-r--r-- | src/routes/main/MainStackNavigator.tsx | 3 | ||||
-rw-r--r-- | src/routes/main/MainStackScreen.tsx | 33 | ||||
-rw-r--r-- | src/screens/onboarding/CategorySelection.tsx | 3 | ||||
-rw-r--r-- | src/screens/search/RequestContactsAccess.tsx | 186 | ||||
-rw-r--r-- | src/screens/search/index.ts | 1 |
10 files changed, 227 insertions, 19 deletions
diff --git a/src/App.tsx b/src/App.tsx index 18fadf64..ea3617dc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,11 @@ -import React, {useEffect} from 'react'; import {NavigationContainer} from '@react-navigation/native'; -import Routes from './routes'; +import React from 'react'; import {Provider} from 'react-redux'; -import store from './store/configureStore'; -import {fcmService} from './services/FCMService'; import {navigationRef} from './RootNavigation'; +import Routes from './routes'; +import store from './store/configureStore'; const App = () => { - useEffect(() => { - fcmService.setUpPushNotifications(); - // TODO: If permissions are not there, deactivateFcmService - }); - return ( /** * This is the provider from the redux store, it acts as the root provider for our application diff --git a/src/assets/icons/findFriends/find-friend-icon.png b/src/assets/icons/findFriends/find-friend-icon.png Binary files differnew file mode 100644 index 00000000..62abcac0 --- /dev/null +++ b/src/assets/icons/findFriends/find-friend-icon.png diff --git a/src/assets/icons/findFriends/lock-icon.png b/src/assets/icons/findFriends/lock-icon.png Binary files differnew file mode 100644 index 00000000..20ccbe2f --- /dev/null +++ b/src/assets/icons/findFriends/lock-icon.png diff --git a/src/assets/icons/findFriends/phone-cross-icon.png b/src/assets/icons/findFriends/phone-cross-icon.png Binary files differnew file mode 100644 index 00000000..0801e9f1 --- /dev/null +++ b/src/assets/icons/findFriends/phone-cross-icon.png diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index a14f1576..a5383a47 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -7,6 +7,7 @@ import {userLogin} from '../utils'; import SplashScreen from 'react-native-splash-screen'; import messaging from '@react-native-firebase/messaging'; import {updateNewNotificationReceived} from '../store/actions'; +import {fcmService} from '../services'; const Routes: React.FC = () => { const { @@ -39,6 +40,13 @@ const Routes: React.FC = () => { } }, [dispatch, userId]); + useEffect(() => { + if (userId) { + fcmService.setUpPushNotifications(); + fcmService.sendFcmTokenToServer(); + } + }); + return userId ? <NavigationBar /> : <Onboarding />; }; 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 47b49f07..c0cef3ea 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/onboarding/CategorySelection.tsx b/src/screens/onboarding/CategorySelection.tsx index a3acbbb7..94dd44b2 100644 --- a/src/screens/onboarding/CategorySelection.tsx +++ b/src/screens/onboarding/CategorySelection.tsx @@ -17,7 +17,7 @@ import {Background, MomentCategory} from '../../components'; import {MOMENT_CATEGORIES} from '../../constants'; import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings'; import {OnboardingStackParams} from '../../routes'; -import {fcmService, postMomentCategories} from '../../services'; +import {postMomentCategories} from '../../services'; import { updateIsOnboardedUser, updateMomentCategories, @@ -169,7 +169,6 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({ const token = await getTokenOrLogout(dispatch); await postMomentCategories(selectedCategories, token); userLogin(dispatch, {userId: userId, username: username}); - fcmService.sendFcmTokenToServer(); } else { dispatch( updateMomentCategories( 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'; |