Dynamic tabs switch result in empty views

[vladimirivanoviliev]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

Hello @okwasniewski,

I'm trying to create native bottom tab, where I have two sets of 4 tabs and I want to toggle between them using the search role button. On android that works perfectly well. On iOS however some of the tab views are rendered blank. This can be clearly seen in the following video:

Screen.Recording.2025-10-22.at.20.55.02.mov

I experimented with the number of tabs and the behavior leads me to believe that tab views are managed index based instead using more stable reference.

For your convenience I created repro project with bare react native. Just install the dependencies (e.g. npm run clear), start the app (npm run start) and run iOS (npm run ios). Try the above steps.

• https://github.com/vladimirivanoviliev/bottom-tabs-repro

Library version

1.0.2

Environment info

info Fetching system and libraries information...
System:
  OS: macOS 26.0.1
  CPU: (12) arm64 Apple M3 Pro
  Memory: 749.39 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: /opt/homebrew/opt/nvm/versions/node/v22.18.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/opt/nvm/versions/node/v22.18.0/bin/yarn
  npm:
    version: 10.9.3
    path: /opt/homebrew/opt/nvm/versions/node/v22.18.0/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK:
    API Levels:
      - "28"
      - "29"
      - "30"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-28 | Google APIs ARM 64 v8a
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-29 | Google APIs ARM 64 v8a
      - android-29 | Google Play ARM 64 v8a
      - android-30 | Google APIs ARM 64 v8a
      - android-30 | Google Play ARM 64 v8a
      - android-34 | Google APIs ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
      - android-35 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-36.1 | Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
      - android-36 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-Baklava | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.27812.49.2514.14217341
  Xcode:
    version: 26.0.1/17A400
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.12
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.1
    wanted: 19.1.1
  react-native:
    installed: 0.82.1
    wanted: 0.82.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Steps to reproduce

1. Start the app
2. Click on the most right search role button (default prevented with manual navigation)
3. Tabs on left get replaced with new set and you get navigated to the new first tab
4. Click on 4th tab
5. Click on 1st tab
6. First tab view is broken - empty
7. No console errors are present

Reproducible sample code

export const BottomTabNavigation = () => {
    const navigation = useNavigation<any>();
    const isAITabSelectedRef = useRef(false);

    const onPinnedTabPress = useCallback((event: any) => {
        event.preventDefault();

        isAITabSelectedRef.current = !isAITabSelectedRef.current;
        navigation.navigate('App', { screen: !isAITabSelectedRef.current ? 'Home' : 'NewConversation' });

    }, []);

    return (
        <BottomTab.Navigator
            screenOptions={{
            }}
            initialRouteName={'Home'}
        >

            {/* First group of tabs */}
            {!isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='home-tab'
                    name={'Home'}
                    component={HomeScreen}
                    options={{
                        tabBarLabel: 'Home',
                    }}
                />
            )}

            {!isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='list-tab'
                    name={'List'}
                    component={ListScreen}
                    options={{
                        tabBarLabel: 'List',
                    }}
                />
            )}

            {!isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='inbox-tab'
                    name='Inbox'
                    component={InboxScreen}
                    options={{
                        tabBarLabel: 'Inbox',
                    }}
                />
            )}

            {!isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='settings-tab'
                    name='Settings'
                    component={SettingsScreen}
                    options={{
                        tabBarLabel: 'Settings',
                    }}
                />
            )}

            {/* Second group of tabs */}
            {isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='new-conversation-tab'
                    name='NewConversation'
                    component={NewConversationScreen}
                    options={{
                        tabBarLabel: 'New',
                    }}
                />
            )}

            {isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='history-tab'
                    name='History'
                    component={HistoryScreen}
                    options={{
                        tabBarLabel: 'History',
                    }}
                />
            )}

            {isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='requests-tab'
                    name='Requests'
                    component={RequestsScreen}
                    options={{
                        tabBarLabel: 'Requests',
                    }}
                />
            )}

            {isAITabSelectedRef.current && (
                <BottomTab.Screen
                    key='trips-tab'
                    name='Trips'
                    component={TripScreen}
                    options={{
                        tabBarLabel: 'Trips',
                    }}
                />
            )}

            <BottomTab.Screen
                key='pinned-tab'
                name='X'
                component={EmptyComponent}
                options={{
                    role: 'search',
                    title: 'Chat',
                    preventsDefault: true,
                }}
                listeners={{
                    tabPress: onPinnedTabPress,
                }}
            />

        </BottomTab.Navigator>
    );
};

[vladimirivanoviliev]

I was able to find temporary workaround, that confirms that the tabs are referenced using indexes which are not unique when using dynamic tabs. The simple solution is to offset the second set of tabs with 5 hidden tabs, rendered only on second screen. Still I believe the issue is important to be fixed.

    const seconTabsOffset = 5;
    const randomNumber = isAITabSelectedRef.current ? seconTabsOffset : 0;

  {Array.from({ length: randomNumber }).map((_, index) => (
                <BottomTab.Screen
                    key={`home-tab-${index}-${randomNumber}`}
                    name={`Home${index}-${randomNumber}`}
                    component={EmptyComponent}
                    options={{
                        tabBarLabel: `Home${index}-${randomNumber}`,
                        tabBarItemHidden: true,
                    }}
                />
            ))}