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

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

Aberta
#667 20 comentários 12 reações 0 responsáveis Ver no GitHub
Linguagem predominante
TypeScript
Estrelas
2.8k
Forks
258
Merge médio
3d 1h
PRs com merge (30d)
2

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.