2 files changed, 74 insertions, 0 deletions
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
new file mode 100644
index 00000000..aca968c2
--- /dev/null
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {NavigationIcon} from '../../components';
+import {
+  ProfileScreen,
+  Home,
+  Notifications,
+  Search,
+  Upload,
+} from '../../screens';
+
+const Tabs = createBottomTabNavigator();
+
+const NavigationBar: React.FC = () => {
+  return (
+    <Tabs.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} />
+            );
+          }
+        },
+      })}
+      initialRouteName="Profile"
+      tabBarOptions={{
+        showLabel: false,
+        style: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          borderTopWidth: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+        },
+      }}>
+      <Tabs.Screen name="Home" component={Home} />
+      <Tabs.Screen name="Search" component={Search} />
+      <Tabs.Screen name="Upload" component={Upload} />
+      <Tabs.Screen name="Notifications" component={Notifications} />
+      <Tabs.Screen name="Profile" component={ProfileScreen} />
+    </Tabs.Navigator>
+  );
+};
+
+export default NavigationBar;
diff --git a/src/routes/tabs/index.ts b/src/routes/tabs/index.ts
new file mode 100644
index 00000000..8ea77e8f
--- /dev/null
+++ b/src/routes/tabs/index.ts
@@ -0,0 +1 @@
+export {default} from './NavigationBar';