diff options
Diffstat (limited to 'src/routes')
-rw-r--r-- | src/routes/index.tsx | 70 | ||||
-rw-r--r-- | src/routes/types.ts | 40 |
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> > +*/ |