110 lines
3.3 KiB
TypeScript
110 lines
3.3 KiB
TypeScript
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>
|
|
)
|
|
})
|