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

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

Offen
#667 20 Kommentare 12 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
2.8k
Forks
258
Ø Merge
3 T. 1 Std.
Gemergte PRs (30 T.)
2

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.