From f9cf9b5d89d5e25b227814f0fc759257564cea89 Mon Sep 17 00:00:00 2001 From: meganhong <34787696+meganhong@users.noreply.github.com> Date: Thu, 30 Jul 2020 13:28:56 -0700 Subject: 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 --- src/routes/NavigationBar.tsx | 75 +++++++++++++++++++++ src/routes/OnboardingStack.tsx | 57 ++++++++++++++++ src/routes/Routes.tsx | 149 +++++++++-------------------------------- src/routes/index.ts | 6 +- 4 files changed, 167 insertions(+), 120 deletions(-) create mode 100644 src/routes/NavigationBar.tsx create mode 100644 src/routes/OnboardingStack.tsx (limited to 'src/routes') 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 = () => { + return ( + + ({ + tabBarIcon: ({focused}) => { + if (route.name === 'Home') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Search') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Upload') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Notifications') { + return focused ? ( + + ) : ( + + ); + } else if (route.name === 'Profile') { + return focused ? ( + + ) : ( + + ); + } + }, + })} + initialRouteName="Home" + tabBarOptions={{ + showLabel: false, + style: { + backgroundColor: 'transparent', + position: 'absolute', + borderTopWidth: 0, + left: 0, + right: 0, + bottom: 0, + }, + }}> + + + + + + + + ); +}; + +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(); + +interface OnboardingStackProps {} + +const OnboardingStack: React.FC = ({}) => { + return ( + + + + + + + + ); +}; + +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(); - -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 = ({ + children, +}) => { + const [loggedIn, setLoggedIn] = React.useState(false); // renders onboarding stack return ( - ({ - tabBarIcon: ({focused}) => { - if (route.name === 'Home') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Search') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Upload') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Notifications') { - return focused ? ( - - ) : ( - - ); - } else if (route.name === 'Profile') { - return focused ? ( - - ) : ( - - ); - } + { + setLoggedIn(true); }, - })} - tabBarOptions={{ - showLabel: false, - style: { - backgroundColor: 'transparent', - position: 'absolute', - borderTopWidth: 0, + logout: () => { + setLoggedIn(false); }, }}> - - - - - - + {children} + ); -} - -interface RoutesProps {} +}; const Routes: React.FC = ({}) => { - return ( - - - - - - - - - ); + const {user} = React.useContext(AuthContext); + return user ? : ; }; 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'; -- cgit v1.2.3-70-g09d2