Bottom Tabs Shadow Not Displaying On Android

[JPStrydom]

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
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
• See this previous comment for more info.

Preview

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

[lukewalczak]

Which react-native-paper version are you using – the snack presents 4.7.2, however the Your Environment section indicates 5.2.0? If 5.2.0 is correct then what MD version are you aiming for?

[JPStrydom]

Which react-native-paper version are you using – the snack presents 4.7.2, however the Your Environment section indicates 5.2.0? If 5.2.0 is correct then what MD version are you aiming for?

We're using 5.2.0 for react-native-paper locally, and it has the same issue shadow. We're currently targeting the default MD version for 5.2.0 which I believe is MD3.

[JPStrydom]

I suspect this issues from react-navigation could be related.

[JPStrydom]

Which react-native-paper version are you using – the snack presents 4.7.2, however the Your Environment section indicates 5.2.0? If 5.2.0 is correct then what MD version are you aiming for?

We're using 5.2.0 for react-native-paper locally, and it has the same issue shadow. We're currently targeting the default MD version for 5.2.0 which I believe is MD3.

I just tried it in the Snack with 5.2.0 and got the same result - no shadow on Android

[lukewalczak]

We're using 5.2.0 for react-native-paper locally, and it has the same issue shadow. We're currently targeting the default MD version for 5.2.0 which I believe is MD3.

Thanks for the clarification! Based on the documentation, there shouldn't be a shadow / elevation, so it's not a bug. If there is no option to add it, we can consider adding it as a feature request, based on the higher demand.

[JPStrydom]

We're using 5.2.0 for react-native-paper locally, and it has the same issue shadow. We're currently targeting the default MD version for 5.2.0 which I believe is MD3.

Thanks for the clarification! Based on the documentation, there shouldn't be a shadow / elevation, so it's not a bug. If there is no option to add it, we can consider adding it as a feature request, based on the higher demand.

Thanks for looking into it and getting back to me, much appreciated! How do we go about making this a feature request?

[lukewalczak]

Thanks for looking into it and getting back to me, much appreciated! How do we go about making this a feature request?

Since, it's rather the addon feature (something the MD is not supporting, but we can handle due to higher demand, without adding a dedicated prop) to BottomNavigation I would suggest adding support for it via barStyle as presented in the description.

[russellpeiris]

I have the same issue and I support this.

[ashaller2017]

i would like to add the shadow to bar style as well

[ItsFlash10]

This feature should be added

We're using 5.2.0 for react-native-paper locally, and it has the same issue shadow. We're currently targeting the default MD version for 5.2.0 which I believe is MD3.

Thanks for the clarification! Based on the documentation, there shouldn't be a shadow / elevation, so it's not a bug. If there is no option to add it, we can consider adding it as a feature request, based on the higher demand.