Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-native-web createMaterialBottomTabNavigator delivers clicks to background tabs

See original GitHub issue

Current behaviour

I have a material bottom tab navigator where each tab contains a stack of screens
on mobile it works fine
if I use a non-Paper bottom tab createBottomTabNavigator, it works fine on the
with a Paper bottom tab, on react-native-web, once they have been rendered once, background tabs get clicks

Expected behaviour

I expect only the frontmost tab to get clicks

Code sample

Screenshots (if applicable)

What have you tried

Your Environment

software	version
ios or android	web
react-native	0.62.2
react-native-paper	4.4.0 (which contains a recent fix for getting tabs to show up the first time the user clicks to them)
node	10.17.0
yarn	1.22.10
react-native-vector-icons	6.6.0
expo sdk	no Expo

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:12 (6 by maintainers)

Top GitHub Comments

1reaction

Trancevercommented, Jan 4, 2021

@paour @jasperro I am closing this for now. Please reopen if the issue still occurs and please provide a repro 🙏 .

1reaction

jasperrocommented, Nov 21, 2020

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.