Bottom Navigation has an incorrect touchable ripple

[ericpoulinnz]

Current behaviour

The M3 Bottom Navigation component has a touchable ripple on the nav buttons (this at least happens on Android)

Expected behaviour

This is not to spec. There should not be a ripple here, see Google's M3 apps like Gmail to see how it should be done.

How to reproduce?

Add a Bottom Navigator to an app and test on an Android device

Your Environment

software	version
android	13
react-native	0.70.5
react-native-paper	5.1.3

[lukewalczak]

Hey @ericpoulinnz, as far as I remember the rippleColor for BottomNavigation in the v5 doesn't have a ripple effect - rippleColor is set to 'transparent'.

[ericpoulinnz]

Hey @lukewalczak, thanks for the reply. This is happening in the React Native Paper demo app. See in the video when I touch the tabs, there's a touch ripple effect. It should not have that effect if we are following M3 design. See apps like Gmail or Drive for how it works (without that ripple). Not a major one, but something that isn't quite right in this library.

screen-20230210-1015012.mp4

[lukewalczak]

Hey @ericpoulinnz, looks like something has changed in Android 13 🤔 I was not able to reproduce it before on the physical device with Android 12. Will take a look on that!

[BeeMargarida]

A bug has been reported on Android side - https://issuetracker.google.com/issues/267563676
Should a fix still be made to patch this problem on react-native-paper side, or we wait for the solution on Android side?

[lukewalczak]

Hey @BeeMargarida thanks for attaching the report – if the root of the issue comes directly from Android I will avoid introducing the patch to the library itself and we should wait for their move. I'm going to close the issue since we will not work on it. At the same time, it will be pinned on the issue page.

[ericpoulinnz]

Hi @BeeMargarida @lukewalczak , I see that the underlying Android issue was fixed a few weeks ago. Are we waiting for a release on their end now or still something needed on the react-native-paper end?

I'm on a Google Pixel 6 so should expect to be close to the latest.

[victoriomolina]

Having same problem

[michaelkremenetsky]

anyone know how to go about patching this?

[ericpoulinnz]

This issue is fixed on my phone with the latest Android now :) Don't think this issue needs to be pinned anymore