onPress not fire occasionally when pressing

[flixyudh]

Description

onPress props not always run (occasionally) each time pressed

Version

0.70.3

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 12.5.1
  CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Memory: 37.07 MB / 16.00 GB
  Shell: 5.8.1 - /bin/zsh
Binaries:
  Node: 16.13.2 - /usr/local/bin/node
  Yarn: 1.22.10 - /usr/local/bin/yarn
  npm: 8.5.5 - /usr/local/bin/npm
  Watchman: 2022.03.21.00 - /usr/local/bin/watchman
Managers:
  CocoaPods: 1.11.2 - /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
  Android SDK:
    API Levels: 27, 28, 29, 30, 31
    Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.2, 30.0.3, 31.0.0
    System Images: android-23 | Intel x86 Atom_64, android-28 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 4.1 AI-201.8743.12.41.6953283
  Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
  Java: 11.0.13 - /usr/bin/javac
npmPackages:
  @react-native-community/cli: Not Found
  react: 18.1.0 => 18.1.0 
  react-native: 0.70.3 => 0.70.3 
  react-native-macos: Not Found
npmGlobalPackages:
  *react-native*: Not Found

Steps to reproduce

use any Touchable component (Pressable, TouchableOpacity, etc) and put console.log in onPress function

Snack, code example, screenshot, or link to a repository

var showup = 0

<TouchableOpacity
  onPress={() => {
    showup += 1;
    console.log("LOGGED", showup);
  }}
  delayPressIn={0}
>
  <Text> SHOW LOG </Text>
</TouchableOpacity>

bug.mp4

[ahmetbilgay]

Use useState

Example

const [shopUp,setShopUp] = useState(0)

const increment = () => {
     setShopUp(shopUp + 1)
}
<TouchableOpacity
  onPress={increment}
  delayPressIn={0}
>
  <Text> SHOW LOG </Text>
  <Text>{shopUp}</Text>
</TouchableOpacity>

[flixyudh]

it's about the onPress it self, you can see in my video at 8th second i've spam button but the onPress not trigger even the opacity has already show up

[srinivastalnikar]

facing the same issue, onPressIn is called everytime but onPress event somehow isn't called, any leads?

[vrgimael]

This looks similar to my issue, do you observe the same behaviour? #36710

[necolas]

I couldn't reproduce this issue with the information provided. Sometimes onPress is cancelled by long press and other scenarios (see here). Difficult to tell if any of those situations are occurring in your case, or if it's something else, as there's no test case included. Going to close this in favor of #36710

[ziXiong]

do you have the new architecture on ? I face the same case when I turn on new architecture，but everything is ok when i turn off new architecture。

[ice-cap0]

seeing this issue as well, on all Touchable and Pressable elements, investigating, will report back

[renopp]

do you have the new architecture on ? I face the same case when I turn on new architecture，but everything is ok when i turn off new architecture。

+1
When the new arch is enabled, sometimes onPress is not triggered

[xts-bit]

Any updates on this?

[nickschinestzki]

It reproduces in react-native: 0.72.6

[airam666]

same issue on "react-native": "0.72.3"

[airam666]

Any updates on this?

nope they are not fixing it apparently

[harish-dalal]

Any updates, Facing the same issue

[davidcarboni]

I think I'm seeing this in 0.76.3 - sometime I need to press half a dozen times before onPress is called. I can see onPressIn and onPressOut are being called every time, but onPress sometimes takes 2-8 taps before it triggers.

[benjipott]

Please this issue should be reopened

[leGenti]

Experiencing the same issue in react-native 0.76.5 and react-native-screens 4.1.0.

Changing onPress to onPressIn seems to fix this issue or at least I can no longer reproduce it.

[Dallas62]

@leGenti Can you provide a reproducer, if you are able to reproduce it ?

I was not able to reproduce it on my tests devices (but users has the issue).

[leGenti]

@Dallas62, sadly I can't provide an example. The company I work for wouldn't appreciate it.

These are the environment and packages/versions I'm using:

npx expo-env-info

expo-env-info 1.2.2 environment info:
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 20.18.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
npmPackages:
expo: ~52.0.18 => 52.0.18
expo-router: 4.0.11 => 4.0.11
react: 18.3.1 => 18.3.1
react-native: 0.76.5 => 0.76.5
Expo Workflow: managed

package.json : dependencies/devDependencies

"dependencies": {
"@gorhom/bottom-sheet": "^4",
"@react-native-async-storage/async-storage": "1.23.1",
"@shopify/flash-list": "1.7.1",
"@typescript-eslint/parser": "^8.19.0",
"eslint": "^9.17.0",
"eslint-config-universe": "^14.0.0",
"eslint-plugin-react-native": "^5.0.0",
"expo": "~52.0.18",
"expo-asset": "~11.0.1",
"expo-blur": "~14.0.2",
"expo-constants": "~17.0.3",
"expo-file-system": "~18.0.5",
"expo-font": "~13.0.1",
"expo-image": "~2.0.3",
"expo-image-manipulator": "~13.0.5",
"expo-linear-gradient": "~14.0.1",
"expo-linking": "~7.0.3",
"expo-localization": "~16.0.0",
"expo-print": "~14.0.2",
"expo-router": "4.0.11",
"expo-sharing": "^13.0.0",
"expo-splash-screen": "~0.29.18",
"expo-sqlite": "~15.0.3",
"expo-status-bar": "~2.0.0",
"expo-system-ui": "~4.0.6",
"i18next-browser-languagedetector": "^8.0.2",
"lodash": "^4.17.21",
"react": "18.3.1",
"react-native": "0.76.5",
"react-native-country-flag": "^2.0.2",
"react-native-gesture-handler": "~2.20.2",
"react-native-iconify": "^0.2.10",
"react-native-localize": "^3.2.0",
"react-native-pager-view": "6.5.1",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.1.0",
"react-native-svg": "15.8.0",
"react-native-tab-view": "^4.0.5",
"react-native-webview": "13.12.5",
"twrnc": "^3.6.4"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/eslint-parser": "^7.25.9",
"@eslint/compat": "^1.2.4",
"@piwikpro/react-native-piwik-pro-sdk": "^1.0.9",
"@types/lodash": "^4.17.13",
"@types/react": "18.3.12",
"@types/react-native": "^0.73.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
"csvtojson": "^2.0.10",
"i18next": "^23.5.1",
"prettier": "^3.4.2",
"react-i18next": "^13.2.2",
"sqlite": "^5.0.1",
"sqlite3": "^5.1.6",
"tailwindcss": "3.3.2",
"typescript": "~5.3.3"
},

[Chuksjohnleo]

Same issue on "react-native": "0.76.7".
onPressIn works but not onPress.
This happens only in some components

[ChristopherGabba]

Has anyone figured a workaround for this besides onPressIn()? The problem where this error occurs is on a context menu area where I can't use onPressIn() because it fires the context menu and performs the onPress event. Definitely understand the difficulty of trying to reproduce this because even I have difficulty reproducing it in my own app. It seems to almost happen at random.

[Dallas62]

Hi @ChristopherGabba, I was able to fix it by using React-Native Gesture Handler Button instead. But care, you cannot replace all buttons with RNGH. I only replaced those reported as not working (in Flatlist). Also, I used a boolean parameter to easy rollback later.
@leGenti No problem, it's just I was not able to reproduce it, only end-user reports...