Merge branch 'master' into tma698-api-profile

# Conflicts:
#	src/components/search/SearchBar.tsx

16 files changed, 424 insertions, 230 deletions

diff --git a/src/screens/badge/BadgeSelection.tsx b/src/screens/badge/BadgeSelection.tsx
index cbd7dd88..335d4333 100644
--- a/src/screens/badge/BadgeSelection.tsx
+++ b/src/screens/badge/BadgeSelection.tsx
@@ -74,9 +74,11 @@ const BadgeSelection: React.FC<BadgeSelectionProps> = ({route}) => {
               const success = await addBadgesService(selectedBadges);
               if (success) {
                 dispatch(suggestedPeopleBadgesFinished());
+                navigation.navigate('SuggestedPeople');
               }
             } else {
               dispatch(suggestedPeopleBadgesFinished());
+              navigation.navigate('SuggestedPeople');
             }
           }
         }}>
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 501c44fc..68437f2b 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -21,7 +21,10 @@ 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 {Notification} from '../../components/notifications';
+import {
+  InviteFriendsPrompt,
+  Notification,
+} from '../../components/notifications';
 import {
   loadUserNotifications,
   updateNewNotificationReceived,
@@ -252,30 +255,6 @@ const NotificationsScreen: React.FC = () => {
     return null;
   };
 
-  const SPPromptNotification: ReactElement = showSPNotifyPopUp ? (
-    <TaggPrompt
-      messageHeader={'New Suggested People Page!'}
-      messageBody={
-        <>
-          <Text>
-            A new page where you can discover new profiles. Just press the new{' '}
-          </Text>
-          <Image
-            style={styles.icon}
-            source={require('../../assets/navigationIcons/home.png')}
-          />
-          <Text> button on the tab bar to check it out!</Text>
-        </>
-      }
-      logoType={'tagg'}
-      hideCloseButton={true}
-      noPadding={true}
-      onClose={() => {}}
-    />
-  ) : (
-    <Fragment />
-  );
-
   return (
     <View style={styles.background}>
       <SafeAreaView>
@@ -285,12 +264,13 @@ const NotificationsScreen: React.FC = () => {
         </View>
         <SectionList
           contentContainerStyle={styles.container}
+          stickySectionHeadersEnabled={false}
           sections={sectionedNotifications}
           keyExtractor={(_item, index) => index.toString()}
           renderItem={renderNotification}
           renderSectionHeader={renderSectionHeader}
           renderSectionFooter={renderSectionFooter}
-          ListHeaderComponent={SPPromptNotification}
+          ListHeaderComponent={<InviteFriendsPrompt />}
           refreshControl={
             <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
           }
@@ -358,11 +338,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
-  icon: {
-    width: 20,
-    height: 20,
-    tintColor: 'grey',
-  },
 });
 
 export default NotificationsScreen;
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index 41d17f29..7cd4b3bf 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React from 'react';
@@ -9,6 +10,7 @@ import {
   useBlurOnFulfill,
   useClearByFocusCell,
 } from 'react-native-confirmation-code-field';
+import {useDispatch} from 'react-redux';
 import {
   ArrowButton,
   Background,
@@ -25,7 +27,7 @@ import {
 } from '../../constants/strings';
 import {OnboardingStackParams} from '../../routes';
 import {BackgroundGradientType} from '../../types';
-import {SCREEN_WIDTH} from '../../utils';
+import {SCREEN_WIDTH, userLogin} from '../../utils';
 
 type InvitationCodeVerificationRouteProp = RouteProp<
   OnboardingStackParams,
@@ -56,6 +58,7 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     value,
     setValue,
   });
