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>
);
}
To make the migration easier, you still can use createSwitchNavigator
from @react-navigation/compat