moved invite friends icon to notifications

2 files changed, 56 insertions, 40 deletions

diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx
index ac724ae0..72ce28d4 100644
--- a/src/components/profile/Friends.tsx
+++ b/src/components/profile/Friends.tsx
@@ -1,9 +1,9 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {Alert, Linking, ScrollView, StyleSheet, Text, View} from 'react-native';
+import {ScrollView, StyleSheet, Text, View} from 'react-native';
 import {checkPermission} from 'react-native-contacts';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useDispatch, useSelector, useStore} from 'react-redux';
+import {useDispatch, useStore} from 'react-redux';
 import {TAGG_LIGHT_BLUE} from '../../constants';
 import {usersFromContactsService} from '../../services';
 import {NO_USER} from '../../store/initialStates';
@@ -17,7 +17,6 @@ import {
 } from '../../utils';
 import {handleAddFriend, handleUnfriend} from '../../utils/friends';
 import {ProfilePreview} from '../profile';
-import FindFriendsBlueIcon from '../../assets/icons/findFriends/find-friends-blue-icon.svg';
 
 interface FriendsProps {
   result: Array<ProfilePreviewType>;
@@ -89,33 +88,6 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => {
         <View style={styles.subheader}>
           <View style={styles.addFriendHeaderContainer}>
             <Text style={[styles.subheaderText]}>Add Friends</Text>
-            <TouchableOpacity
-              style={styles.findFriendsButton}
-              onPress={async () => {
-                const permission = await checkPermission();
-                if (permission === 'authorized') {
-                  navigation.navigate('InviteFriendsScreen', {
-                    screenType: ScreenType.Profile,
-                  });
-                } else {
-                  Alert.alert(
-                    '"Tagg" Would Like to Access Your Contacts',
-                    'This helps you quickly get in touch with friends on the app and more',
-                    [
-                      {
-                        text: "Don't Allow",
-                        style: 'cancel',
-                      },
-                      {text: 'Allow', onPress: () => Linking.openSettings()},
-                    ],
-                  );
-                }
-              }}>
-              <FindFriendsBlueIcon width={20} height={20} />
-              <Text style={styles.findFriendsSubheaderText}>
-                Invite Friends
-              </Text>
-            </TouchableOpacity>
           </View>
           <UsersFromContacts />
         </View>
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 68437f2b..6fca679f 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -1,15 +1,12 @@
 import AsyncStorage from '@react-native-community/async-storage';
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import FindFriendsBlueIcon from '../../assets/icons/findFriends/find-friends-blue-icon.svg';
 import moment from 'moment';
-import React, {
-  Fragment,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {
+  Alert,
   Image,
+  Linking,
   RefreshControl,
   SectionList,
   StatusBar,
@@ -17,10 +14,11 @@ import {
   Text,
   View,
 } from 'react-native';
+import {checkPermission} from 'react-native-contacts';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
-import {TabsGradient, TaggPrompt} from '../../components';
+import {TabsGradient} from '../../components';
 import {
   InviteFriendsPrompt,
   Notification,
@@ -255,12 +253,43 @@ const NotificationsScreen: React.FC = () => {
     return null;
   };
 
+  const navigation = useNavigation();
+
+  const InviteFriends = () => (
+    <TouchableOpacity
+      style={styles.findFriendsButton}
+      onPress={async () => {
+        const permission = await checkPermission();
+        if (permission === 'authorized') {
+          navigation.navigate('InviteFriendsScreen', {
+            screenType: ScreenType.Profile,
+          });
+        } else {
+          Alert.alert(
+            '"Tagg" Would Like to Access Your Contacts',
+            'This helps you quickly get in touch with friends on the app and more',
+            [
+              {
+                text: "Don't Allow",
+                style: 'cancel',
+              },
+              {text: 'Allow', onPress: () => Linking.openSettings()},
+            ],
+          );
+        }
+      }}>
+      <FindFriendsBlueIcon width={18} height={18} />
+      <Text style={styles.findFriendsSubheaderText}>Invite Friends</Text>
+    </TouchableOpacity>
+  );
+
   return (
     <View style={styles.background}>
       <SafeAreaView>
         <StatusBar barStyle="dark-content" />
         <View style={styles.header}>
           <Text style={styles.headerText}>Notifications</Text>
+          <InviteFriends />
         </View>
         <SectionList
           contentContainerStyle={styles.container}
@@ -297,7 +326,10 @@ const styles = StyleSheet.create({
     marginLeft: '8%',
     marginTop: '5%',
     alignSelf: 'flex-start',
-    flexDirection: 'column',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    justifyContent: 'space-between',
+    width: SCREEN_WIDTH * 0.85,
   },
   headerText: {
     fontWeight: '700',
@@ -338,6 +370,18 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  findFriendsButton: {
+    flexDirection: 'row',
+    height: 14,
+    marginTop: '5%',
+  },
+  findFriendsSubheaderText: {
+    marginLeft: '5%',
+    color: '#08E2E2',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
+  },
 });
 
 export default NotificationsScreen;