Invisible View created by ResourceSavingScene on Bottom Tabs

[app-rc]

Current Behavior
Hi everyone,

• What code are you running and what is happening?
  I set up, a small menu, with 2 bottom tabs.

When you scroll on MENU_1, all works fine. If you click MENU_2 and comme back MENU_1, scroll is no more working.
It seems that an hidden View is hover with overflow: hidden, position absolute, top 0, left 0, bottom 0 right 0...

When I inspect > BottomTabNavigator > BottomTabView > ResourceSavingScene > View > RCTView.

All packages are up to date :(

Expected Behavior

• What do you expect should be happening?
  To scroll again on Menu_1 after tab switch.

How to reproduce
https://snack.expo.io/@app-rc/tabs

Your Environment

software	version
expo: 40.0.1
"expo-constants": "~9.3.1",
"react-native-screens": "~2.15.0",
"@react-navigation/native": "5.9.2",
"@react-navigation/bottom-tabs": "5.11.5",
"react-native-safe-area-context": "3.1.9"

node: v12.20.1
npm: 6.14.11

Thank you for your help :)

[github-actions]

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

• @react-navigation/native (found: 5.9.1, latest: 5.9.2)
• @react-navigation/bottom-tabs (found: 5.11.4, latest: 5.11.5)

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

[app-rc]

Yes issue is still existing after upgrade to last version !

[SebastianDaehnrich]

i have the same issue

[klandell]

Same issue here

[thimo1]

Same with @react-navigation/drawer v5.12.0 when using @react-navigation/native v5.9.2. After downgrading to @react-navigation/drawer to v5.11.5, issue is gone.

[Maxime-Fleurant]

i use @react-navigation/bottom-tabs": "^5.11.5" and i have the same probleme

[Maxime-Fleurant]

@react-navigation/bottom-tabs downgraded to 5.11.3 worked for me

[frabanca]

Hi everyone!

The issue should not be closed: downgrading is not a solution in my opinion.
I've this packages:

"@react-navigation/drawer": "^5.12.2",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.1",

I've the same problem. I've tried to install v . 5.11.5, v. 5.11.3 and also v. 5.10.9 of @react-navigation/drawer, but the issue remains.

The issue presents only on Android (v. 9), both iOS simulator (iPhone 12) and iPhone (tested on a iPhone 6S) works fine.

Here it's a screenshot from the android phone with the inspector. As you can see there's a invisible View with absolute position that prevents from tapping any touchable element.

Any suggestion for some solution and/or some workaround?

Cheers

[app-rc]

Fixed in 5.11.6 !

[frabanca]

Hi!

I suppose you are talking about v. 5.11.6 of "@react-navigation/bottom-tabs", but as per my previous post I don't have it installed.
I only have:

 "@react-navigation/drawer": "^5.12.6",
  "@react-navigation/native": "^5.9.2",
  "@react-navigation/stack": "^5.14.1",

and the problem persists.

Any idea on how to fix?

[frabanca]

I've checked how you fixed this bug in v. 5.11.6 of "@react-navigation/bottom-tabs", and I applied the same fix in "@react-nativation/drawer".

Quick-and-dirty fix: add this pointerEvents="box-none" to the "Animated.View" element in node_modules/@react-navigation/drawer/src/views/Drawer.tsx on row 695.

Final result:

        <Animated.View
            accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
            removeClippedSubviews={Platform.OS !== 'ios'}
            onLayout={this.handleDrawerLayout}
            style={[
              styles.container,
              {
                transform: [{ translateX: drawerTranslateX }],
                opacity: this.drawerOpacity,
              },
              drawerType === 'permanent'
                ? // Without this, the `left`/`right` values don't get reset
                  isRight
                  ? { right: 0 }
                  : { left: 0 }
                : [
                    styles.nonPermanent,
                    isRight ? { right: offset } : { left: offset },
                    { zIndex: drawerType === 'back' ? -1 : 0 },
                  ],
              drawerStyle as any,
            ]}
            pointerEvents="box-none"
          >
            {renderDrawerContent({ progress })}
          </Animated.View>

This fix the problem also on "@react-nativation/drawer".

