CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-navigation
Justinus Hermawan
Justinus Hermawan

Reputation: 1214

React Navigation: How to go back to root Tab Navigator with specific tab from child stack

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.

Upvotes: 2

Views: 4106

Answers (1)

Justinus Hermawan
Justinus Hermawan

Reputation: 1214

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);

Upvotes: 8

Related Questions