I'm migrating a React Native application from react-navigation 4 to 5.x and i can't find which package contains createSwitchNavigation. Specifically i have doubts with the auth token check part.
With react-navigation 4 i had:
const switchNavigator = createSwitchNavigator({
ResolveAuth: ResolveAuthScreen,
signinFlow: createStackNavigator({
Signup: SignupScreen,
Signin: SigninScreen,
}),
appFlow: createBottomTabNavigator({
TrackCreate: TrackCreateScreen,
trackListFlow: createStackNavigator({
TrackList: TrackListScreen,
TrackDetail: TrackDetailScreen
}),
Account: AccountScreen,
})
}, {
initialRouteName: 'ResolveAuth'
});
Then i have a file containing ResolveAuthScreen component.
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
const ResolveAuthScreen = (props) => {
useEffect(() => {
if (!props.token) {
props.navigation.navigate('loginFlow');
} else {
props.navigation.navigate('TrackList');
}
}, []);
return null;
};
const mapStateToProps = (state) => {
return {
token: state.auth.token,
};
};
export default connect(mapStateToProps, null)(ResolveAuthScreen);
The rest of components are not important for this doubt. I want to know how to replicate the same Switch navigation flow. I would like to know how can i create something like this:
const Switch = createSwitchNavigator();
export default function App() {
return (
<NavigationContainer>
<Switch.Navigator>
<Switch.Screen name="ResolveAuth" component={ResolveAuthScreen} />
<Switch.Screen name="signinFlow" component={SignInFlowScreens} />
<Switch.Screen name="appFlow" component={AppFlowScreens} />
</Switch.Navigator>
</NavigationContainer>
);
}
import { createAppContainer, createSwitchNavigator, createStackNavigator } from "react-navigation"; import MainTabNavigator from "./MainTabNavigator"; import LoginScreen from "../screens/LoginScreen"; import AuthLoadingScreen from "../screens/AuthLoadingScreen"; export default createAppContainer( createSwitchNavigator( ...
While React Navigation 5 was complete overhaul to the API of React Navigation, React Navigation 6 keeps the same API, with some breaking changes to make things more consistent and provide more flexibility. We also tried to address some common pain points and confusions that users had.
To make the migration easier, you still can use createSwitchNavigator
from @react-navigation/compat
In earlier versions of React Navigation, there were 2 ways to handle this:
- Keep multiple navigators and use switch navigator to switch the active navigator to a different one upon login (recommended)
- Reset the state of the navigator to the desired screens upon login
But for v5, you need to use context. Take a look at here to see a detailed example!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With