[Expo-Router] Header Pressable Components Not Responding Correctly to Touch Events

Minimal reproducible example

https://github.com/MrPancakes39/expo-router-onPress-navigation-bug

Which package manager are you using? (Yarn is recommended)

npm

If the issue is web-related, please select the bundler (web.bundler in the app.json)

None

Summary

Having Pressable, TouchableOpacity, or PlatformPressable in the header of a screen will make it not fire onPress event handler. Furthermore, putting a finger down will automatically fire onPressIn then onPressOut handlers even if the finger didn't lift up from the Pressable Component.

Environment

expo-env-info 1.2.2 environment info:
    System:
      OS: Linux 6.9 Pop!_OS 22.04 LTS
      Shell: 3.3.1 - /usr/bin/fish
    Binaries:
      Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
      npm: 10.8.3 - ~/.nvm/versions/node/v22.11.0/bin/npm
      Watchman: 4.9.0 - /usr/bin/watchman
    IDEs:
      Android Studio: AI-241.18034.62.2411.12071903
    npmPackages:
      expo: ^52.0.30 => 52.0.30
      expo-router: ~4.0.6 => 4.0.17
      react: 18.3.1 => 18.3.1
      react-dom: 18.3.1 => 18.3.1
      react-native: 0.76.6 => 0.76.6
      react-native-web: ~0.19.10 => 0.19.13
    npmGlobalPackages:
      eas-cli: 13.4.2
    Expo Workflow: managed

Note: We've had this bug from when Expo 52 basically came out with React Native 0.76 and React Navigation v7

Related issues: #12418, #12274

Also related issue: https://github.com/react-navigation/react-navigation/issues/7052

A workaround is to use onPressIn, which works for now in the meantime.

https://github.com/react-navigation/react-navigation/issues/7052#issuecomment-2558390675

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.