Merge branch 'master' into tma626-people-tutorial

# Conflicts:
#	src/screens/suggestedPeople/SuggestedPeopleScreen.tsx

15 files changed, 410 insertions, 35 deletions

diff --git a/src/assets/images/empty_notifications.png b/src/assets/images/empty_notifications.png
new file mode 100644
index 00000000..5a5828e4
--- /dev/null
+++ b/src/assets/images/empty_notifications.png
diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 9caaffca..167148f0 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -4,6 +4,7 @@ import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
 
 interface AcceptDeclineButtonsProps {
   requester: ProfilePreviewType;
@@ -40,18 +41,17 @@ const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    height: '100%',
     flexDirection: 'column',
+    justifyContent: 'space-around',
   },
   genericButtonStyle: {
     justifyContent: 'center',
     alignItems: 'center',
-    width: SCREEN_WIDTH * 0.14,
-    height: SCREEN_WIDTH * 0.06,
-    borderRadius: 5,
+    width: SCREEN_WIDTH * 0.16,
+    height: SCREEN_WIDTH * 0.0525,
+    borderRadius: 3,
     padding: 0,
-    marginTop: 8,
-    marginRight: '3%',
   },
   acceptButton: {
     padding: 0,
@@ -70,8 +70,10 @@ const styles = StyleSheet.create({
   },
   buttonTitle: {
     padding: 0,
-    fontSize: 14,
-    fontWeight: '800',
+    fontWeight: '700',
+    fontSize: normalize(11),
+    lineHeight: normalize(13),
+    letterSpacing: normalize(0.1),
   },
 });
 
diff --git a/src/components/index.ts b/src/components/index.ts
index 46a7773f..0a7c189b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,3 +5,5 @@ export * from './search';
 export * from './taggs';
 export * from './comments';
 export * from './moments';
+export * from './suggestedPeople';
+
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 1073a479..f83abcbc 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -24,7 +24,12 @@ import {
   ThreadNotificationType,
   UserType,
 } from '../../types';
-import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
+import {
+  fetchUserX,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  userXInStore,
+} from '../../utils';
 import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
 
 interface NotificationProps {
@@ -251,12 +256,14 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     height: Math.round(SCREEN_HEIGHT / 10),
+    width: SCREEN_WIDTH * 0.9,
     flex: 1,
+    alignSelf: 'center',
     alignItems: 'center',
   },
   avatarContainer: {
-    marginLeft: '8%',
-    flex: 1,
+    height: 42,
+    width: 42,
     justifyContent: 'center',
   },
   avatar: {
@@ -270,7 +277,6 @@ const styles = StyleSheet.create({
     height: '80%',
     flexDirection: 'column',
     justifyContent: 'space-around',
-    marginRight: '15%',
   },
   actorName: {
     fontSize: 15,
@@ -282,7 +288,9 @@ const styles = StyleSheet.create({
     width: 42,
     right: '5%',
   },
-  buttonsContainer: {},
+  buttonsContainer: {
+    height: '80%',
+  },
 });
 
 export default Notification;
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index fad3ec09..02ab94e7 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -18,6 +18,7 @@ import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import {
   checkIfUserIsBlocked,
   fetchUserX,
+  isIPhoneX,
   normalize,
   SCREEN_WIDTH,
   userXInStore,
@@ -188,6 +189,17 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.friendUsername;
       nameStyle = styles.friendName;
       break;
+    case 'Suggested People Drawer':
+      containerStyle = styles.suggestedPeopleContainer;
+      avatarStyle = styles.suggestedPeopleAvatar;
+      nameContainerStyle = styles.suggestedPeopleNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.suggestedPeopleUsername;
+      nameStyle = styles.suggestedPeopleName;
+      break;
+    case 'Suggested People Screen':
+      avatarStyle = styles.suggestedPeopleScreenAvatar;
+      break;
     default:
       containerStyle = styles.searchResultContainer;
       avatarStyle = styles.searchResultAvatar;
@@ -229,6 +241,16 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
           </>
         )}
+        {previewType === 'Suggested People Drawer' && (
+          <>
+            <Text style={styles.suggestedPeopleName} numberOfLines={2}>
+              {first_name} {last_name}
+            </Text>
+            <Text
+              style={styles.suggestedPeopleUsername}
+              numberOfLines={1}>{`@${username}`}</Text>
+          </>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -340,6 +362,44 @@ const styles = StyleSheet.create({
     color: '#6C6C6C',
     letterSpacing: normalize(0.1),
   },
+  suggestedPeopleContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 25,
+    width: isIPhoneX() ? 80 : 65,
+  },
+  suggestedPeopleAvatar: {
+    alignSelf: 'center',
+    height: normalize(60),
+    width: normalize(60),
+    borderRadius: 60,
+  },
+  suggestedPeopleUsername: {
+    fontSize: normalize(10),
+    lineHeight: normalize(15),
+    fontWeight: '500',
+    color: '#828282',
+    textAlign: 'center',
+  },
+  suggestedPeopleNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+    marginTop: 10,
+  },
+  suggestedPeopleName: {
+    fontSize: normalize(12),
+    lineHeight: normalize(15),
+    fontWeight: '700',
+    color: '#3C3C3C',
+    textAlign: 'center',
+  },
+  suggestedPeopleScreenAvatar: {
+    height: normalize(33.5),
+    width: normalize(33.5),
+    marginRight: 15,
+    borderRadius: 50,
+  },
 });
 
 export default ProfilePreview;
diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
new file mode 100644
index 00000000..f99279c0
--- /dev/null
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -0,0 +1,213 @@
+import React, {useState} from 'react';
+import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import {BottomDrawer, TabsGradient} from '../../components';
+import {RootState} from '../../store/rootReducer';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {ProfilePreview} from '../profile';
+import {normalize} from 'react-native-elements';
+
+const MutualFriends: React.FC = () => {
+  // Requires user id of profile being viewed
+  const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d';
+
+  // Fetch mutual friends of user X
+  let {friends} = userXId
+    ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
+    : useSelector((state: RootState) => state.friends);
+
+  // Getting list of first 4 friends to display on suggested people screen
+  const friendsPreview = friends.slice(0, 4);
+
+  // Extract username of user whose profile is being viewed
+  const username = '@' + '12345678901234';
+
+  // Count to be displayed after + symbol
+  const count = friends.length - friendsPreview.length;
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  return (
+    <>
+      {friends && friends.length > 0 && (
+        <SafeAreaView>
+          <View style={styles.body}>
+            <Text style={styles.title}>Mutual Friends</Text>
+            <View style={styles.previewProfilesContainer}>
+              {friendsPreview.map((profilePreview) => (
+                <ProfilePreview
+                  previewType={'Suggested People Screen'}
+                  screenType={ScreenType.SuggestedPeople}
+                  profilePreview={profilePreview}
+                />
+              ))}
+              {friends && friends.length > 4 && (
+                <TouchableOpacity onPress={() => setDrawerVisible(true)}>
+                  <View style={styles.mutualFriendsButton}>
+                    <Text style={styles.plusSign}>+</Text>
+                    <Text style={styles.count}>{count}</Text>
+                  </View>
+                </TouchableOpacity>
+              )}
+              <BottomDrawer
+                initialSnapPosition={isIPhoneX() ? '43%' : '50%'}
+                showHeader={false}
+                isOpen={drawerVisible}
+                setIsOpen={setDrawerVisible}>
+                <View style={styles.mainContainer}>
+                  <View style={styles.headerContainer}>
+                    <View style={styles.headerTextContainer}>
+                      <Text style={styles.headerTitle}>Mutual Friends</Text>
+                      <Text style={styles.headerDescription} numberOfLines={2}>
+                        {username} and you are both friends with
+                      </Text>
+                    </View>
+                  </View>
+                  <View style={styles.scrollViewContainer}>
+                    <ScrollView
+                      contentContainerStyle={styles.scrollView}
+                      horizontal
+                      showsHorizontalScrollIndicator={false}>
+                      {friends.map((profilePreview) => (
+                        <ProfilePreview
+                          previewType={'Suggested People Drawer'}
+                          screenType={ScreenType.SuggestedPeople}
+                          profilePreview={profilePreview}
+                        />
+                      ))}
+                    </ScrollView>
+                  </View>
+                  <TouchableOpacity
+                    style={styles.cancelButton}
+                    onPress={() => setDrawerVisible(false)}>
+                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                  </TouchableOpacity>
+                </View>
+              </BottomDrawer>
+            </View>
+          </View>
+        </SafeAreaView>
+      )}
+      <TabsGradient />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    width: SCREEN_WIDTH * 0.9,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.065 : SCREEN_HEIGHT * 0.08,
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    marginBottom: isIPhoneX() ? 25 : 5,
+  },
+  title: {
+    fontSize: normalize(12),
+    lineHeight: normalize(12),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+    paddingBottom: '3.5%',
+  },
+  mutualFriendsButton: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  plusSign: {
+    fontSize: normalize(16),
+    lineHeight: normalize(18),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  count: {
+    fontSize: normalize(13),
+    lineHeight: normalize(16),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  previewProfilesContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  mainContainer: {
+    flexDirection: 'column',
+    backgroundColor: '#f9f9f9',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.46,
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 0.5,
+    borderColor: '#fff',
+  },
+  headerContainer: {
+    width: SCREEN_WIDTH + 2,
+    height: isIPhoneX() ? '28%' : '35%',
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 1,
+    borderColor: '#fff',
+    backgroundColor: '#fff',
+    shadowColor: '#7D7D7D',
+    shadowOffset: {width: 3, height: 3},
+    shadowRadius: 5,
+    shadowOpacity: 0.15,
+    marginBottom: 5.5,
+    alignSelf: 'center',
+  },
+  headerTextContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    height: '100%',
+    width: '90%',
+    alignSelf: 'center',
+    marginTop: '4%',
+  },
+  headerTitle: {
+    fontSize: normalize(16),
+    fontWeight: '700',
+    lineHeight: normalize(20.29),
+    marginBottom: '0.5%',
+    letterSpacing: normalize(0.1),
+  },
+  headerDescription: {
+    fontSize: normalize(13),
+    lineHeight: normalize(15),
+    fontWeight: '600',
+    color: '#828282',
+    paddingTop: '2%',
+    letterSpacing: normalize(0.05),
+    textAlign: 'center',
+  },
+  scrollViewContainer: {
+    height: isIPhoneX() ? 153 : 135,
+    shadowColor: 'rgb(125, 125, 125)',
+    marginTop: '1%',
+  },
+  scrollView: {
+    height: '95%',
+    padding: 0,
+    marginHorizontal: '5%',
+  },
+  cancelButton: {
+    backgroundColor: '#F0F0F0',
+    height: 100,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  cancelButtonText: {
+    top: isIPhoneX() ? '6%' : '7%',
+    color: '#698DD3',
+    fontSize: normalize(16),
+    fontWeight: '700',
+    lineHeight: normalize(20),
+    letterSpacing: normalize(0.1),
+  },
+});
+
+export default MutualFriends;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
new file mode 100644
index 00000000..219ee2fe
--- /dev/null
+++ b/src/components/suggestedPeople/index.ts
@@ -0,0 +1 @@
+export {default as MutualFriends} from './MutualFriends';
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index bb450b64..66694132 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -141,7 +141,12 @@ const Tagg: React.FC<TaggProps> = ({
             setModalVisible={setModalVisible}
             completionCallback={linkNonIntegratedSocial}
           />
-          <View style={styles.container}>
+          <View
+            style={
+              screenType === ScreenType.SuggestedPeople
+                ? styles.spcontainer
+                : styles.container
+            }>
             <TouchableOpacity
               style={styles.iconTap}
               onPress={modalOrAuthBrowserOrPass}>
@@ -174,6 +179,12 @@ const Tagg: React.FC<TaggProps> = ({
 };
 
 const styles = StyleSheet.create({
+  spcontainer: {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginRight: 34,
+    height: normalize(60),
+  },
   container: {
     justifyContent: 'space-between',
     alignItems: 'center',
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index e7bdb0f2..c23f56a9 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -148,7 +148,7 @@ const styles = StyleSheet.create({
     shadowRadius: 10,
     shadowOffset: {width: 0, height: 2},
     zIndex: 1,
-    paddingBottom: 5,
+    marginBottom: 25,
   },
   container: {
     backgroundColor: 'white',
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 0195a634..fbf03744 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -75,6 +75,11 @@ export const AVATAR_GRADIENT = {
   end: '#215151',
 };
 
+export const NOTIFICATION_GRADIENT = [
+  'rgba(247, 248, 248, 1)',
+  'rgba(247, 248, 248, 0)',
+];
+
 export const SOCIAL_FONT_COLORS = {
   INSTAGRAM: INSTAGRAM_FONT_COLOR,
   FACEBOOK: FACEBOOK_FONT_COLOR,
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 6cf5e7c2..0965bad0 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -43,13 +43,15 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi
 export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓';
 export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`;
 export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones';
+export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
 export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
 export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
 export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
 export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
 export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
+export const UP_TO_DATE = 'Up-to-Date!';
 export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!';
 export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile';
 export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!';
 export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category';
-export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
\ No newline at end of file
+export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 266ba3f9..511680ea 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -13,6 +13,7 @@ import {
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {Notification} from '../../components/notifications';
+import EmptyNotificationView from './notification/EmptyNotificationView';
 import {
   loadUserNotifications,
   updateNewNotificationReceived,
@@ -20,6 +21,7 @@ import {
 import {RootState} from '../../store/rootReducer';
 import {NotificationType, ScreenType} from '../../types';
 import {getDateAge, SCREEN_HEIGHT} from '../../utils';
+import {normalize} from '../../utils';
 
 const NotificationsScreen: React.FC = () => {
   const {moments: loggedInUserMoments} = useSelector(
@@ -29,6 +31,7 @@ const NotificationsScreen: React.FC = () => {
     (state: RootState) => state.user,
   );
   const [refreshing, setRefreshing] = useState(false);
+  const [noNotification, setNoNotification] = useState(false);
   // used for figuring out which ones are unread
   const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
     undefined,
@@ -128,6 +131,9 @@ const NotificationsScreen: React.FC = () => {
       {title: 'Yesterday', data: yesterdays},
       {title: 'This Week', data: thisWeeks},
     ]);
+    setNoNotification(
+      todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0,
+    );
   }, [lastViewed, notifications]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
@@ -150,18 +156,25 @@ const NotificationsScreen: React.FC = () => {
       <StatusBar barStyle={'dark-content'} />
       <View style={styles.header}>
         <Text style={styles.headerText}>Notifications</Text>
-        <View style={styles.underline} />
       </View>
-      <SectionList
-        contentContainerStyle={styles.container}
-        sections={sectionedNotifications}
-        keyExtractor={(item, index) => index.toString()}
-        renderItem={renderNotification}
-        renderSectionHeader={renderSectionHeader}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-      />
+      {noNotification && (
+        <View style={styles.emptyViewContainer}>
+          <EmptyNotificationView />
+        </View>
+      )}
+
+      {!noNotification && (
+        <SectionList
+          contentContainerStyle={styles.container}
+          sections={sectionedNotifications}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={renderNotification}
+          renderSectionHeader={renderSectionHeader}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }
+        />
+      )}
     </SafeAreaView>
   );
 };
@@ -174,12 +187,9 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   headerText: {
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-  underline: {
-    borderWidth: 2,
-    borderColor: '#8F01FF',
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
   },
   container: {
     paddingBottom: '20%',
@@ -193,7 +203,13 @@ const styles = StyleSheet.create({
     marginLeft: '8%',
     marginTop: '5%',
     marginBottom: '2%',
-    fontSize: 15,
+    fontWeight: '600',
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+    color: '#828282',
+  },
+  emptyViewContainer: {
+    marginTop: '22%',
   },
 });
 
diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx
new file mode 100644
index 00000000..f43cfb2a
--- /dev/null
+++ b/src/screens/main/notification/EmptyNotificationView.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {Image, Text, StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings';
+import {NOTIFICATION_GRADIENT} from '../../../constants/constants';
+import {SCREEN_HEIGHT, normalize} from '../../../utils';
+const EmptyNotificationView: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <LinearGradient
+        style={styles.backgroundLinearView}
+        useAngle={true}
+        angle={180}
+        colors={NOTIFICATION_GRADIENT}>
+        <Image
+          source={require('../../../assets/images/empty_notifications.png')}
+        />
+      </LinearGradient>
+      <View style={styles.topMargin}>
+        <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
+      </View>
+      <View>
+        <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {alignItems: 'center'},
+  topMargin: {marginTop: SCREEN_HEIGHT * 0.025},
+  upperTextStyle: {
+    fontWeight: '700',
+    fontSize: normalize(23),
+    lineHeight: normalize(40),
+  },
+  bottomTextStyle: {
+    color: '#2D3B45',
+    fontWeight: '600',
+    fontSize: normalize(20),
+    lineHeight: normalize(40),
+  },
+  backgroundLinearView: {
+    borderRadius: 135.5,
+  },
+});
+
+export default EmptyNotificationView;
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index e56a6cca..ab4dda6a 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -12,6 +12,7 @@ import Animated from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useSelector} from 'react-redux';
 import {TabsGradient, TaggsBar} from '../../components';
+import {MutualFriends} from '../../components/suggestedPeople';
 import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
@@ -71,6 +72,10 @@ const SuggestedPeopleScreen: React.FC = () => {
                 <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
               </View>
             </TouchableOpacity>
+            {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends
+             * Needs to be displayed only if userX !user himself
+             */}
+            <MutualFriends />
           </View>
           <TaggsBar
             y={y}
diff --git a/src/types/types.ts b/src/types/types.ts
index bfa45a25..3c17cfa4 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -109,7 +109,9 @@ export type PreviewType =
   | 'Search'
   | 'Recent'
   | 'Discover Users'
-  | 'Friend';
+  | 'Friend'
+  | 'Suggested People Drawer'
+  | 'Suggested People Screen';
 
 export enum ScreenType {
   Profile,