TouchableOpacity onPress not triggering on Android

[sadikyalcin]

Current behavior

Numerous reports on this with existing versions but the issue still exists or we just don't understand how we're supposed to do this. Custom buttons on header components do not trigger on Android. You have to press a couple of times to trigger it. Sometimes it works on the very first tap, sometimes literally it takes about 10 taps.

You do get "visual" feedback from TouchableOpacity but the onPress doesn't fire. I've tried, Pressable, Button, different headerMode, gestureEnabled, zIndex but the outcome is the same.

Expected behavior

The onPress should trigger on first tap. I cannot link a repo but I'll post a component example:

const AppDrawer = createDrawerNavigator();

<NavigationContainer enableURLHandling={true} lazy={true} linking={linking}>
  <AppDrawer.Navigator
    id="mainDrawer"
    backBehavior={"history"}
    drawerContent={renderDrawerContent}
    detachInactiveScreens={false}
    screenOptions={{
      headerShown: false,
      drawerPosition: "left",
      drawerType: "front",
      gestureEnabled: true,
      swipeEdgeWidth: 100,
    }}
  >
    <AppDrawer.Screen
      name="PrivateHomeStack"
      component={PrivateHomeStack}
      initialRouteName={"PrivateHome"}
    />
  </AppDrawer.Navigator>
</NavigationContainer>

import React from 'react';
import {View, Text, TouchableOpacity, Alert, Pressable} from 'react-native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Feather from 'react-native-vector-icons/Feather';

const Stack = createNativeStackNavigator();

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

export default function PrivateHomeStack() {
  return (
    <Stack.Navigator
      initialRouteName={'PrivateHome'}
      screenOptions={{
        headerTitleAlign: 'center',
        headerMode: 'screen',
        gestureEnabled: false,
      }}>
      <Stack.Screen
        name="PrivateHome"
        component={HomeScreen}
        options={({navigation}) => ({
          title: 'App',
          headerLeft: () => (
            <TouchableOpacity
              style={{
                zIndex: 9999, // testing purposes
              }}
              onPress={() => {
                Alert.alert('Pressed');
                navigation.openDrawer();
              }}>
              <Feather name="menu" size={24} color="black" />
            </TouchableOpacity>
          ),
          // headerLeft: () => (
          //   <Pressable
          //     style={{
          //       zIndex: 9999, // testing purposes
          //     }}
          //     onPress={() => {
          //       Alert.alert('Pressed');
          //       navigation.openDrawer();
          //     }}>
          //     <Feather name="menu" size={24} color="black" />
          //   </Pressable>
          // ),
          // headerRight: () => (
          //   <TouchableOpacity
          //     onPress={() =>
          //       navigation.navigate('PrivateHomeStack', {screen: 'Account'})
          //     }>
          //     <Feather name="user" size={24} color="black" />
          //   </TouchableOpacity>
          // ),
        })}
      />
    </Stack.Navigator>
  );
}

Reproduction

n/a

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

• [Yes] I've removed the packages that I don't use

package	version
@react-navigation/drawer	^7.1.1
@react-navigation/elements	^2.2.5
@react-navigation/native	^7.0.14
@react-navigation/native-stack	^7.2.0
@react-navigation/stack	^7.1.0
react-native	0.76.3
react	18.3.1

[github-actions]

Hey @sadikyalcin! 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.

[SetRedEyes]

same problem

[Tadeo-Guerstein]

I have the same problem!!!!

[Ademola101]

Same issue

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.