callstack / callstack/react-native-paper

Bottom Tabs Shadow Not Displaying On Android

Open
#3,710 10 comments 1 reaction 0 assignees View on GitHub
BottomNavigation feature request
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.