Bottom tabs affected by layout backgroundColor

[kevinwaelkens]

🐛 Bug Report

When adding a layout backgroundColor to the navigation options, the bottom tabs are affected by it. This means that when you add a layout backgroundColor 'white', the bottom tabs will be completely white. For that reason I applied a semi-transparent color as backgroundColor so you can still see the bottom tabs.

To Reproduce

1. Run the playground application
2. Notice the bottomTabs are only 50% visible because there's a 50% red color overlay.
3. Change the backgroundColor: 'rgba(255,0,0, .5)' to eg. backgroundColor: 'white', and notice the bar is fully white.

Expected behavior

I expect the bottomTab buttons to be visible.

Actual Behavior

The bottomTab buttons are affected by the backgroundColor of the layout property.

Your Environment

• React Native Navigation version: 7.25.3
• React Native version: 0.66.3
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Android Emulator Android 12 API 31

Reproducible Demo

https://github.com/kevinwaelkens/react-native-navigation/tree/bug/bottom-tabs-disappearing

Are you willing to resolve this issue by submitting a Pull Request?

• ✖️   Yes, I have the time, and I know how to start.
• ✅   Yes, I have the time, but I don't know how to start. I would need guidance.
• ✖️   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.

[SYoder1]

After updating to 7.25.3 I am seeing the exact same issue.

[agestaun]

Same problem here. If I remove the background layout, I can see the content of the previous screen while I push another screen. Solutions?

[ghashi]

version 7.25.1 is ok

[yogevbd]

@kevinwaelkens could you please test it with 7.26.0-alpha.1? it should be stable

[kevinwaelkens]

@kevinwaelkens could you please test it with 7.26.0-alpha.1? it should be stable

Confirmed it works, thanks for this! 🙏