[bigcupcoffee]

@satya164 mind bumping bottom-tabs version on npm? It's just 5.11.6 for me

[satya164]

@bigcupcoffee can you try 5.11.7?

[bigcupcoffee]

Works fine now 👍

[frabanca]

I've checked how you fixed this bug in v. 5.11.6 of "@react-navigation/bottom-tabs", and I applied the same fix in "@react-nativation/drawer".

Quick-and-dirty fix: add this pointerEvents="box-none" to the "Animated.View" element in node_modules/@react-navigation/drawer/src/views/Drawer.tsx on row 695.

Final result:

        <Animated.View
            accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
            removeClippedSubviews={Platform.OS !== 'ios'}
            onLayout={this.handleDrawerLayout}
            style={[
              styles.container,
              {
                transform: [{ translateX: drawerTranslateX }],
                opacity: this.drawerOpacity,
              },
              drawerType === 'permanent'
                ? // Without this, the `left`/`right` values don't get reset
                  isRight
                  ? { right: 0 }
                  : { left: 0 }
                : [
                    styles.nonPermanent,
                    isRight ? { right: offset } : { left: offset },
                    { zIndex: drawerType === 'back' ? -1 : 0 },
                  ],
              drawerStyle as any,
            ]}
            pointerEvents="box-none"
          >
            {renderDrawerContent({ progress })}
          </Animated.View>

This fix the problem also on "@react-nativation/drawer".

UPDATE

Previous dirty-fix doesn't really solve the problem. The following works better in my case.

Prerequisites

• Install those packages:

"@react-navigation/drawer": "^5.12.3",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",

How to fix

• Go to /node_modules/@react-navigation/drawer/src/views/ResourceSavingScene.tsx
• Search for "pointerEvents", you should find 3 occurrences. In each of this occurrence, replace 'none' with 'box-none'. Example: pointerEvents={isVisible ? 'auto' : 'box-none'}
• Rebuild your app

I can see some line of code with this comment "box-none doesn't seem to work properly on Android", maybe this solution depends on the Android phone OS?. In my case it was an Android 10 on a Samsung S9+.

[ndotie]

I've checked how you fixed this bug in v. 5.11.6 of "@react-navigation/bottom-tabs", and I applied the same fix in "@react-nativation/drawer".
Quick-and-dirty fix: add this pointerEvents="box-none" to the "Animated.View" element in node_modules/@react-navigation/drawer/src/views/Drawer.tsx on row 695.
Final result:

        <Animated.View
            accessibilityViewIsModal={isOpen && drawerType !== 'permanent'}
            removeClippedSubviews={Platform.OS !== 'ios'}
            onLayout={this.handleDrawerLayout}
            style={[
              styles.container,
              {
                transform: [{ translateX: drawerTranslateX }],
                opacity: this.drawerOpacity,
              },
              drawerType === 'permanent'
                ? // Without this, the `left`/`right` values don't get reset
                  isRight
                  ? { right: 0 }
                  : { left: 0 }
                : [
                    styles.nonPermanent,
                    isRight ? { right: offset } : { left: offset },
                    { zIndex: drawerType === 'back' ? -1 : 0 },
                  ],
              drawerStyle as any,
            ]}
            pointerEvents="box-none"
          >
            {renderDrawerContent({ progress })}
          </Animated.View>

This fix the problem also on "@react-nativation/drawer".

UPDATE

Previous dirty-fix doesn't really solve the problem. The following works better in my case.

Prerequisites

• Install those packages:

"@react-navigation/drawer": "^5.12.3",
"@react-navigation/native": "^5.9.2",
"@react-navigation/stack": "^5.14.2",

How to fix

• Go to /node_modules/@react-navigation/drawer/src/views/ResourceSavingScene.tsx
• Search for "pointerEvents", you should find 3 occurrences. In each of this occurrence, replace 'none' with 'box-none'. Example: pointerEvents={isVisible ? 'auto' : 'box-none'}
• Rebuild your app

I can see some line of code with this comment "box-none doesn't seem to work properly on Android", maybe this solution depends on the Android phone OS?. In my case it was an Android 10 on a Samsung S9+.

Thanks this works for me