Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bottom Navigation has an incorrect touchable ripple #3661

Closed
ericpoulinnz opened this issue Feb 7, 2023 · 9 comments
Closed

Bottom Navigation has an incorrect touchable ripple #3661

ericpoulinnz opened this issue Feb 7, 2023 · 9 comments

Comments

@ericpoulinnz
Copy link

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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
Copy link
Member

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
Copy link
Member

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.

@lukewalczak lukewalczak pinned this issue Feb 15, 2023
@ericpoulinnz
Copy link
Author

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
Copy link
Contributor

Having same problem

@michaelkremenetsky
Copy link

anyone know how to go about patching this?

@ericpoulinnz
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants