First tab is always rendered when onSwitchToTab and a custom currentTabIndex is set

[ismarbesic]

What happened?

We have noticed that when using an application with bottom tabs with multiple tabs and the "tabsAttachMode" option is set to "onSwitchToTab" and setting "currentTabIndex" to any value higher than 0 (e.g. 1), the first tab's content will always be rendered together with the content of the second tab. This behavior only occurs when the "currentTabIndex" is not set to its default value. In a test application running 7.39.2 (see code in the repro section), we can see the following in the console:

BUNDLE  ./index.js 

LOG  Running "Home" with {"rootTag":1,"initialProps":{"componentId":"Component1"}}
LOG  render home
LOG  Running "Settings" with {"rootTag":11,"initialProps":{"componentId":"Component2"}}
LOG  render settings

Upon debugging I inspected the RNNBottomTabsController class, placing a breakpoint at -[RNNBottomTabsController selectedViewController], and noticed that this method is called before _currentTabIndex is properly initialized, which defaults to 0. This means the renderer will always render the content of the first tab, before the rest of the execution happens which sets the selected tab to index 1.

One solution to fix this issue is to properly initialize the _currentTabIndex value before the super() method is called.

What was the expected behaviour?

We expect only one screen being rendered:

BUNDLE  ./index.js 

LOG  Running "Settings" with {"rootTag":21,"initialProps":{"componentId":"Component2"}}
LOG  render settings

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

Repro (App.tsx):

import {Navigation} from 'react-native-navigation';

const HomeScreen = () => {
  console.log('render home');
  return null;
};

HomeScreen.options = {
  topBar: {
    title: {
      text: 'Home',
    },
  },
  bottomTab: {
    text: 'Home',
  },
};

const SettingsScreen = () => {
  console.log('render settings');
  return null;
};

SettingsScreen.options = {
  topBar: {
    title: {
      text: 'Settings',
    },
  },
  bottomTab: {
    text: 'Settings',
  },
};

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Settings', () => SettingsScreen);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      bottomTabs: {
        id: 'bottomBar',
        options: {
          bottomTabs: {
            tabsAttachMode: 'onSwitchToTab',
            currentTabIndex: 1,
          },
        },
        children: [
          {stack: {children: [{component: {name: 'Home'}}]}},
          {stack: {children: [{component: {name: 'Settings'}}]}},
        ],
      },
    },
  });
});

In what environment did this happen?

React Native Navigation version: 7.39.2
React Native version: 0.74.1
Has Fabric (React Native's new rendering system) enabled: No
Node version: 18.18.2
Device model: iPhone 16 Pro
iOS version: 18.0