search

callstack / react-native-paper

Material Design for React Native (Android & iOS)
https://reactnativepaper.com
MIT License
12.96k stars 2.1k forks source link

navigation background color and bottom tab ripple #4118

Open FouadMagdy01 opened 1 year ago

FouadMagdy01 commented 1 year ago

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 commented 1 year ago

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

FouadMagdy01 commented 1 year ago

Sure @lukewalczak. Here is the difference Screenshot_2023-10-07-18-32-34-851_com google android apps docs

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

Screenshot_2023-10-07-18-32-46-186_com callstack reactnativepaperexample

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

Screenshot_2023-10-07-18-11-36-890_com callstack reactnativepaperexample

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

FouadMagdy01 commented 1 year ago

https://github.com/callstack/react-native-paper/assets/88867595/0c6e32bf-6bb9-4e7c-be01-426a9898e7a8

This is the ripple effect behavior in google drive app

https://github.com/callstack/react-native-paper/assets/88867595/df658e4a-d456-4188-87f5-6762441c4d56

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 commented 1 year ago

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 commented 1 year ago

Thanks so much for your great work and active replies