callstack / callstack/react-native-bottom-tabs
[iOS] With 5 bottom tabs, the last bottom tab always pops the stack to top on focus with react-navigation
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 109
- Avg merge
- 11h 44m
- Merged PRs (30d)
- 8
Description
### Before submitting a new issue
- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] 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
```shell
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
```js
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 (
{label}
);
}
function MenuHome({ navigation }: any) {
return (
Menu Home
navigation.push('Details')} />
);
}
function Details() {
return (
Details
);
}
function MenuStack() {
return (
);
}
function RootTabs() {
return (
} />
} />
} />
} />
{/* IMPORTANT: Last tab renders a native stack */}
);
}
export default function App() {
return (
);
}
```
Contributor guide
Assessment
This issue has not been assessed yet.