Black icon bottomTab

[vdino96]

Issue Description

• In a very specific scenario, the icon in Bottom Tabs becomes black, even though we have set iconColor and selectedIconColor (they both work fine except in this scenario). This is nothing but a UI bug, but a very visible one.

Steps to Reproduce / Code Snippets / Screenshots

Create a stack with Bottom Tabs (every tab is separate stack too) -> push a random screen in one of the stacks in bottom tabs -> open any modal -> close the modal. In this scenario, the tab with a screen pushed into it gets black icon (screenshot below).

Also, the icon becomes normal color again if I use popToRoot or just close the screen that's pushed into it and then repeat the open/close modal again.

Environment

• React Native Navigation version: 6.5/6.12/7.0 (all have the same bug)
• React Native version: 0.63
• Platform(s) (iOS, Android, or both?): Both
• Device info (Simulator/Device? OS version? Debug/Release?): every device, every os version, both debug and release

[danilobuerger]

I just tried this with the current playground app and couldn't reproduce it. Please provide a minimal reproducible example (preferably based on the playground app) to show this bug.

[vdino96]

Hello @danilobuerger, I have modified my playground app from previous issue that I made. https://github.com/vdino96/react-native-navigation-issue here it is.

Okay so, just click the text on the screen in the order that it is shown. Create bottom tab root -> etc... -> Close modal. When you close the modal, you will see that the "First" stack will get a black icon. Prior to that, you can see that I've set iconColor to "green" and selectedIconColor to "red", just so it is easier to identify the wrong color.

If you have any more questions about how to use the playground app, please feel free to ask.

[vdino96]

@danilobuerger , something that might also help in finding the issue:
Once the icon goes black, you can switch tabs, but it will still stay black. They way to return it to normal state is to close the Second screen via the arrow in top bar. After that, go to "Second" tab and just open the modal via the text on the screen. Once you close the modal again, with "First" tab being on its root, the icon color will go back to normal.

[danilobuerger]

Could you please update it to use the current v7 version?

[danilobuerger]

Also, the sample doesn't seem to be set up for iOS.

[vdino96]

@danilobuerger sorry for the late response. I have upgraded the repo to use v7, so you can try it now. Could you please try to reproduce it on android first and if the issue is really there for you too, I can set up the sample for iOS too.

[vdino96]

@danilobuerger I've upgraded my main app to v7 and the issue is resolved for iOS platform. On Android it remains the same

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.