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>

4 files changed, 167 insertions, 120 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;
diff --git a/src/routes/OnboardingStack.tsx b/src/routes/OnboardingStack.tsx
new file mode 100644
index 00000000..5e91fe9f
--- /dev/null
+++ b/src/routes/OnboardingStack.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {createStackNavigator} from '@react-navigation/stack';
+import {
+  Login,
+  RegistrationOne,
+  RegistrationTwo,
+  Verification,
+  ProfileOnboarding,
+} from '../screens/onboarding';
+
+export type RootStackParamList = {
+  Login: undefined;
+  RegistrationOne: undefined;
+  RegistrationTwo:
+    | {firstName: string; lastName: string; email: string}
+    | undefined;
+  Verification: {username: string; email: string; userId: string};
+  ProfileOnboarding: {username: string; userId: string};
+};
+
+const RootStack = createStackNavigator<RootStackParamList>();
+
+interface OnboardingStackProps {}
+
+const OnboardingStack: React.FC<OnboardingStackProps> = ({}) => {
+  return (
+    <RootStack.Navigator initialRouteName="Login">
+      <RootStack.Screen
+        name="Login"
+        component={Login}
+        options={{headerShown: false}}
+      />
+      <RootStack.Screen
+        name="RegistrationOne"
+        component={RegistrationOne}
+        options={{headerShown: false}}
+      />
+      <RootStack.Screen
+        name="RegistrationTwo"
+        component={RegistrationTwo}
+        options={{headerShown: false}}
+      />
+      <RootStack.Screen
+        name="Verification"
+        component={Verification}
+        options={{headerShown: false}}
+      />
+      <RootStack.Screen
+        name="ProfileOnboarding"
+        component={ProfileOnboarding}
+        options={{headerShown: false}}
+      />
+    </RootStack.Navigator>
+  );
+};
+
+export default OnboardingStack;
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 5d69b38b..43a51b90 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -1,131 +1,42 @@
 import React from 'react';
-import {createStackNavigator} from '@react-navigation/stack';
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {OnboardingStack, NavigationBar} from './';
 
-import {
-  Login,
-  RegistrationOne,
-  RegistrationTwo,
-  Verification,
-  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};
-  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() {
+interface RoutesProps {}
+interface AuthProviderProps {}
+
+export const AuthContext = React.createContext<{
+  user: boolean;
+  login: () => void;
+  logout: () => void;
+}>({
+  user: false,
+  login: () => {},
+  logout: () => {},
+});
+
+export const AuthContextProvider: React.FC<AuthProviderProps> = ({
+  children,
+}) => {
+  const [loggedIn, setLoggedIn] = React.useState(false); // renders onboarding stack
   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} />
-            );
-          }
+    <AuthContext.Provider
+      value={{
+        user: loggedIn,
+        login: () => {
+          setLoggedIn(true);
         },
-      })}
-      tabBarOptions={{
-        showLabel: false,
-        style: {
-          backgroundColor: 'transparent',
-          position: 'absolute',
-          borderTopWidth: 0,
+        logout: () => {
+          setLoggedIn(false);
         },
       }}>
-      <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>
+      {children}
+    </AuthContext.Provider>
   );
-}
-
-interface RoutesProps {}
+};
 
 const Routes: React.FC<RoutesProps> = ({}) => {
-  return (
-    <RootStack.Navigator initialRouteName="Login">
-      <RootStack.Screen
-        name="Login"
-        component={Login}
-        options={{headerShown: false}}
-      />
-      <RootStack.Screen
-        name="RegistrationOne"
-        component={RegistrationOne}
-        options={{headerShown: false}}
-      />
-      <RootStack.Screen
-        name="RegistrationTwo"
-        component={RegistrationTwo}
-        options={{headerShown: false}}
-      />
-      <RootStack.Screen
-        name="Verification"
-        component={Verification}
-        options={{headerShown: false}}
-      />
-      <RootStack.Screen
-        name="ProfileOnboarding"
-        component={ProfileOnboarding}
-        options={{headerShown: false}}
-      />
-      <RootStack.Screen
-        name="Home"
-        component={MainTabNavigator}
-        options={{headerShown: false}}
-      />
-    </RootStack.Navigator>
-  );
+  const {user} = React.useContext(AuthContext);
+  return user ? <NavigationBar /> : <OnboardingStack />;
 };
 
 export default Routes;
diff --git a/src/routes/index.ts b/src/routes/index.ts
index cfa05fcb..054a25c3 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -1,2 +1,6 @@
-export {default} from './Routes';
+export {default as OnboardingStack} from './OnboardingStack';
+export * from './OnboardingStack';
+export {default as NavigationBar} from './NavigationBar';
+export * from './NavigationBar';
+export {default as Routes} from './Routes';
 export * from './Routes';