Stack Navigator flow issue with TabRouter

Question

Stack Navigator "Root" --Stack Navigation A -- SN Login -- SN Signup -- SN HOME Initial Route is "LOGIN"

HOME contain tab navigation --Tab Navigator

--- TAB Navigator A

----Screen "Setting"

--- TAB Navigator B

----Screen "1"

----Screen "Setting"

App.js

const AppNavigator = StackNavigator({
  Login: {
    screen: Login
  },
  SignUp: {
    screen: SignUp
  },
  TermsConditions: {
    screen: TermsConditions
  },
  Home: {
    screen: Home 
  },
    Setting: {
        screen: Setting
    }
}, {

  initialRouteName: "Login",
  headerMode: "none",
  // mode: 'modal',
  navigationOptions: {
    gesturesEnabled: false
  }
});

When user login, navigate to "Home" screen -- End open the Truck as initial route. Home.js

const HomeNavigation = StackNavigator(
  {
    Home: {
      screen: Trucks
    },
    TruckDetailController: {
      screen: TruckDetailController
    },
    Setting: {
      screen: Setting
    },
  {
    initialRouteName: "Home",
    headerMode: "none"
  }
);

const FavouriteNavigation = StackNavigator(
  {
    Favourite: {
      screen: Favourite
    },
    TruckDetailController: {
      screen: TruckDetailController
    },
    Setting: {
      screen: Setting
    },
  {
    initialRouteName: "Favourite",
    headerMode: "none"
  }
);
const TabRoute = TabRouter(
  {
    Trucks: {
      screen: HomeNavigation
    },
    Favourite: {
      screen: FavouriteNavigation
    },
    Loyalty: {
      screen: Loyalty
    },
    Offer: {
      screen: Offer
    }
  },
  { initialRouteName: "Trucks" }
);

I Just want to logout from setting and switch to "Stack Navigation A -- Login" screen.

If anybody will give the solution for above so its appreciable and make a good point. :)

I have already tried all the scenario of react navigation :( — Hemant Solanki

Kraylog Kraylog · Accepted Answer · 2018-01-05T13:40:35

You have two options here. The first, is to use the Back action with a key (you'll have to save the key for the Feed screen when you're there).

The second is to use Reset as you have, but you misunderstood the role of the actions array - it is only intended for building a stack for a stack navigator.

To perform the inner stack-navigator navigation, you'll have to specify an action inside the navigation action:

const resetAction = NavigationActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({
      routeName: '1',
      params: {},
      action: NavigationActions.navigate({
        routeName: 'Feed'
      })
    })
  ]
});

Stack Navigator flow issue with TabRouter

1 Answers