TMA-168: Add Gradient to Navigation Bar (#26)

* 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

* added gradient and changed screens to transparent

* renamed Routes to OnboardingStack

* rerouting navigation

* pulling from master

* merge conflicts

* added entryway to home on profileonboarding

* changed gradient into custom component

* removed a method that i had commented out

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

1 files changed, 75 insertions, 0 deletions

diff --git a/src/routes/NavigationBar.tsx b/src/routes/NavigationBar.tsx
new file mode 100644
index 00000000..84c18e00
--- /dev/null
+++ b/src/routes/NavigationBar.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import {ViewProps} from 'react-native';
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {Fragment} from 'react';
+import {NavigationIcon} from '../components';
+import {Home, Notifications, Profile, Search, Upload} from '../screens/main';
+
+interface NavigationBarProps extends ViewProps {
+  centered?: boolean;
+}
+
+const Tab = createBottomTabNavigator();
+
+const NavigationBar: React.FC<NavigationBarProps> = () => {
+  return (
+    <Fragment>
+      <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} />
+              );
+            }
+          },
+        })}
+        initialRouteName="Home"
+        tabBarOptions={{
+          showLabel: false,
+          style: {
+            backgroundColor: 'transparent',
+            position: 'absolute',
+            borderTopWidth: 0,
+            left: 0,
+            right: 0,
+            bottom: 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>
+    </Fragment>
+  );
+};
+
+export default NavigationBar;