navigation background color and bottom tab ripple

[FouadMagdy01]

According to google's official apps that uses material you, there is some differences between the react native paper and the official material you design

1- in the bottom tabs, the ripple effect in the official design is only affect the bottom tab icon, not the whole button

2-when you adapt the react navigation theme, the background color is different from google's official apps background color,
I think the problem is that the background color property in the navigation theme should be the same value as the card property.

I say this because in the example app, the drawer background color have the same color of the google's main apps background color.

Thanks in advance

[lukewalczak]

Hey @FouadMagdy01, could you please attach the screenshots presenting the differences to visualize them?

[FouadMagdy01]

Sure @lukewalczak.
Here is the difference

This is a screen from google drive app, you see the background color

Here is a screen from the example app, the background color is not the same

The navigation background color should be similar to the drawer background color

[FouadMagdy01]

Screenrecorder-2023-10-07-18-35-36-5091.mp4

This is the ripple effect behavior in google drive app

Screenrecorder-2023-10-07-18-35-50-4411.mp4

And this is the behavior in the example app

There should be two changes

1- ripple color should be changed
2- ripple effect should be moved from the whole tab button to be only in the icon

[lukewalczak]

1- in the bottom tabs, the ripple effect in the official design is only affect the bottom tab icon, not the whole button

as far as I remember initially bottom navigation even doesn't have the ripple effect, that why the rippleColor is set to transparent.

The bug that you've observed is related to the Android 13, it was already reported in the separate issue, however I've received the message it should be fixed.

Anyway I'm going the check the documentation, whether there should be a ripple effect on the icon in the bottom tabs.

2-when you adapt the react navigation theme, the background color is different from google's official apps background color,
I think the problem is that the background color property in the navigation theme should be the same value as the card property.

The issue is not related to the component itself, we are using there just a plain View which doesn't have a specified background color, so it takes some default. I will adjust it to be consistent.

[FouadMagdy01]

Thanks so much for your great work and active replies