drawer bug - android - rn 0.76.3

[nigelrudolf]

Current behavior

On android, pressing on a drawer item does not navigate to the corresponding screen unless pressed very close to the drawer item text. A video showing this behaviour is included.

Code to reproduce:

import './gesture-handler';
import React from 'react';
import {
  Text,
  View,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';


function App(): React.JSX.Element {

  const Drawer = createDrawerNavigator();

  const HomeScreen = () => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
  const ProfileScreen = () => {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
      </View>
    );
  }

  return (
    <NavigationContainer>
     <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default App;

https://www.youtube.com/shorts/1KKELfcDdJE

Expected behavior

Pressing anywhere across the full width of the drawer item should navigate to the corresponding screen.

Reproduction

https://github.com/nigelrudolf/drawer-bug

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

• @react-navigation/bottom-tabs
• @react-navigation/drawer
• @react-navigation/material-top-tabs
• @react-navigation/stack
• @react-navigation/native-stack
• react-native-drawer-layout
• react-native-tab-view

Environment

"dependencies": {
"@react-navigation/drawer": "^7.0.19",
"@react-navigation/native": "^7.0.13",
"react": "18.3.1",
"react-native": "0.76.3",
"react-native-gesture-handler": "^2.21.2",
"react-native-reanimated": "^3.16.3",
"react-native-safe-area-context": "^4.14.0",
"react-native-screens": "^4.3.0"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "15.0.1",
"@react-native-community/cli-platform-android": "15.0.1",
"@react-native-community/cli-platform-ios": "15.0.1",
"@react-native/babel-preset": "0.76.3",
"@react-native/eslint-config": "0.76.3",
"@react-native/metro-config": "0.76.3",
"@react-native/typescript-config": "0.76.3",
"@types/react": "^18.2.6",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "18.3.1",
"typescript": "5.0.4"
},
"engines": {
"node": ">=18"
}
}

[github-actions]

Hey @nigelrudolf! Thanks for opening the issue. It seems that the issue doesn't contain a link to a repro, or the provided repro is not valid (e.g. broken link, private repo, code doesn't run etc.).

The best way to get attention to your issue is to provide an easy way for a developer to reproduce the issue.

You can provide a repro using any of the following:

• Expo Snack
• TypeScript Playground
• GitHub repo under your username

A snack link is preferred since it's the easiest way to both create and share a repro. If it's not possible to create a repro using a snack, link to a GitHub repo under your username is a good alternative. Don't link to a branch or specific file etc. as it won't be detected.

Try to keep the repro as small as possible by narrowing down the minimal amount of code needed to reproduce the issue. Don't link to your entire project or a project containing code unrelated to the issue. See "How to create a Minimal, Reproducible Example" for more information.

You can edit your original issue to include a link to the repro, or leave it as a comment. The issue will be closed automatically after a while if you don't provide a valid repro.

[nigelrudolf]

repro: https://github.com/nigelrudolf/drawer-bug

[Tobbe]

@nigelrudolf I think I might be seeing the same thing. But for me even if I press on the text it eventually stops working. Like after 10 or 20 navigations it stops responding. And also, if I press outside of the text it will eventually trigger a navigation. If I quickly just keep pressing the same item (outside of the text) for 20-60 seconds it will navigate to the page. Do you see the same behavior?

[huarlensouza]

I used the version @react-navigation/drawer: "^7.0.19", and it caused the same issue but this only happens on physical devices; emulators work fine.

However, with the version @react-navigation/drawer: "6.7.2", it works perfectly.

[dickv]

Same problem ("@react-navigation/drawer": "^7.0.19").
Android emulator works just fine. Running on two physical devices (Samsung S9+ / Samsung A55 5G), both have the same problem.

Pressing hamburger icon => pressing menu item => nothing happens
Pressing hamburger icon => pressing just in front of menu item text => changes screen
Sliding drawer open => pressing menu item => works as intended

Image

[lovegaoshi]

i want to add this is a newarch problem in my case. If I use v7 with old arch its fine, with new arch it happens about 30% of the time, closing and re-opening the drawers most of the time resolves it.

[guiac]

Its happening the same thing here. What is the workaround to solve it?

[Code-Divine]

This is embarrassing how can you simply break core functionality. here is another repo with the bug https://github.com/Code-Divine/rn-drawer-test The repo has nothing, literally nothing but the drawer, and it doesn't work on android.

[david-phx]

I can confirm that I am experiencing the same issue with Expo version 52.0.18 and React Native 0.76.5 on a Google Pixel. Works fine on Expo 52.0.17 and React Native 0.76.3 though.

This only occurs when the drawer is opened using the hamburger menu, navigation works when the drawer is opened by swiping.

There's another issue #12329 for this bug.