Add auth navigations

This commit is contained in:
Paul Frazee 2022-06-09 17:13:29 -05:00
parent fc3b2952bb
commit 802222fe71
11 changed files with 129 additions and 25 deletions

View file

@ -8,12 +8,16 @@ import {
} 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> = {
@ -30,6 +34,8 @@ const linking: LinkingOptions<RootStackParamList> = {
Menu: 'menu',
},
},
Login: 'login',
Signup: 'signup',
Profile: 'profile/:name',
NotFound: '*',
},
@ -50,23 +56,38 @@ const tabBarScreenOptions = ({
},
})
const Primary = () => (
<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>
)
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 = () => (
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
<RootStack.Navigator initialRouteName="Primary">
<RootStack.Screen name="Primary" component={Primary} />
<RootStack.Screen name="Profile" component={Profile} />
<RootStack.Screen name="NotFound" component={NotFound} />
</RootStack.Navigator>
</NavigationContainer>
)
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>
)
})