appandflow / appandflow/react-native-safe-area-context

Native Navigation Bar overlaps with React Navigation bottom tabs on Samsung Galaxy [Android]

Abierto
#667 20 comentarios 12 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
TypeScript
Estrellas
2.8k
Forks
258
Merge medio
3 d 1 h
PR fusionados (30 d)
2

Descripción

### Current behavior

On devices like **Samsung Galaxy S24 FE**, the **native navigation bar** overlaps with the **React Navigation bottom tabs**.
This causes layout issues where the bottom tab bar is partially hidden or not fully visible.

### Expected behavior

The bottom tab bar should respect safe area insets and **never overlap** with the system navigation bar.

### Reproduction

https://gist.github.com/SathishSaminathan/351acfbde72dc36a212d19b20ee8a081

### Platform

- [x] Android
- [ ] iOS
- [ ] Web
- [ ] Windows
- [ ] MacOS

### Packages

- [x] @react-navigation/bottom-tabs: 7.4.7
- [ ] @react-navigation/drawer
- [ ] @react-navigation/material-top-tabs
- [ ] @react-navigation/stack
- [ ] @react-navigation/native-stack
- [ ] react-native-drawer-layout
- [ ] react-native-tab-view
- [ ] @react-navigation/native: 7.1.17

### Environment

#### Steps to Reproduce
1. Create a new React Native project.
2. Install React Navigation and set up bottom tabs.
3. Run the app on a **Samsung Galaxy S24 FE** (or similar device with gesture navigation bar).
4. Observe that the bottom tab bar is overlapped by the native navigation bar.

#### Screenshots
Image

### Environment

- **React Native**: 0.81.4
- **React**: 19.1.0
- **react-native-reanimated**: 4.0.2
- **react-native-vision-camera**: 4.7.2
- **react-native-maps**: 1.26.1
- **react-native-element-dropdown**: 2.12.4
- **react-native-svg**: 15.12.1
- **react-native-gesture-handler**: 2.13.4
- **react-native-screens**: 4.15.2
- **react-native-safe-area-context**: 5.6.1
- **react-native-vector-icons**: 10.0.2

### Navigation
- **@react-navigation/native**: 7.1.17
- **@react-navigation/bottom-tabs**: 7.4.6
- **@react-navigation/stack**: 7.4.7

### Dev Environment
- **@react-native-community/cli**: 20.0.0
- **@react-native/babel-preset**: 0.81.4
- **TypeScript**: 5.8.3
- **Jest**: 29.6.3
- **ESLint**: 8.19.0
- **Prettier**: 2.8.8
- **Axios**: 1.5.1

---

### Related Issues
- [#12727 – Native Navigation Bar overlaps with React Navigation bottom tabs on Samsung Galaxy S24 FE](https://github.com/react-navigation/react-navigation/issues/12727)

---

@satya164 @osdnk @brentvatne @kacperkapusciak @WoLewicki @okwasniewski Please support on this.

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.