Logging out to a specific view in react native - react-native

Question

I'm a beginner to react native development. At the moment I'm trying to set my navigation for the login logout process. This is my app flow right now Home -> SignIn -> Dashboard. Now when the user clicks the logout button in the dashboard it should go back to Home screen. This works well for the first time, but the problem is, if a user is already logged in, it skips the Home and SignIn and goes straight to Dashboard and if I try to log out from there it actually pushes to new Home view while keeping Dashboard in the stack and when I SignIn it does a pop transition to Dashboard showing the old state data. I did some digging and its said that react doesn't have provision to pop up out to specific view and we may have to use a hack to replace the screen but I'm not sure how to proceed on that. Below is my current code for the stack navigator and logout process.
const Navigator = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null
}
},
Home: {
screen: Home,
navigationOptions: ({ navigation }) => ({
header: null
})
},
SignIn: {
screen: SignIn,
navigationOptions: {
header: null
}
},
Dashboard: {
screen: Dashboard,
navigationOptions: {
header: null
}
}
});
const Drawer = DrawerNavigator(
{ Navigator: { screen: Navigator } },
{ contentComponent: NavigationDrawer }
);
//In Dashboard
logoutUser = () => {
//Perform API call to logout user
this.props.navigation.navigate("Home");
}

Answer 1

You can use the SwitchNavigator,
const DrawerNavigatorExample = createDrawerNavigator({
//Drawer Optons and indexing
Screen1: {
//Title
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 1',
drawerIcon: <Image
source={require('../assets/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
},
},
Screen2: {
//Title
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Demo Screen 2',
drawerIcon: <Image
source={require('../assets/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
},
},
},
{
contentComponent: DrawerContent
});
const onboardingStackNavigator = createStackNavigator( {
Home: {
screen: Login,
navigationOptions: ({ navigation }) => ({
title: "Login",
headerTintColor: 'white',
headerBackTitle: 'Back',
headerStyle: {
backgroundColor: headerBackgroundColor,
},
headerTintColor: headerTintColor,
})
},
Signup: {
screen: Signup,
navigationOptions: ({ navigation }) => ({
title: "SignUp",
headerTintColor: 'white',
headerBackTitle: 'Back',
headerStyle: {
backgroundColor: headerBackgroundColor,
},
})
},},
{
initialRouteName: 'Home',
}
)
const AppNavigator = createAnimatedSwitchNavigator(
{
onboarding:onboardingStackNavigator,
Drawer: {
screen: DrawerNavigatorExample
}
},
{
initialRouteName: 'onboarding',
transition: (
<Transition.In type='fade'></Transition.In>
)
},
);
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;