Merge pull request #234 from TaggiD-Inc/tma257-sp-base-screen

Tma257 sp base screen

11 files changed, 184 insertions, 1 deletions

diff --git a/src/assets/images/sarah_miller_full.jpeg b/src/assets/images/sarah_miller_full.jpeg
new file mode 100644
index 00000000..acff4155
--- /dev/null
+++ b/src/assets/images/sarah_miller_full.jpeg
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..f3aa7fc6 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -11,6 +11,9 @@ 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..37f9bef8 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 && (
+        <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..1c4c3601
--- /dev/null
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {Image} from 'react-native-animatable';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TabsGradient} from '../../components';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {normalize} from '../../utils';
+
+/**
+ * Bare bones for suggested people consisting of:
+ * * Image, title, name, username, add friend button [w/o functionality]
+ */
+
+const SuggestedPeopleScreen: React.FC = () => {
+  // Can be removed once firstname, username props are received
+  const firstName = 'Sarah';
+
+  // Adviced to maintain username as a variable here to append @ symbol for maintainability
+  const username = '@' + 'sarahmiller';
+
+  return (
+    <>
+      <SafeAreaView>
+        <StatusBar barStyle={'light-content'} />
+        <Image
+          // !!! Displaying Sarah Miller's image
+          source={require('../../assets/images/sarah_miller_full.jpeg')}
+          style={styles.image}
+        />
+        <View style={styles.mainContainer}>
+          <Text style={styles.title}>Suggested People</Text>
+          <View style={styles.body}>
+            {/* Added first row contaning name, username, add button (w/o functionality) */}
+            <View style={styles.addUserContainer}>
+              <View style={styles.nameInfoContainer}>
+                <Text style={styles.firstName}>{firstName}</Text>
+                <Text style={styles.username}>{username}</Text>
+              </View>
+              <TouchableOpacity
+                activeOpacity={0.5}
+                onPress={() => console.log('Call add friend function')}>
+                <View style={styles.addButton}>
+                  <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            {/* TODO: Add TaggsBar here */}
+            {/* TODO: Add MutualFriends here */}
+          </View>
+        </View>
+        <TabsGradient />
+      </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flexDirection: 'column',
+    width: SCREEN_WIDTH * 0.9,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
+    justifyContent: 'space-between',
+    alignSelf: 'center',
+    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',
+  },
+  body: {},
+});
+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 =