diff options
Diffstat (limited to 'src/view/routes/index.tsx')
-rw-r--r-- | src/view/routes/index.tsx | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/src/view/routes/index.tsx b/src/view/routes/index.tsx new file mode 100644 index 000000000..6351dea6a --- /dev/null +++ b/src/view/routes/index.tsx @@ -0,0 +1,110 @@ +import React, {useEffect} from 'react' +import {Text, Linking} 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 + 'https://pubsq.pfrazee.com', // test server (universal links only) + 'pubsqapp://', // custom protocol (ios) + 'pubsq://app', // custom protocol (android) + ], + 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?.[0] || ''}</Text> + }, +}) + +const HIDE_TAB = {tabBarButton: () => null} + +export const Root = observer(() => { + const store = useStores() + + useEffect(() => { + console.log('Initial link setup') + Linking.getInitialURL().then((url: string | null) => { + console.log('Initial url', url) + }) + Linking.addEventListener('url', ({url}) => { + console.log('Deep link opened with', url) + }) + }, []) + + // 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> + ) +}) |