10 files changed, 67 insertions, 1 deletions

diff --git a/src/assets/navigationIcons/suggested-people-clicked.png b/src/assets/navigationIcons/suggested-people-clicked.png
new file mode 100644
index 00000000..e297b2e6
--- /dev/null
+++ b/src/assets/navigationIcons/suggested-people-clicked.png
diff --git a/src/assets/navigationIcons/suggested-people.png b/src/assets/navigationIcons/suggested-people.png
new file mode 100644
index 00000000..d19cc167
--- /dev/null
+++ b/src/assets/navigationIcons/suggested-people.png
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 4bf35360..1a9934f2 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -8,7 +8,13 @@ import {
 } from 'react-native';
 
 interface NavigationIconProps extends TouchableOpacityProps {
-  tab: 'Home' | 'Search' | 'Upload' | 'Notifications' | 'Profile';
+  tab:
+    | 'Home'
+    | 'Search'
+    | 'Upload'
+    | 'Notifications'
+    | 'Profile'
+    | 'SuggestedPeople';
   disabled?: boolean;
   newIcon?: boolean;
 }
@@ -43,6 +49,11 @@ const NavigationIcon = (props: NavigationIconProps) => {
         ? require('../../assets/navigationIcons/profile.png')
         : require('../../assets/navigationIcons/profile-clicked.png');
       break;
+    case 'SuggestedPeople':
+      imgSrc = props.disabled
+        ? require('../../assets/navigationIcons/suggested-people.png')
+        : require('../../assets/navigationIcons/suggested-people-clicked.png');
+      break;
     default:
       imgSrc = null;
   }
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 74993af9..04d2fc38 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../types';
 
 export type MainStackParams = {
+  SuggestedPeople: {screenType: ScreenType};
   Search: {
     screenType: ScreenType;
   };
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index c0cef3ea..15950729 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -16,6 +16,7 @@ import {
   RequestContactsAccess,
   SearchScreen,
   SocialMediaTaggs,
+  SuggestedPeopleScreen,
 } from '../../screens';
 import {ScreenType} from '../../types';
 import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
@@ -43,6 +44,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
   // const isProfileTab = screenType === ScreenType.Profile;
   const isSearchTab = screenType === ScreenType.Search;
   const isNotificationsTab = screenType === ScreenType.Notifications;
+  const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople;
 
   AsyncStorage.getItem('respondedToAccessContacts').then((value) =>
     setRespondedToAccessContacts(value ? value : 'false'),
@@ -60,6 +62,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         return 'Search';
       case ScreenType.Notifications:
         return 'Notifications';
+      case ScreenType.SuggestedPeople:
+        return 'SuggestedPeople';
     }
   })();
 
@@ -77,6 +81,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }),
   };
 
+  console.log('screenType: ', screenType);
   return (
     <MainStack.Navigator
       screenOptions={{
@@ -121,6 +126,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
           initialParams={{screenType}}
         />
       )}
+      {isSuggestedPeopleTab && console.log('triggered') && (
+        <MainStack.Screen
+          name="SuggestedPeople"
+          component={SuggestedPeopleScreen}
+          initialParams={{screenType}}
+        />
+      )}
       <MainStack.Screen
         name="CaptionScreen"
         component={CaptionScreen}
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 7d29ab67..49713d66 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -55,6 +55,10 @@ const NavigationBar: React.FC = () => {
               );
             case 'Profile':
               return <NavigationIcon tab="Profile" disabled={!focused} />;
+            case 'SuggestedPeople':
+              return (
+                <NavigationIcon tab="SuggestedPeople" disabled={!focused} />
+              );
             default:
               return <Fragment />;
           }
@@ -73,6 +77,11 @@ const NavigationBar: React.FC = () => {
         },
       }}>
       <Tabs.Screen
+        name="SuggestedPeople"
+        component={MainStackScreen}
+        initialParams={{screenType: ScreenType.SuggestedPeople}}
+      />
+      <Tabs.Screen
         name="Search"
         component={MainStackScreen}
         initialParams={{screenType: ScreenType.Search}}
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 13a9799c..c34cd571 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -2,3 +2,4 @@ export * from './main';
 export * from './onboarding';
 export * from './profile';
 export * from './search';
+export * from './suggestedPeople';
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
new file mode 100644
index 00000000..b0efb9ed
--- /dev/null
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {StatusBar, Text} from 'react-native';
+import {Image} from 'react-native-animatable';
+
+/**
+ * What does suggested people have?
+ */
+
+const SuggestedPeopleScreen: React.FC = () => {
+  /**
+   * This is a double safety check to avoid app crash.
+   * Checks if the required userXId is present in the store, if not userXId is set to dummy id
+   */
+  // if (userXId && !(userXId in useStore().getState().userX[screenType])) {
+  //   userXId = DUMMY_USERID;
+  // }
+
+  return (
+    <>
+      {/* <Image
+        source={require('')}
+        style={{backgroundColor: 'lightgreen', width: '10px', height: '10px'}}
+      /> */}
+      <StatusBar barStyle={'light-content'} />
+      <Text>Suggested People</Text>
+    </>
+  );
+};
+
+export default SuggestedPeopleScreen;
diff --git a/src/screens/suggestedPeople/index.ts b/src/screens/suggestedPeople/index.ts
new file mode 100644
index 00000000..a42d9c52
--- /dev/null
+++ b/src/screens/suggestedPeople/index.ts
@@ -0,0 +1 @@
+export {default as SuggestedPeopleScreen} from './SuggestedPeopleScreen';
diff --git a/src/types/types.ts b/src/types/types.ts
index ab995292..7fccaa44 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -114,6 +114,7 @@ export enum ScreenType {
   Profile,
   Search,
   Notifications,
+  SuggestedPeople,
 }
 
 export type ExploreSectionType =