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

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

Đang mở
#667 20 bình luận 12 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
TypeScript
Star
2.8k
Fork
258
Merge trung bình
3 ngày 1 giờ
Pull request đã merge (30 ngày)
2

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.