callstack / callstack/react-native-bottom-tabs

Tab bar position breaks on Android when used with react-navigation Native Stack Navigator

オープン
#401 コメント 4 件 リアクション 1 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
1.5k
フォーク
109
平均マージ
11時間 44分
マージ済み PR(30日)
8

説明

### 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

This bug is related to three packages, but affects mostly the react-native-bottom-tabs package.
When this library is used with react-navigation, more specifically the [Native Stack Navigator](https://reactnavigation.org/docs/native-stack-navigator) and new versions of [react-native-screens](https://github.com/software-mansion/react-native-screens) (dependency of React Navigation), the tab bar position shifts under the system navigation bar, if in use, or under the bottom safe area, if the device uses gesture navigation.

**Images to illustrate the issue**

Tab bar before navigating to form sheet screen:
![Image](https://github.com/user-attachments/assets/a92323ff-e3f4-4184-9264-e6f0a01528f1)

Broken tab bar position after navigating to form sheet screen (with navigation bar):
![Image](https://github.com/user-attachments/assets/9e465fbf-62db-4548-9534-c42fce5376df)

Broken tab bar position after navigating to form sheet screen (with gesture navigation):
![Image](https://github.com/user-attachments/assets/e9edab81-951a-4416-ac10-63b7c4257655)

For the issue to occur, the app must use the Native Stack Navigator and include at least one screen with the 'formSheet' presentation style (sheet sliding from the bottom of the screen, which uses _BottomSheetBehavior_ on Android). Whenever this screen is presented, the bottom tab bar will shift its position under the safe area. If the tab bar configuration is updated later, the position can shift back to the correct place, but if not, the tab bar will remain broken.

This issue can be reproduced with any recent version of react-native-bottom-tabs and react-navigation, but for the issue to occur, the version of react-native-screens must be above **4.11.0**. So far none of the later versions of the react-native-screens have fixed the compatibility with react-native-bottom-tabs (version 4.14.1 being the latest as of writing).
Currently react-native-screens can be downgraded an older version to circumvent the issue. However, if React Navigation eventually has a hard dependency on later versions of react-native-screens, this library will no longer be compatible with React Navigation.

### Library version

0.10.0

### Environment info

```shell
System:
OS: macOS 15.6
CPU: (8) arm64 Apple M1 Pro
Memory: 724.23 MB / 32.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.19.4
path: /opt/homebrew/opt/node@20/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/opt/node@18/bin/yarn
npm:
version: 10.8.2
path: /opt/homebrew/opt/node@20/bin/npm
Watchman:
version: 2025.07.14.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.5
- iOS 18.5
- macOS 15.5
- tvOS 18.5
- visionOS 2.5
- watchOS 11.5
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.26094.121.2512.13840223
Xcode:
version: 16.4/16F6
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.16
path: /usr/bin/javac
Ruby:
version: 3.4.5
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.2
wanted: 0.79.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
```

### Steps to reproduce

1. Install latest versions of react-native-bottom-tabs, react-navigation, and any version of react-native-screens above 4.11.0.
2. Use Native Stack Navigation as the navigation in the app.
3. Create a screen that uses the 'formSheet' presentation style.
4. Navigate to that screen.
5. Pop the sheet screen and the bottom tab bar has changed position.

These steps reliably reproduce the bug.

### Reproducible sample code

```js
function AppNavigation() {
return (



)
}

const Tab = createNativeBottomTabNavigator()
const Stack = createNativeStackNavigator()

function RootStack() {
return (




)
}

function Tabs() {
return (




)
}

Then navigate to the sheet screen with navigation.navigate('Sheet') and close the sheet to reproduce the bug.
```

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

react-native-screens 4.11.0 より上のバージョンで、提供された RootStack と Tabs の再現手順を使用し、navigation.navigate('Sheet') で formSheet 画面に移動してから閉じます。Android で、ナビゲーションバーとジェスチャーナビゲーションの両方のモードについて、sheet の遷移前後でタブバーの位置を比較します。sheet を閉じた後もタブバーがシステムナビゲーションまたは下部のセーフエリアの外側に留まれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
android, react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。