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
|
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 {RootStackParamList} from './types'
import {useStores} from '../state'
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<RootStackParamList> = {
prefixes: [
'http://localhost:3000', // local dev
],
config: {
screens: {
Primary: {
screens: {
Home: '',
Search: 'search',
Notifications: 'notifications',
Menu: 'menu',
},
},
Login: 'login',
Signup: 'signup',
Profile: 'profile/:name',
NotFound: '*',
},
},
}
export const RootStack = createNativeStackNavigator()
export const PrimaryTab = createBottomTabNavigator()
const tabBarScreenOptions = ({
route,
}: {
route: RouteProp<ParamListBase, string>
}) => ({
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>
)
}
export const Root = observer(() => {
const store = useStores()
return (
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
<RootStack.Navigator
initialRouteName={store.session.isAuthed ? 'Primary' : 'Login'}>
{store.session.isAuthed ? (
<>
<RootStack.Screen name="Primary" component={Primary} />
<RootStack.Screen name="Profile" component={Profile} />
<RootStack.Screen name="NotFound" component={NotFound} />
</>
) : (
<>
<RootStack.Screen name="Login" component={Login} />
<RootStack.Screen name="Signup" component={Signup} />
</>
)}
</RootStack.Navigator>
</NavigationContainer>
)
})
|
