appandflow / appandflow/react-native-safe-area-context
Native Navigation Bar overlaps with React Navigation bottom tabs on Samsung Galaxy [Android]
- Langage dominant
- TypeScript
- Étoiles
- 2.8k
- Forks
- 258
- Merge moyen
- 3 j 1 h
- PR mergées (30 j)
- 2
Description
### 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
### 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.
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.