TMA-167: Create Navigation Bar (#25)

* Renamed Profile in Onboarding and added dummy main screens

* Comments for new screens created

* change navigation in verification to profileonboarding

* added icons and tab navigation

* added icons to navigation bar

* add clicked icons

* added 2x and 3x icon sizes

* rename for resizing to work

* remove upload clicked as informed by design

* changed initialRouteName back to Login

* created NavigationIcon component to hold all the nav icons

* added default case

* changed intialRouteName back to Login

* fixed icon names

* fixed icon names

* add navigation to home page after login

Co-authored-by: Megan Hong <meganhong31@g.ucla.edu>

1 files changed, 77 insertions, 4 deletions

diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 7379c2c2..5d69b38b 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -1,26 +1,94 @@
 import React from 'react';
 import {createStackNavigator} from '@react-navigation/stack';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 
 import {
   Login,
   RegistrationOne,
   RegistrationTwo,
   Verification,
-  Profile,
+  ProfileOnboarding,
 } from '../screens/onboarding';
+import {Home, Notifications, Profile, Search, Upload} from '../screens/main';
+import {NavigationIcon} from '../components';
 
 export type RootStackParamList = {
+  // Onboarding Screens
   Login: undefined;
   RegistrationOne: undefined;
   RegistrationTwo:
     | {firstName: string; lastName: string; email: string}
     | undefined;
   Verification: {username: string; email: string; userId: string};
-  Profile: {username: string; userId: string};
+  ProfileOnboarding: {username: string; userId: string};
+
+  // Main Screens
+  Home: undefined;
+  Notifications: undefined;
+  Profile: undefined;
+  Search: undefined;
+  Upload: undefined;
 };
 
 const RootStack = createStackNavigator<RootStackParamList>();
 
+const Tab = createBottomTabNavigator();
+
+function MainTabNavigator() {
+  return (
+    <Tab.Navigator
+      screenOptions={({route}) => ({
+        tabBarIcon: ({focused}) => {
+          if (route.name === 'Home') {
+            return focused ? (
+              <NavigationIcon tab="Home" disabled={false} />
+            ) : (
+              <NavigationIcon tab="Home" disabled={true} />
+            );
+          } else if (route.name === 'Search') {
+            return focused ? (
+              <NavigationIcon tab="Search" disabled={false} />
+            ) : (
+              <NavigationIcon tab="Search" disabled={true} />
+            );
+          } else if (route.name === 'Upload') {
+            return focused ? (
+              <NavigationIcon tab="Upload" disabled={false} />
+            ) : (
+              <NavigationIcon tab="Upload" disabled={true} />
+            );
+          } else if (route.name === 'Notifications') {
+            return focused ? (
+              <NavigationIcon tab="Notifications" disabled={false} />
+            ) : (
+              <NavigationIcon tab="Notifications" disabled={true} />
+            );
+          } else if (route.name === 'Profile') {
+            return focused ? (
+              <NavigationIcon tab="Profile" disabled={false} />
+            ) : (
+              <NavigationIcon tab="Profile" disabled={true} />
+            );
+          }
+        },
+      })}
+      tabBarOptions={{
+        showLabel: false,
+        style: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          borderTopWidth: 0,
+        },
+      }}>
+      <Tab.Screen name="Home" component={Home} />
+      <Tab.Screen name="Search" component={Search} />
+      <Tab.Screen name="Upload" component={Upload} />
+      <Tab.Screen name="Notifications" component={Notifications} />
+      <Tab.Screen name="Profile" component={Profile} />
+    </Tab.Navigator>
+  );
+}
+
 interface RoutesProps {}
 
 const Routes: React.FC<RoutesProps> = ({}) => {
@@ -47,8 +115,13 @@ const Routes: React.FC<RoutesProps> = ({}) => {
         options={{headerShown: false}}
       />
       <RootStack.Screen
-        name="Profile"
-        component={Profile}
+        name="ProfileOnboarding"
+        component={ProfileOnboarding}
+        options={{headerShown: false}}
+      />
+      <RootStack.Screen
+        name="Home"
+        component={MainTabNavigator}
         options={{headerShown: false}}
       />
     </RootStack.Navigator>