callstack / callstack/react-native-bottom-tabs

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

Abierto
#401 4 comentarios 1 reacción 0 asignados Ver en GitHub
bug
Lenguaje dominante
TypeScript
Estrellas
1.5k
Forks
109
Merge medio
11 h 44 min
PR fusionados (30 d)
8

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Usa la reproducción proporcionada de RootStack y Tabs con react-native-screens por encima de 4.11.0; después, navega a la pantalla formSheet con navigation.navigate('Sheet') y ciérrala. Compara la posición de la barra de pestañas antes y después de la transición del sheet en Android, tanto en el modo de barra de navegación como en el modo de navegación por gestos. Se considera terminado cuando la barra de pestañas permanece fuera de la navegación del sistema o del área segura inferior después de cerrar el sheet.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
android, react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.