React-native-navigation: [v2] Pop to root from another stack

[ardean]

Issue Description

I've 2 BottomTabs and I need to change from Screen2 to Screen1 programmatically (press on a own Button). But as I've seen, that's not possible with stacks per tab. I need the stacks per tab because otherwise the TopBar title is not displayed.

AFAIK you can not pop to root from another stack in V2.

Steps to Reproduce / Code Snippets / Screenshots

The following example does not work (stacks per tab):

App.js:

import { Navigation } from "react-native-navigation";
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";

const root = {
  bottomTabs: {
    id: "BottomTabsId",
    children: [{
      stack: {
        children: [{
          component: {
            id: "Screen1Id",
            name: "Screen1",
            options: {
              bottomTab: {
                text: "1"
              },
              topBar: {
                title: {
                  text: "Screen 1"
                }
              }
            }
          }
        }]
      }
    }, {
      stack: {
        children: [{
          component: {
            name: "Screen2",
            options: {
              bottomTab: {
                text: "2"
              },
              topBar: {
                title: {
                  text: "Screen 2"
                }
              }
            }
          }
        }]
      }
    }]
  }
};

Navigation.registerComponent("Screen1", () => Screen1);
Navigation.registerComponent("Screen2", () => Screen2);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({ root });
});

Screen2.js:

onButtonPress() {
   Navigation.mergeOptions('BottomTabsId', {
      currentTabIndex: 1
   });
}

---

Environment

• React Native Navigation version: 2.0.2408
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iOS Simulator

[InternetExplorer8]

We have a similar case here. If the user opens a push notification outside the app, he should then land on a certain tab. popToRoot would work, but only if the user was in the same tab stack before. Is there a workaround?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[Olovorr]

This is still relevant, this issue should get more attention actually and not be closed.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[barclayd]

I don't believe that this issue is stale

[joshperry131]

I don't believe that this issue is stale either.

[samparmenter]

Its not stale, its a pretty basic bit of functionality for a navigation library. I have the same use case as above. When a notification comes in and I click on it I want to move to the notifications screen regardless of where I am in the app.

[Olovorr]

So I am following up on this issue, because this actually works now (I am on 2.16.0):

Original example doesn't work because

onButtonPress() {
   Navigation.mergeOptions('BottomTabsId', {
      currentTabIndex: 1
   });
}

should actually be:

onButtonPress() {
   Navigation.mergeOptions('BottomTabsId', {
      bottomTabs: {
        currentTabIndex: 1,
      },
   });
}

Switching bottomTabs is still messy in some cases and doesn't work consistently (i.e. if you try to use currentTabId with component ID to change active tab - don't even bother), but if you stick to currentTabIndex with index of the bottomTab, it should always work correctly :)

cc @samparmenter @joshperry131 @barclayd