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>