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

Open
#461 7 comments 1 reaction 0 assignees View on GitHub
bug
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.