1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
import React from 'react'
import {Text} from 'react-native'
import {
NavigationContainer,
LinkingOptions,
RouteProp,
ParamListBase,
} from '@react-navigation/native'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import {observer} from 'mobx-react-lite'
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'
import {Menu} from '../screens/Menu'
import {Profile} from '../screens/Profile'
import {Login} from '../screens/Login'
import {Signup} from '../screens/Signup'
import {NotFound} from '../screens/NotFound'
const linking: LinkingOptions<RootTabsParamList> = {
prefixes: [
'http://localhost:3000', // local dev
],
config: {
screens: {
Home: '',
Profile: 'profile/:name',
Search: 'search',
Notifications: 'notifications',
Menu: 'menu',
Login: 'login',
Signup: 'signup',
NotFound: '*',
},
},
}
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>
},
})
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>}>
<RootTabs.Navigator
initialRouteName={store.session.isAuthed ? 'Home' : 'Login'}
screenOptions={tabBarScreenOptions}
tabBar={tabBar}>
{store.session.isAuthed ? (
<>
<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}
/>
</>
) : (
<>
<RootTabs.Screen name="Login" component={Login} />
<RootTabs.Screen name="Signup" component={Signup} />
</>
)}
<RootTabs.Screen
name="NotFound"
component={NotFound}
options={HIDE_TAB}
/>
</RootTabs.Navigator>
</NavigationContainer>
)
})
|
