[iOS] With 5 bottom tabs, the last bottom tab always pops the stack to top on focus with react-navigation

Comienza con la reproducción proporcionada usando createNativeBottomTabNavigator, un navegador de cinco pestañas y un stack nativo en la pestaña final; ejecútala en iOS y compara el comportamiento con menos pestañas. Rastrea el foco de la pestaña y la restauración del stack alrededor de la pestaña final, y luego verifica que al volver a ella se conserve la pantalla Details sin volver al root.

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

On iOS when having 5 bottom tabs, the last bottom tab always pops the native stack to top when used with react-navigation. This does not occur when using less than 5 tabs. Adding popToTopOnFocus={false} to the options does not help. Happens on the latest library version, but also happened on versions 0.4.x. I'm using Expo SDK 54, react-native 0.81.5. @react-navigation/native 7.1.18.

Library version

1.0.2

Environment info

System:
  OS: macOS 15.6.1
  CPU: (14) arm64 Apple M4 Pro
  Memory: 8.34 GB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.14.0
    path: /Users/xxx/.nvm/versions/node/v22.14.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.2
    path: /Users/xxx/.nvm/versions/node/v22.14.0/bin/npm
  Watchman:
    version: 2025.09.15.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: 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.16
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: latest
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Create a bottom tab navigator with 5 tabs.
2. Make the 5th (last) tab render a native stack with two screens.
3. Navigate in the last tab from its root to a second screen.
4. Switch to any other tab, then switch back to the last tab

Seems to occur on iOS only

Reproducible sample code

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createNativeBottomTabNavigator } from '@bottom-tabs/react-navigation';

const Stack = createNativeStackNavigator();
const Tabs = createNativeBottomTabNavigator();

function Screen({ label }: { label: string }) {
	return (
		<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
			<Text>{label}</Text>
		</View>
	);
}

function MenuHome({ navigation }: any) {
	return (
		<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
			<Text>Menu Home</Text>
			<Button title="Go to Details" onPress={() => navigation.push('Details')} />
		</View>
	);
}

function Details() {
	return (
		<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
			<Text>Details</Text>
		</View>
	);
}

function MenuStack() {
	return (
		<Stack.Navigator>
			<Stack.Screen name="MenuHome" component={MenuHome} options={{ title: 'Menu' }} />
			<Stack.Screen name="Details" component={Details} />
		</Stack.Navigator>
	);
}

function RootTabs() {
	return (
		<Tabs.Navigator initialRouteName="Home">
			<Tabs.Screen name="Home" children={() => <Screen label="Home" />} />
			<Tabs.Screen name="Markets" children={() => <Screen label="Markets" />} />
			<Tabs.Screen name="Options" children={() => <Screen label="Options" />} />
			<Tabs.Screen name="Blocks" children={() => <Screen label="Blocks" />} />
			{/* IMPORTANT: Last tab renders a native stack */}
			<Tabs.Screen name="Menu" component={MenuStack} />
		</Tabs.Navigator>
	);
}

export default function App() {
	return (
		<NavigationContainer>
			<RootTabs />
		</NavigationContainer>
	);
}