+  const dispatch = useDispatch();
 
   const handleInvitationCodeVerification = async () => {
     if (value.length === 6) {
@@ -71,10 +74,11 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
         );
 
         if (verifyInviteCodeResponse.status === 200) {
-          navigation.navigate('Login');
-          setTimeout(() => {
-            Alert.alert(SUCCESS_INVITATION_CODE);
-          }, 500);
+          const userId = route.params.userId;
+          const username = route.params.username;
+          await AsyncStorage.setItem('userId', userId);
+          await AsyncStorage.setItem('username', username);
+          userLogin(dispatch, {userId, username});
         } else {
           Alert.alert(ERROR_INVALID_INVITATION_CODE);
         }
diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx
index cfa39dbd..6d9d3a97 100644
--- a/src/screens/onboarding/Login.tsx
+++ b/src/screens/onboarding/Login.tsx
@@ -170,6 +170,7 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
         } else if (statusCode === 200 && !data.isOnboarded) {
           navigation.navigate('InvitationCodeVerification', {
             userId: data.UserID,
+            username: username,
           });
           setTimeout(() => {
             Alert.alert(ERROR_NOT_ONBOARDED);
diff --git a/src/screens/onboarding/OnboardingStepThree.tsx b/src/screens/onboarding/OnboardingStepThree.tsx
index 64a2a2f7..f22d720f 100644
--- a/src/screens/onboarding/OnboardingStepThree.tsx
+++ b/src/screens/onboarding/OnboardingStepThree.tsx
@@ -57,7 +57,7 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
   route,
   navigation,
 }) => {
-  const {userId} = route.params;
+  const {userId, username} = route.params;
   let emptyDate: string | undefined;
   const [form, setForm] = React.useState({
     smallPic: '',
@@ -224,12 +224,12 @@ const OnboardingStepThree: React.FC<OnboardingStepThreeProps> = ({
         },
         body: request,
       });
-      console.log(route.params.userId);
       let statusCode = response.status;
       let data = await response.json();
       if (statusCode === 200) {
         navigation.navigate('InvitationCodeVerification', {
           userId: route.params.userId,
+          username: username,
         });
       } else if (statusCode === 400) {
         Alert.alert(
diff --git a/src/screens/onboarding/OnboardingStepTwo.tsx b/src/screens/onboarding/OnboardingStepTwo.tsx
index 93342c3f..e79e1886 100644
--- a/src/screens/onboarding/OnboardingStepTwo.tsx
+++ b/src/screens/onboarding/OnboardingStepTwo.tsx
@@ -245,23 +245,6 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
           <Text style={styles.formHeader}>SIGN UP</Text>
         </View>
         <TaggInput
-          accessibilityHint="Enter your email."
-          accessibilityLabel="Email input field."
-          placeholder="Email"
-          autoCompleteType="email"
-          textContentType="emailAddress"
-          autoCapitalize="none"
-          returnKeyType="next"
-          keyboardType="email-address"
-          onChangeText={handleEmailUpdate}
-          blurOnSubmit={false}
-          ref={emailRef}
-          valid={form.isValidEmail}
-          invalidWarning={'Please enter a valid email address.'}
-          attemptedSubmit={form.attemptedSubmit}
-          width={280}
-        />
-        <TaggInput
           accessibilityHint="Enter a username."
           accessibilityLabel="Username input field."
           placeholder="Username"
@@ -281,6 +264,23 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
           width={280}
         />
         <TaggInput
+          accessibilityHint="Enter your email."
+          accessibilityLabel="Email input field."
+          placeholder="School Email"
+          autoCompleteType="email"
+          textContentType="emailAddress"
+          autoCapitalize="none"
+          returnKeyType="next"
+          keyboardType="email-address"
+          onChangeText={handleEmailUpdate}
+          blurOnSubmit={false}
+          ref={emailRef}
+          valid={form.isValidEmail}
+          invalidWarning={'Please enter a valid email address.'}
+          attemptedSubmit={form.attemptedSubmit}
+          width={280}
+        />
+        <TaggInput
           accessibilityHint="Enter a password."
           accessibilityLabel="Password input field."
           placeholder="Password"
diff --git a/src/screens/onboarding/RegistrationTwo.tsx b/src/screens/onboarding/RegistrationTwo.tsx
index 707e621a..6d7b2226 100644
--- a/src/screens/onboarding/RegistrationTwo.tsx
+++ b/src/screens/onboarding/RegistrationTwo.tsx
@@ -214,7 +214,7 @@ const RegistrationTwo: React.FC<RegistrationTwoProps> = ({
         <TaggInput
           accessibilityHint="Enter your email."
           accessibilityLabel="Email input field."
-          placeholder="Email"
+          placeholder="School Email"
           autoCompleteType="email"
           textContentType="emailAddress"
           autoCapitalize="none"
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 01e859ba..998897e2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -152,10 +152,8 @@ const styles = StyleSheet.create({
     position: 'relative',
     backgroundColor: 'white',
     width: '100%',
-    paddingLeft: '2%',
-    paddingRight: '2%',
-    paddingBottom: '1%',
-    paddingTop: '1%',
+    paddingHorizontal: '2%',
+    paddingVertical: '1%',
     height: 60,
   },
 });
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index 1cfef058..886ab9c4 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,6 +1,12 @@
 import {RouteProp} from '@react-navigation/native';
 import React from 'react';
-import {SafeAreaView, StyleSheet, View} from 'react-native';
+import {
+  SafeAreaView,
+  ScrollView,
+  StatusBar,
+  StyleSheet,
+  View,
+} from 'react-native';
 import {useSelector} from 'react-redux';
 import {Friends, TabsGradient} from '../../components';
 import {MainStackParams} from '../../routes';
@@ -25,9 +31,10 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   return (
     <>
       <SafeAreaView>
-        <View style={styles.body}>
+        <StatusBar barStyle="dark-content" />
+        <ScrollView style={styles.body}>
           <Friends result={friends} screenType={screenType} userId={userXId} />
-        </View>
+        </ScrollView>
       </SafeAreaView>
       <TabsGradient />
     </>
@@ -45,7 +52,7 @@ const styles = StyleSheet.create({
   body: {
     marginTop: HeaderHeight,
     width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT * 0.8,
+    height: SCREEN_HEIGHT - HeaderHeight,
   },
 });
 
diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx
new file mode 100644
index 00000000..4af52349
--- /dev/null
+++ b/src/screens/profile/InviteFriendsScreen.tsx
@@ -0,0 +1,337 @@
+import React, {useEffect, useState} from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  SafeAreaView,
+  StyleSheet,
+  TextInput,
+  FlatList,
+  Keyboard,
+  Linking,
+  StatusBar,
+  TouchableWithoutFeedback,
+  ScrollView,
+} from 'react-native';
+import {useDispatch, useStore} from 'react-redux';
+import {ProfilePreviewType} from '../../types';
+import {
+  extractContacts,
+  handleAddFriend,
+  HeaderHeight,
+  isIPhoneX,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  StatusBarHeight,
+} from '../../utils';
+import {checkPermission} from 'react-native-contacts';
+import {usersFromContactsService} from '../../services/UserFriendsService';
+import {ProfilePreview, TabsGradient} from '../../components';
+import Animated from 'react-native-reanimated';
+import Icon from 'react-native-vector-icons/Feather';
+import {InviteFriendTile} from '../../components/friends';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {MainStackParams} from '../../routes';
+import {RouteProp} from '@react-navigation/native';
+const AnimatedIcon = Animated.createAnimatedComponent(Icon);
+
+type InviteFriendsScreenRouteProp = RouteProp<
+  MainStackParams,
+  'InviteFriendsScreen'
+>;
+
+interface InviteFriendsScreenProps {
+  route: InviteFriendsScreenRouteProp;
+}
+
+const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({route}) => {
+  const {screenType} = route.params;
+  const dispatch = useDispatch();
+  const state = useStore().getState();
+  const [usersFromContacts, setUsersFromContacts] = useState<
+    ProfilePreviewType[]
+  >([]);
+  const [nonUsersFromContacts, setNonUsersFromContacts] = useState<[]>([]);
+  type SearchResultType = {
+    usersFromContacts: ProfilePreviewType[];
+    nonUsersFromContacts: [];
+  };
+  const [results, setResults] = useState<SearchResultType>({
+    usersFromContacts: usersFromContacts,
+    nonUsersFromContacts: nonUsersFromContacts,
+  });
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    const handleFindFriends = () => {
+      extractContacts().then(async (retrievedContacts) => {
+        const permission = await checkPermission();
+        if (permission === 'authorized') {
+          let response = await usersFromContactsService(retrievedContacts);
+          await setUsersFromContacts(response.existing_tagg_users);
+          await setNonUsersFromContacts(response.invite_from_contacts);
+          setResults({
+            usersFromContacts: response.existing_tagg_users,
+            nonUsersFromContacts: response.invite_from_contacts,
+          });
+        } else {
+          Linking.openSettings();
+        }
+      });
+    };
+    handleFindFriends();
+  }, []);
+
+  /*
+   * Main handler for changes in query.
+   */
+  useEffect(() => {
+    const search = async () => {
+      if (query.length > 0) {
+        const searchResultsUsers = usersFromContacts.filter(
+          (item: ProfilePreviewType) =>
+            (item.first_name + ' ' + item.last_name)
+              .toLowerCase()
+              .startsWith(query) ||
+            item.username.toLowerCase().startsWith(query) ||
+            item.last_name.toLowerCase().startsWith(query),
+        );
+        const searchResultsNonUsers = nonUsersFromContacts.filter(
+          (item) =>
+            (item.firstName + ' ' + item.lastName)
+              .toLowerCase()
+              .startsWith(query) ||
+            item.lastName.toLowerCase().startsWith(query),
+        );
+        const sanitizedResult = {
+          usersFromContacts: searchResultsUsers,
+          nonUsersFromContacts: searchResultsNonUsers,
+        };
+        setResults(sanitizedResult);
+      } else {
+        setResults({
+          usersFromContacts: usersFromContacts,
+          nonUsersFromContacts: nonUsersFromContacts,
+        });
+      }
+    };
+    search();
+  }, [query]);
+
+  const UsersFromContacts = () => (
+    <>
+      <FlatList
+        showsVerticalScrollIndicator={false}
+        scrollEnabled={false}
+        data={results.usersFromContacts}
+        keyExtractor={(item) => item.username}
+        renderItem={({item}) => (
+          <View key={item.id} style={styles.ppContainer}>
+            <View style={styles.friend}>
+              <ProfilePreview
+                {...{profilePreview: item}}
+                previewType={'Friend'}
+                screenType={screenType}
+              />
+            </View>
+            <TouchableOpacity
+              style={styles.addFriendButton}
+              onPress={() => {
+                handleAddFriend(screenType, item, dispatch, state).then(
+                  (success) => {
+                    if (success) {
+                      let users = usersFromContacts;
+                      const filteredUsers = users.filter(
+                        (user) => user.username !== item.username,
+                      );
+                      setResults({
+                        ...results,
+                        usersFromContacts: filteredUsers,
+                      });
+                    }
+                  },
+                );
+              }}>
+              <Text style={styles.addFriendButtonTitle}>Add Friend</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+      />
+    </>
+  );
+
+  return (
+    <View style={styles.mainContainer}>
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+        <SafeAreaView style={{marginTop: HeaderHeight + StatusBarHeight}}>
+          <StatusBar barStyle="dark-content" />
+          <ScrollView
+            style={styles.body}
+            contentContainerStyle={{paddingBottom: SCREEN_HEIGHT * 0.1}}>
+            <View style={styles.headerContainer}>
+              <Text style={styles.headerText}>
+                Sharing is caring, invite friends, and create moments together!
+              </Text>
+            </View>
+            <View style={styles.container}>
+              <Animated.View style={styles.inputContainer}>
+                <AnimatedIcon
+                  name="search"
+                  color={'#7E7E7E'}
+                  size={16}
+                  style={styles.searchIcon}
+                />
+                <TextInput
+                  style={[styles.input]}
+                  placeholderTextColor={'#828282'}
+                  clearButtonMode="while-editing"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onChangeText={(text) => {
+                    setQuery(text.toLowerCase());
+                  }}
+                  onBlur={() => {
+                    Keyboard.dismiss();
+                  }}
+                  onEndEditing={() => {
+                    Keyboard.dismiss();
+                  }}
+                  value={query}
+                  placeholder={'Search'}
+                />
+              </Animated.View>
+            </View>
+            <View style={styles.subheader}>
+              <Text style={styles.subheaderText}>Add Friends</Text>
+              <UsersFromContacts />
+            </View>
+            <View style={styles.subheader}>
+              <Text style={styles.subheaderText}>Invite your friends!</Text>
+              <FlatList
+                contentContainerStyle={styles.nonUsersFlatListContainer}
+                showsVerticalScrollIndicator={false}
+                scrollEnabled={false}
+                data={results.nonUsersFromContacts}
+                keyExtractor={(item) => item.phoneNumber}
+                renderItem={({item}) => <InviteFriendTile item={item} />}
+              />
+            </View>
+          </ScrollView>
+        </SafeAreaView>
+      </TouchableWithoutFeedback>
+      <TabsGradient />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {backgroundColor: 'white', height: SCREEN_HEIGHT},
+  body: {
+    paddingTop: 10,
+    height: SCREEN_HEIGHT,
+    backgroundColor: '#fff',
+  },
+  headerContainer: {
+    width: SCREEN_WIDTH * 0.85,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.06 : SCREEN_HEIGHT * 0.08,
+    alignSelf: 'center',
+  },
+  nonUsersFlatListContainer: {paddingBottom: 130},
+  subheader: {
+    alignSelf: 'center',
+    width: SCREEN_WIDTH * 0.85,
+    marginBottom: '5%',
+  },
+  subheaderText: {
+    color: '#828282',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
+    marginBottom: '5%',
+  },
+  headerText: {
+    textAlign: 'center',
+    color: '#828282',
+    fontSize: normalize(12),
+    fontWeight: '600',
+    lineHeight: normalize(14.32),
+    marginBottom: '5%',
+  },
+  container: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: normalize(42),
+    alignItems: 'center',
+    marginBottom: '3%',
+    marginHorizontal: 10,
+  },
+  ppContainer: {
+    alignSelf: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    height: normalize(42),
+    alignItems: 'center',
+    marginBottom: '5%',
+    marginHorizontal: 10,
+  },
+  inputContainer: {
+    flexGrow: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    marginHorizontal: '3%',
+    borderRadius: 20,
+    backgroundColor: '#F0F0F0',
+    height: 34,
+  },
+  searchIcon: {
+    marginRight: '5%',
+  },
+  input: {
+    flex: 1,
+    fontSize: normalize(16),
+    color: '#000',
+    letterSpacing: normalize(0.5),
+  },
+  cancelButton: {
+    height: '100%',
+    position: 'absolute',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  cancelText: {
+    color: '#818181',
+    fontWeight: '500',
+  },
+  friend: {
+    alignSelf: 'center',
+    height: '100%',
+  },
+  addFriendButton: {
+    alignSelf: 'center',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 82,
+    height: 25,
+    borderColor: TAGG_LIGHT_BLUE,
+    borderWidth: 2,
+    borderRadius: 2,
+    padding: 0,
+    backgroundColor: TAGG_LIGHT_BLUE,
+  },
+  addFriendButtonTitle: {
+    color: 'white',
+    padding: 0,
+    fontSize: normalize(11),
+    fontWeight: '700',
+    lineHeight: normalize(13.13),
+    letterSpacing: normalize(0.6),
+    paddingHorizontal: '3.8%',
+  },
+});
+
+export default InviteFriendsScreen;
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 5edc6277..313e2f2c 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -38,11 +38,11 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
    * This is done to reset the users stored in our store for the Search screen.
    * Read more about useFocusEffect here : https://reactnavigation.org/docs/function-after-focusing-screen/
    */
-  useFocusEffect(() => {
-    if (!userXId) {
-      dispatch(resetScreenType(screenType));
-    }
-  });
+  // useFocusEffect(() => {
+  //   if (!userXId) {
+  //     dispatch(resetScreenType(screenType));
+  //   }
+  // });
 
   return (
     <>
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index 9d651729..f74946a6 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -6,3 +6,4 @@ export {default as MomentCommentsScreen} from './MomentCommentsScreen';
 export {default as FriendsListScreen} from './FriendsListScreen';
 export {default as EditProfile} from './EditProfile';
 export {default as MomentUploadPromptScreen} from './MomentUploadPromptScreen';
+export {default as InviteFriendsScreen} from './InviteFriendsScreen';
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 06d3efb3..8e0801c2 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -121,7 +121,7 @@ const SPBody: React.FC<SPBodyProps> = ({
       <TouchableOpacity
         onPress={() => {
           navigation.push('Profile', {
-            userXId: user.id,
+            userXId: loggedInUserId === user.id ? undefined : user.id,
             screenType,
           });
         }}
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 4094b0a3..76889657 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,37 +1,31 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState, useRef} from 'react';
-import {
-  FlatList,
-  RefreshControl,
-  StatusBar,
-  StyleSheet,
-  ViewToken,
-} from 'react-native';
-
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {FlatList, RefreshControl, StatusBar, ViewToken} from 'react-native';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {TabsGradient, TaggLoadingIndicator, Background} from '../../components';
+import {Background, TabsGradient, TaggLoadingIndicator} from '../../components';
 import {SP_PAGE_SIZE} from '../../constants';
+import {MainStack} from '../../routes';
+import MainStackScreen from '../../routes/main/MainStackScreen';
 import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
 import {getSuggestedPeople} from '../../services/SuggestedPeopleService';
 import {cancelFriendRequest, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
+  BackgroundGradientType,
   FriendshipStatusType,
   ProfilePreviewType,
   ScreenType,
   SuggestedPeopleDataType,
-  BackgroundGradientType,
 } from '../../types';
 import {
   fetchUserX,
   getUserAsProfilePreviewType,
   handleAddFriend,
-  normalize,
-  SCREEN_HEIGHT,
-  SCREEN_WIDTH,
 } from '../../utils';
+import {SuggestedPeopleWelcomeScreen} from '../suggestedPeopleOnboarding';
 import {userXInStore} from './../../utils/';
 import SPBody from './SPBody';
+
 /**
  * Bare bones for suggested people consisting of:
  * * Image, title, name, username, add friend button [w/o functionality]
@@ -209,9 +203,13 @@ const SuggestedPeopleScreen: React.FC = () => {
     [],
   );
 
-  return suggested_people_linked === 0 ? (
-    <SuggestedPeopleOnboardingStackScreen />
-  ) : loading ? (
+  useFocusEffect(() => {
+    if (suggested_people_linked === 0) {
+      navigation.navigate('SPWelcomeScreen');
+    }
+  });
+
+  return loading ? (
     <>
       <TaggLoadingIndicator fullscreen />
       <Background gradientType={BackgroundGradientType.Dark} />
@@ -245,142 +243,4 @@ const SuggestedPeopleScreen: React.FC = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  mainContainer: {
-    flexDirection: 'column',
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    paddingVertical: '15%',
-    paddingBottom: '20%',
-    justifyContent: 'space-between',
-    alignSelf: 'center',
-  },
-  marginManager: {marginHorizontal: '5%'},
-  image: {
-    position: 'absolute',
-    width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT,
-    zIndex: 0,
-  },
-  title: {
-    zIndex: 1,
-    paddingTop: '3%',
-    alignSelf: 'center',
-    fontSize: normalize(22),
-    lineHeight: normalize(26),
-    fontWeight: '800',
-    letterSpacing: normalize(3),
-    color: '#FFFEFE',
-    textShadowColor: 'rgba(0, 0, 0, 0.4)',
-    textShadowOffset: {width: normalize(2), height: normalize(2)},
-    textShadowRadius: normalize(2),
-  },
-  firstName: {
-    color: '#fff',
-    fontWeight: '800',
-    fontSize: normalize(24),
-    lineHeight: normalize(29),
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: {width: normalize(2), height: normalize(2)},
-    textShadowRadius: normalize(2),
-    letterSpacing: normalize(2.5),
-    alignSelf: 'baseline',
-  },
-  username: {
-    color: '#fff',
-    fontWeight: '600',
-    fontSize: normalize(15),
-    lineHeight: normalize(18),
-    textShadowColor: 'rgba(0, 0, 0, 0.3)',
-    textShadowOffset: {width: normalize(2), height: normalize(2)},
-    textShadowRadius: normalize(2),
-    letterSpacing: normalize(2),
-  },
-  nameInfoContainer: {},
-  addButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.3,
-    height: SCREEN_WIDTH * 0.085,
-    padding: 0,
-    borderWidth: 2,
-    borderColor: '#fff',
-    borderRadius: 1,
-    marginLeft: '1%',
-    marginTop: '4%',
-    shadowColor: 'rgb(0, 0, 0)',
-    shadowRadius: 2,
-    shadowOffset: {width: 2, height: 2},
-    shadowOpacity: 0.5,
-  },
-  addButtonTitle: {
-    color: 'white',
-    padding: 0,
-    fontSize: normalize(15),
-    lineHeight: normalize(18),
-    fontWeight: 'bold',
-    textAlign: 'center',
-    letterSpacing: normalize(1),
-  },
-  addUserContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'flex-start',
-    marginBottom: '5%',
-  },
-  requestedButton: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.3,
-    height: SCREEN_WIDTH * 0.085,
-    padding: 0,
-    borderWidth: 2,
-    borderColor: 'transparent',
-    borderRadius: 1,
-    marginLeft: '1%',
-    marginTop: '4%',
-    shadowColor: 'rgb(0, 0, 0)',
-    shadowRadius: 2,
-    shadowOffset: {width: 2, height: 2},
-    shadowOpacity: 0.5,
-  },
-  requestedButtonTitle: {
-    backgroundColor: 'transparent',
-    fontSize: normalize(15),
-    lineHeight: normalize(18),
-    fontWeight: 'bold',
-    textAlign: 'center',
-    letterSpacing: normalize(1),
-  },
-  body: {},
-
-  button: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: SCREEN_WIDTH * 0.4,
-    aspectRatio: 154 / 33,
-    borderWidth: 2,
-    borderColor: '#fff',
-    borderRadius: 3,
-    marginRight: '2%',
-    marginLeft: '1%',
-  },
-  transparentBG: {
-    backgroundColor: 'transparent',
-  },
-  lightBlueBG: {
-    backgroundColor: '#fff',
-  },
-  label: {
-    fontSize: normalize(15),
-    fontWeight: '700',
-    letterSpacing: 1,
-  },
-  blueLabel: {
-    color: '#fff',
-  },
-  whiteLabel: {
-    color: 'white',
-  },
-});
 export default SuggestedPeopleScreen;
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
index 87e22d9e..0a4e5718 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleUploadPictureScreen.tsx
@@ -98,7 +98,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
       if (success) {
         dispatch(uploadedSuggestedPeoplePhoto(image));
         if (!editing) {
-          navigation.push('BadgeSelection', {editing: false});
+          navigation.navigate('BadgeSelection', {editing: false});
         }
       } else {
         Alert.alert(ERROR_UPLOAD);
@@ -106,12 +106,12 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
       setLoading(false);
       // Navigated back to Profile if user is editing their Suggested People Picture
       if (editing) {
+        navigation.goBack();
         setTimeout(() => {
           Alert.alert(success ? SUCCESS_PIC_UPLOAD : ERROR_UPLOAD_SP_PHOTO);
         }, 500);
       }
     }
-    navigation.goBack();
   };
 
   return (
@@ -161,7 +161,7 @@ const SuggestedPeopleUploadPictureScreen: React.FC<SuggestedPeopleUploadPictureS
         {editing && (
           <TouchableOpacity
             onPress={() => {
-              navigation.push('BadgeSelection', {editing: true});
+              navigation.navigate('BadgeSelection', {editing: true});
             }}>
             <View style={styles.editBadgesMainContainer}>
               <View style={styles.editBadgesSubContainer}>
diff --git a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
index 10f3b3a5..2f12d909 100644
--- a/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
+++ b/src/screens/suggestedPeopleOnboarding/SuggestedPeopleWelcomeScreen.tsx
@@ -1,6 +1,6 @@
 import {BlurView} from '@react-native-community/blur';
 import {useNavigation} from '@react-navigation/native';
-import React from 'react';
+import React, {Fragment, useEffect} from 'react';
 import {Image, StatusBar, StyleSheet, TouchableOpacity} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {SafeAreaView} from 'react-native-safe-area-context';
@@ -9,6 +9,13 @@ import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 const SuggestedPeopleWelcomeScreen: React.FC = () => {
   const navigation = useNavigation();
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerBackImage: () => <Fragment />,
+    });
+  }, []);
+
   return (
     <>
       <StatusBar barStyle={'light-content'} />
@@ -35,7 +42,9 @@ const SuggestedPeopleWelcomeScreen: React.FC = () => {
       </BlurView>
       <TouchableOpacity
         style={styles.nextButton}
-        onPress={() => navigation.push('UploadPicture')}>
+        onPress={() =>
+          navigation.navigate('UpdateSPPicture', {editing: false})
+        }>
         <UpArrow color={'white'} />
       </TouchableOpacity>
     </>