about summary refs log tree commit diff
path: root/src/routes
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes')
-rw-r--r--src/routes/index.tsx70
-rw-r--r--src/routes/types.ts40
2 files changed, 62 insertions, 48 deletions
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index fa035e3c9..a8a92e54f 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -9,8 +9,9 @@ import {
 import {createNativeStackNavigator} from '@react-navigation/native-stack'
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
 import {observer} from 'mobx-react-lite'
-import type {RootStackParamList} from './types'
+import type {RootTabsParamList} from './types'
 import {useStores} from '../state'
+import * as platform from '../platform/detection'
 import {Home} from '../screens/Home'
 import {Search} from '../screens/Search'
 import {Notifications} from '../screens/Notifications'
@@ -20,74 +21,77 @@ import {Login} from '../screens/Login'
 import {Signup} from '../screens/Signup'
 import {NotFound} from '../screens/NotFound'
 
-const linking: LinkingOptions<RootStackParamList> = {
+const linking: LinkingOptions<RootTabsParamList> = {
   prefixes: [
     'http://localhost:3000', // local dev
   ],
   config: {
     screens: {
-      Primary: {
-        screens: {
-          Home: '',
-          Search: 'search',
-          Notifications: 'notifications',
-          Menu: 'menu',
-        },
-      },
+      Home: '',
+      Profile: 'profile/:name',
+      Search: 'search',
+      Notifications: 'notifications',
+      Menu: 'menu',
       Login: 'login',
       Signup: 'signup',
-      Profile: 'profile/:name',
       NotFound: '*',
     },
   },
 }
 
-export const RootStack = createNativeStackNavigator()
-export const PrimaryTab = createBottomTabNavigator()
+export const RootTabs = createBottomTabNavigator()
+export const PrimaryStack = createNativeStackNavigator()
 
 const tabBarScreenOptions = ({
   route,
 }: {
   route: RouteProp<ParamListBase, string>
 }) => ({
+  headerShown: false,
   tabBarIcon: (_state: {focused: boolean; color: string; size: number}) => {
     // TODO: icons
     return <Text>{route.name.at(0)}</Text>
   },
 })
 
-function Primary() {
-  return (
-    <PrimaryTab.Navigator
-      screenOptions={tabBarScreenOptions}
-      initialRouteName="Home">
-      <PrimaryTab.Screen name="Home" component={Home} />
-      <PrimaryTab.Screen name="Search" component={Search} />
-      <PrimaryTab.Screen name="Notifications" component={Notifications} />
-      <PrimaryTab.Screen name="Menu" component={Menu} />
-    </PrimaryTab.Navigator>
-  )
-}
+const HIDE_TAB = {tabBarButton: () => null}
 
 export const Root = observer(() => {
   const store = useStores()
+
+  // hide the tabbar on desktop web
+  const tabBar = platform.isDesktopWeb ? () => null : undefined
+
   return (
     <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
-      <RootStack.Navigator
-        initialRouteName={store.session.isAuthed ? 'Primary' : 'Login'}>
+      <RootTabs.Navigator
+        initialRouteName={store.session.isAuthed ? 'Home' : 'Login'}
+        screenOptions={tabBarScreenOptions}
+        tabBar={tabBar}>
         {store.session.isAuthed ? (
           <>
-            <RootStack.Screen name="Primary" component={Primary} />
-            <RootStack.Screen name="Profile" component={Profile} />
-            <RootStack.Screen name="NotFound" component={NotFound} />
+            <RootTabs.Screen name="Home" component={Home} />
+            <RootTabs.Screen name="Search" component={Search} />
+            <RootTabs.Screen name="Notifications" component={Notifications} />
+            <RootTabs.Screen name="Menu" component={Menu} />
+            <RootTabs.Screen
+              name="Profile"
+              component={Profile}
+              options={HIDE_TAB}
+            />
           </>
         ) : (
           <>
-            <RootStack.Screen name="Login" component={Login} />
-            <RootStack.Screen name="Signup" component={Signup} />
+            <RootTabs.Screen name="Login" component={Login} />
+            <RootTabs.Screen name="Signup" component={Signup} />
           </>
         )}
-      </RootStack.Navigator>
+        <RootTabs.Screen
+          name="NotFound"
+          component={NotFound}
+          options={HIDE_TAB}
+        />
+      </RootTabs.Navigator>
     </NavigationContainer>
   )
 })
diff --git a/src/routes/types.ts b/src/routes/types.ts
index 88148fd4d..d92594bbe 100644
--- a/src/routes/types.ts
+++ b/src/routes/types.ts
@@ -1,26 +1,36 @@
-import type {NavigatorScreenParams} from '@react-navigation/native'
-import type {CompositeScreenProps} from '@react-navigation/native'
 import type {StackScreenProps} from '@react-navigation/stack'
-import type {BottomTabScreenProps} from '@react-navigation/bottom-tabs'
 
-export type RootStackParamList = {
-  Primary: undefined
+export type RootTabsParamList = {
+  Home: undefined
+  Search: undefined
+  Notifications: undefined
+  Menu: undefined
   Profile: {name: string}
   Login: undefined
   Signup: undefined
   NotFound: undefined
 }
-export type RootStackScreenProps<T extends keyof RootStackParamList> =
-  StackScreenProps<RootStackParamList, T>
+export type RootTabsScreenProps<T extends keyof RootTabsParamList> =
+  StackScreenProps<RootTabsParamList, T>
 
-export type PrimaryTabParamList = {
-  Home: NavigatorScreenParams<RootStackParamList>
-  Search: undefined
-  Notifications: undefined
-  Menu: undefined
+/*
+NOTE
+this is leftover from a nested nav implementation
+keeping it around for future reference
+-prf
+
+import type {NavigatorScreenParams} from '@react-navigation/native'
+import type {CompositeScreenProps} from '@react-navigation/native'
+import type {BottomTabScreenProps} from '@react-navigation/bottom-tabs'
+
+Container: NavigatorScreenParams<PrimaryStacksParamList>
+export type PrimaryStacksParamList = {
+  Home: undefined
+  Profile: {name: string}
 }
-export type PrimaryTabScreenProps<T extends keyof PrimaryTabParamList> =
+export type PrimaryStacksScreenProps<T extends keyof PrimaryStacksParamList> =
   CompositeScreenProps<
-    BottomTabScreenProps<PrimaryTabParamList, T>,
-    RootStackScreenProps<keyof RootStackParamList>
+    BottomTabScreenProps<PrimaryStacksParamList, T>,
+    RootTabsScreenProps<keyof RootTabsParamList>
   >
+*/