Topmost BottomNavigation scenes intercept clicks while not active

[digitaltoad]

Current behaviour

Using BottomNavigation with React Navigation on the web, the top most scene, (over simplifying, right most tab), if mounted, will intercept clicks while not active. This seems to be a problem with pointer-events within that scene.

Expected behaviour

I would expect that when a tab is inactive, it does not intercept pointer events.

Code sample

https://snack.expo.io/@digitaltoad/bottonnavigation-react-navigation-web-bug

What have you tried

I've pulled back to 3.x versions of react-native-paper and this problem disappears.

Your Environment

software	version
ios or android	N/A
react-native	0.64.2
react-native-paper	4.9.2
react-native-vector-icons	8.1.0
node	15.10.0
yarn	1.22.10
npm	7.5.3
expo	42.0.0

https://snack.expo.io/@digitaltoad/bottonnavigation-react-navigation-web-bug

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

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:

• react-native (found: 0.64.2, latest: 0.65.1)
• yarn (found: 1.22.10, latest: 1.22.11)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.64.2, latest: 0.65.1)
• yarn (found: 1.22.10, latest: 1.22.11)
• npm (found: 7.5.3, latest: 7.21.1)
• expo (found: 42.0.0, latest: 42.0.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[digitaltoad]

It still exists.

[Neyxo]

I can reproduce it as well and I think this is the same issue as #2366

There seems to be a fix with #2548 but unfortunately, it doesn't seem like it's going to be merged..

[lukewalczak]

Issue should be fixed by: #2985.
Please try to upgrade paper to the latest version 4.11.1