Going back from inner screen to parent screen

I have a stack navigator structure like this

index.js -> App.js -> LoginStck, HomeNavStack From LoginStck on successful login I go to HomeNavStack and from while doing this I reset the stack to have only HomeNavStack(did that to avoid login screen when going back) In HomeStack there are 4 tabs namely Home/Payment/Profile/More with separate stack for each tab. I navigate to MoreScreen within More tab and won logout I need to go to Login Stack(the very first one discarding all other screen).

I did try this`

dothis = async () => {
const someAction = StackActions.reset({
  index: 0,
  key: null,
  actions: [
    NavigationActions.navigate({ routeName: 'HomeNavigatorNew'})
  ]
});
this.props.navigation.navigate(someAction)

}

but didn't work. Any insights....?? Thanks in Advance

`

1 answer

  • answered 2018-10-11 19:46 Naoufal

    The recommend way to switch between Login and other screens is by using createSwitchNavigator.

    For more information please check:

    https://reactnavigation.org/docs/en/switch-navigator.html#docsNav

    I created a simple example that can be helpful for your case:

    import React from 'react';
    import {
      View,
      Text,
      Button,
    } from 'react-native';
    import {
      createStackNavigator,
      createBottomTabNavigator,
      createSwitchNavigator,
    } from 'react-navigation';
    
    class LoginScreen extends React.Component {
      render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              <Text>LoginScreen</Text>
              <Button
                  title={'Login'}
                  onPress={() => this.props.navigation.navigate('HomeStack')}
              />
            </View>
        )
      }
    }
    
    class PaymentScreen extends React.Component {
      render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              <Text>PaymentScreen</Text>
            </View>
        )
      }
    }
    
    class ProfileScreen extends React.Component {
      render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              <Text>ProfileScreen</Text>
            </View>
        )
      }
    }
    
    class MoreScreen extends React.Component {
      render() {
        return (
            <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              <Text>MoreScreen</Text>
              <Button
                  title={'Logout'}
                  onPress={() => this.props.navigation.navigate('LoginStack')}
              />
            </View>
        )
      }
    }
    
    const PaymentStack = createStackNavigator(
        {
          Payment: PaymentScreen,
        }
    );
    
    const ProfileStack = createStackNavigator(
        {
          Profile: ProfileScreen,
        }
    );
    
    const MoreStack = createStackNavigator(
        {
          More: MoreScreen,
        }
    );
    
    const HomeStack = createBottomTabNavigator(
        {
          PaymentStack: PaymentStack,
          ProfileStack: ProfileStack,
          MoreStack: MoreStack,
        }
    );
    
    const LoginStack = createStackNavigator(
        {
          Login: LoginScreen,
        }
    );
    
    export default createSwitchNavigator(
        {
          LoginStack: LoginStack,
          HomeStack: HomeStack,
        }
    );