-
-
Notifications
You must be signed in to change notification settings - Fork 2.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react-native-web createMaterialBottomTabNavigator delivers clicks to background tabs #2366
Comments
Couldn't find version numbers for the following packages in the issue:
Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3. The versions mentioned in the issue for the following packages differ from the latest versions on npm:
Can you verify that the issue still exists after upgrading to the latest versions of these packages? |
Couldn't find version numbers for the following packages in the issue:
Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3. The versions mentioned in the issue for the following packages differ from the latest versions on npm:
Can you verify that the issue still exists after upgrading to the latest versions of these packages? |
Seems I overlooked this in my patch. I have no idea what is causing this to happen, maybe something with the z-index? |
If it was the z-index, wouldn't the elements be visible? In my case, the screen looks fine, but clicks are intercepted by (it seems) the last tab (by tab index) that has already been displayed, even if it's not currently the selected tab. |
It seems that in switching a tab, the code only changes the opacity of the current screen to 0 and the active one 1. This means everything is still being rendered, just totally transparently. Replacing this with display: none and display:flex removes the issue, I will see if I can make a pull request. |
Awesome, thanks for jumping on this! |
You can now test my fix by cloning my fix branch |
I was able to verify that this fixes the issue I reported (I used I hope this can be merged before the next release. |
@paour @jasperro Could you provide a repo/snack that reproduces the issue? Does it happen in every browser for you? Or only some specific ones? Besides changing the opacity, we also set |
Hey @Trancever , this certainly still occurs and I can't run my app without patching this with the fix provided by @jasperro Here's how you can easily reproduce the problem https://snack.expo.io/2LxrXYduA It's basically the example of stack navigators for each tab from https://reactnavigation.org/docs/tab-based-navigation but I replaced Try clicking in the button first and notice how you are taken to the Details screen, now notice how after you navigate to Settings then back to Home you can't click on the button anymore because the Settings screen is still rendered on top of it invisibly |
@Trancever I've made a snack too that also shows this issue at https://snack.expo.io/AMAgczEzZ Reproduction steps: Click fab (should show button 1 pressed), switch to Two and click fab (should show button 2 pressed), switch back, click the button again and it will show button 2 pressed instead of button 1. |
Current behaviour
createBottomTabNavigator
, it works fine on theExpected behaviour
Code sample
Screenshots (if applicable)
What have you tried
Your Environment
The text was updated successfully, but these errors were encountered: