I'm using react-navigation v2 in React Native and get stuck whenever want to go back to a specific tab in the root navigator.

I've the following route stack:

const HomeStack = createStackNavigator(
  {
    Home: Home,
    CreateInvoice: CreateInvoiceScreen,
    InvoiceSummary: InvoiceSummaryScreen,
    PinEntry: PinEntryScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const CustomersStack = createStackNavigator(
  {
    Customers: CustomersScreen,
    Details: CustomerDetailsScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const Tab = createBottomTabNavigator(
  {
    Home: HomeStack,
    Transactions: TransactionsTab,
    Customers: CustomersStack,
    Settings: SettingsTab
  }
);

const Routers = createStackNavigator({
  splash: {
    screen: SplashScreen,
    navigationOptions: {...navigationOptions}
  },
  login: {
    screen: LoginScreen,
    navigationOptions: {...navigationOptions}
  },
  home: {
    screen: HomeScreen,
    navigationOptions: {...navigationOptions}
  }
});

I'm now in PinEntry screen and I want to go back to Transactions tab in TabNavigator. I can go back to Home tab using the following script:

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate('Home')]
});
this.props.navigation.dispatch(resetAction);

But my goal is to go back to specific tab position, in this case is 'Transactions' tab.

I've googled it so many times but with no solution, any help would be appreciated.

I'm using react-navigation v2 in React Native and get stuck whenever want to go back to a specific tab in the root navigator.

I've the following route stack:

const HomeStack = createStackNavigator(
  {
    Home: Home,
    CreateInvoice: CreateInvoiceScreen,
    InvoiceSummary: InvoiceSummaryScreen,
    PinEntry: PinEntryScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const CustomersStack = createStackNavigator(
  {
    Customers: CustomersScreen,
    Details: CustomerDetailsScreen
  },
  {
    navigationOptions: {
      header: null
    }
  }
);

const Tab = createBottomTabNavigator(
  {
    Home: HomeStack,
    Transactions: TransactionsTab,
    Customers: CustomersStack,
    Settings: SettingsTab
  }
);

const Routers = createStackNavigator({
  splash: {
    screen: SplashScreen,
    navigationOptions: {...navigationOptions}
  },
  login: {
    screen: LoginScreen,
    navigationOptions: {...navigationOptions}
  },
  home: {
    screen: HomeScreen,
    navigationOptions: {...navigationOptions}
  }
});

I'm now in PinEntry screen and I want to go back to Transactions tab in TabNavigator. I can go back to Home tab using the following script:

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate('Home')]
});
this.props.navigation.dispatch(resetAction);

But my goal is to go back to specific tab position, in this case is 'Transactions' tab.

I've googled it so many times but with no solution, any help would be appreciated.

• javascript
• reactjs
• react-native
• react-navigation

• this.props.navigation.navigate('Transactions') without reset stack works correctly for me... – Ali SabziNezhad Commented Jun 9, 2018 at 13:05
• @ali-sn Yes, it works, but I need to reset my stack to that screen. How to do it with reset stack? – Justinus Hermawan Commented Jun 9, 2018 at 13:10
• I will tell you if i found a solution...! :-D – Ali SabziNezhad Commented Jun 9, 2018 at 13:26
• @ali-sn I found the solution, using 2 dispatches. – Justinus Hermawan Commented Jun 9, 2018 at 13:30

1 Answer 1

I found the solution:

const resetAction = StackActions.reset({
  index: 0,
  key: null,
  actions: [NavigationActions.navigate({ routeName: 'Home' })]
});
const goToTransaction = NavigationActions.navigate({
  routeName: 'Transactions'
});
this.props.navigation.dispatch(resetAction);
this.props.navigation.dispatch(goToTransaction);