callstack / callstack/react-native-paper

Bottom Tabs Shadow Not Displaying On Android

Đang mở
#3,710 10 bình luận 1 reaction 0 người được giao Xem trên GitHub
BottomNavigation feature request
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### Current behaviour
No matter how one styles the react-native-paper bottom tabs, they do not show a top-shadow on Android

### Expected behaviour
Shadows on top of the bottom tabs should display on Android

### How to reproduce?
1. Go to [this Snack](https://snack.expo.io/?platform=android&name=NavigationContainer%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view%40*%2Creact-native-gesture-handler%40*%2Creact-native-pager-view%40*%2Creact-native-paper%40%5E4.7.2%2Creact-native-reanimated%40*%2Creact-native-safe-area-context%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E3.0.0%2C%40react-navigation%2Fbottom-tabs%406.3.1%2C%40react-navigation%2Fdrawer%406.4.1%2C%40react-navigation%2Felements%401.3.3%2C%40react-navigation%2Fmaterial-bottom-tabs%406.2.1%2C%40react-navigation%2Fmaterial-top-tabs%406.2.1%2C%40react-navigation%2Fnative-stack%406.6.1%2C%40react-navigation%2Fnative%406.0.10%2C%40react-navigation%2Fstack%406.2.1&hideQueryParams=true&sourceUrl=https%3A%2F%2Freactnavigation.org%2Fexamples%2F6.x%2Fmaterial-bottom-tab-styled.js)
2. Add the shadow styling to Android
3. See that the shadow doesn't appear on Android

Note:
- This was tested against [@react-navigation/material-bottom-tabs](https://reactnavigation.org/docs/material-bottom-tab-navigator#options)
- See [this previous comment](https://github.com/callstack/react-native-paper/issues/715#issuecomment-1431241323) for more info.

### Preview
![image](https://user-images.githubusercontent.com/25905330/219019050-a10a4d10-de68-499f-9166-fb34e914586d.png)

### Your Environment

| software | version
| --------------------- | -------
| ios | not tested
| android | Android 13
| react-native | 0.70.5
| react-native-paper | 5.2.0
| @react-navigation/material-bottom-tabs | 6.2.15
| node | 18.13.0
| npm | 9.4.0
| expo sdk | 47.0.12

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

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

Hướng nghiên cứu

Bắt đầu với Snack được liên kết và tái hiện phần bóng đổ phía trên còn thiếu trên Android 13 bằng thiết lập React Navigation material bottom-tab được liệt kê. Theo dõi cách kiểu dáng của tab được truyền đến Android view và so sánh cách hiển thị bóng đổ mong đợi với hành vi hiện tại; hoàn thành khi bóng đổ phía trên đã cấu hình hiển thị trên Android mà không làm ảnh hưởng đến giao diện của tab.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native
Lĩnh vực
frontend, mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
35/100

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.