How to switch tabs react-native-navigation

Question

Trying to figure this out and I think I'm just missing something simple. I've got a few screens configured and I want to switch between tabs pending on a user action on the second screen.

Nav:

Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            stack: {
              id: 'rootStack',
              children: [
                {
                  component: {
                    name: 'dashboard',
                    id: 'cc.dashboard',
                    options: {
                      statusBar: {
                        visible: true,
                        style: 'light',
                      },
                    },
                  },
                },
              ],
              options: {
                bottomTab: {
                  title: 'Home',
                  icon: images.bottomIconHome,
                  testID: 'FIRST_TAB_BAR',
                  text: 'Home',
                  selectedIconColor: color.WHITE,
                  selectedTextColor: color.WHITE,
                  iconColor: color.WHITE_25,
                  textColor: color.WHITE_25,
                  fontFamily: font.LATO_BOLD,
                  fontSize: 11,
                },
                bottomTabs: {
                  selectedTabColor: 'white',
                  backgroundColor: color.charcoalGreyThree,
                  titleDisplayMode: 'alwaysShow',
                  // fontSize: 10
                },
                topBar: {
                  visible: false,
                },
                statusBar: {
                  visible: true,
                  style: 'light',
                },
                layout: {
                  orientation: ['portrait'],
                },
              },
            },
          },
          {
            stack: {
              id:'screen2stack',
              children: [
                {
                  component: {
                    name: 'program',
                    id: 'cc.program',
                    options: {
                      statusBar: {
                        visible: true,
                        style: 'light',
                      },
                    },
                  },
                },
              ],
              options: {
                bottomTab: {
                  title: 'Program Tab',
                  icon: images.bottomIconProgram,
                  testID: 'SECOND_TAB_BAR_BUTTON',
                  text: 'Program',
                  selectedIconColor: color.WHITE,
                  selectedTextColor: color.WHITE,
                  iconColor: color.WHITE_25,
                  textColor: color.WHITE_25,
                  fontFamily: font.LATO_BOLD,
                  fontSize: 11,
                },
                bottomTabs: {
                  selectedTabColor: 'white',
                  backgroundColor: color.charcoalGreyThree,
                  titleDisplayMode: 'alwaysShow',
                  //fontSize: 10
                },
                topBar: {
                  visible: false,
                },
                statusBar: {
                  visible: true,
                  style: 'light',
                },
                layout: {
                  orientation: ['portrait'],
                },
              },
            },
          },
}
});

I've tried:

Navigation.popTo('cc.dashboard');

But that does nothing, so then I tried:

Navigation.push('cc.dashboard', {
    component: {
      id: 'cc.dashboard',
      name: 'dashboard',
      passProps: propsToPass ? propsToPass : {},
      options: {
        layout: {
          backgroundColor: color.charcoalGreyThree,
          componentBackgroundColor: color.charcoalGreyThree,
        },
        bottomTabs: {
          visible: true,
          backgroundColor: color.charcoalGreyThree,
        },
      },
    },
  });

That works, but it doesn't update the bottom tabs on the screen, still showing the second tab as highlighted. It also just puts the dashboard over it so you can still click on "Home" and go to the dashboard. When you go back to the second screen, it shows the dashboard still. Any thoughts would be appreciated.

Using "react-native-navigation": "^7.16.0", "react": "17.0.1", "react-native": "0.64.1", if that matters at all.

Answer 1

In order to change current tab index in React Native Navigation, you need to do merge options for bottomTabs option:

Navigation.mergeOptions(this.props.componentId, {
  bottomTabs: {
    currentTabIndex: 1
  }
});

For more information, you'd recommend checking out this part in the docs - https://wix.github.io/react-native-navigation/docs/bottomTabs/#selecting-a-tab-by-index.