search

wix / react-native-navigation

A complete native navigation solution for React Native
https://wix.github.io/react-native-navigation/
MIT License
13.04k stars 2.67k forks source link

Black icon bottomTab #6573

Open vdino96 opened 4 years ago

vdino96 commented 4 years ago

Issue Description

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). image

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

danilobuerger commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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

danilobuerger commented 4 years ago

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

vdino96 commented 4 years ago

@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 commented 4 years ago

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

stale[bot] commented 4 years ago

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.

Peeeep commented 3 years ago

We have a similar issue where the bottom tab icon changes to a white icon in a certain condition on Android. In our case, we use the same png file (in white) for a bottom tab icon (in black using iconColor) and for a top bar icon (of a different screen; white) – and as soon as we use mergeOptions to change something in said topBar, the bottom tab icon turns white as well…

stale[bot] commented 3 years ago

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.

kirillwillgetitdone commented 2 years ago

have the same issue on Android 13 After going back from screen where bottom tabs were hidden, one of the tabs becomes selected and it doesn't change until I push tab based stack again

Hesowcharov commented 1 year ago

Hey!

We've been experiencing similar issue in our project too. In our particular case we figured out that we had applied 'options' with 'bottomTab' property to a component inside stack but not the whole stack! There is why the tab bar icon was changing on pushing new screen in that stack. For example, take a look at the playground project https://github.com/wix/react-native-navigation/blob/d7ed24b7f6d6a94768c5e7256d7a9874a6562ec5/playground/src/app.ts#L41-L56