Touchable components stop responding randomly

[vrgimael]

Description

We've been experiencing this issue in a couple of our apps, it's kinda driving us mad.

Basically, sometimes, completely unpredictably the touchable areas just stop responding.

We tried reproducing this consistently in several different ways but just couldn't pin point what causes it to happen and in which devices. It happens on both iOS and Android, and also in debug or release mode. Generally, it looks like it only happens after the user has been using the app for a little while (10+ minutes). It seems to happen in any button in the app randomly, and some times it also seemingly randomly starts working again. Closing and opening the app again always fixes the problem.

We had clients complain about it in quite a few occasion, but some of our public testers rarely ever experience this either which makes it even harder to understand.

I spent a very long time investigating it over literally the past entire year, but it's really really hard to debug, because when the issue happens in debug mode, anything you do in the code that causes hot reloading actually "fixes it", making it almost impossible to investigate.

I have added lots of debugging tools to try and understand what happens though, I got a few bits of information that might be able to help.

1. This is not a performance or execution queue issue, as we have other interactive components in the screen that update automatically based on time and these never freeze.
2. Other touch based components seem to continue working like scrolls or maps.
3. The zindex of the buttons I'm trying to interact with is much greater than anything else in the screen.
4. I have tried swapping out our "button" component's touchable with react-native-gesture-handler's, but the issue still persists.
5. This has been going for several different versions of RN and none resolved.
6. When the issue happens, the onPressIn and onPressOut events are fired almost simultaneously with only a few milliseconds difference but onPress is not fired - kinda like what happens when you're scrolling or actually interacting with another gesture handler. I tried to make a fallback mechanism that uses this behaviour to our advantage but it's outcome is not very consistent for a few different reasons.
7. Surprisingly (and this is what makes me think it's an issue with RN and not our code), when this issue happens and you manage to open the RN inspect menu by shaking the device, the tabs in the menu (Inspect, Perf, Network, Touchables) don't even work, exactly the same behaviour observed with our own buttons in the app.
8. It might be out of pure coincidence, but I have only seen this happen in apps that use react-native-maps - one of my hypothesis is that the gesture responder somehow gets confused with the map handler.

As far as I can tell, this has always happened - it's so rare that I was not very bothered by it. But as our apps grow and have a larger userbase now, this issue is coming up more frequently and we need to figure it out some time soon. I suspect this is not too much of a problem in other apps because normally if a problem like this happens you'd just reopen the app and everything is fine again. However, it has already caused bad reviews in the App Store because our app's functionality is really time sensitive and if users aren't able to interact with the screen it's kinda problematic.

I've read all issues related to several relevant keywords in this repo (like touchable, onpressin, not responding, etc...), and there are a few issues that mention similar behaviour https://github.com/facebook/react-native/issues/34999 https://github.com/facebook/react-native/issues/36063 but none have barely any responses (possibly due to the rare nature of the problem).

Any help would be really appreciated. Please let me know if I can provide any other useful information.

Thanks

React Native Version

0.70.6

Output of npx react-native info

System: OS: macOS 13.2.1 CPU: (10) arm64 Apple M1 Max Memory: 192.88 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node Yarn: 1.19.1 - ~/.yarn/bin/yarn npm: 7.24.2 - ~/CodeLeap-Software/Client-Projects/x-follo-mobile/mobile/node_modules/.bin/npm Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1 Android SDK: API Levels: 26, 28, 29, 30, 31, 33 Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 33.0.0 System Images: android-30 | Google Play ARM 64 v8a, android-31 | ARM 64 v8a, android-31 | Google APIs ARM 64 v8a, android-31 | Google Play ARM 64 v8a, android-Sv2 | Google APIs ARM 64 v8a, android-Sv2 | Google Play ARM 64 v8a Android NDK: 22.1.7171670 IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7784292 Xcode: 14.2/14C18 - /usr/bin/xcodebuild Languages: Java: 11.0.13 - /Users/victor/Library/Java/JavaVirtualMachines/azul-11.0.13/Contents/Home/bin/javac npmPackages: @react-native-community/cli: Not Found react: ^18.2.0 => 18.2.0 react-native: ^0.70.6 => 0.70.7 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

The hardest thing about this is that it can't be reliably reproduced. See description above.

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

Example in our own app (that's in the App Stores too), a client sent us this recording of it happening in practice. Looking back now I should have taken more recordings of it but I'm not sure it would be of any use too.

https://user-images.githubusercontent.com/14969223/228675821-fb9b1eac-7228-4276-85ce-5d1c2bf2f284.mp4

EDIT 30/05/23 -> Here are the dependencies for this project:

  "dependencies": {
    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
    "@babel/runtime": "^7.14.6",
    "@faker-js/faker": "^7.3.0",
    "@googlemaps/polyline-codec": "^1.0.1",
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@miblanchard/react-native-slider": "^2.3.1",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-community/netinfo": "^9.3.6",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-firebase/analytics": "^15.2.0",
    "@react-native-firebase/app": "^15.2.0",
    "@react-native-firebase/auth": "^15.2.0",
    "@react-native-firebase/crashlytics": "^15.2.0",
    "@react-native-firebase/messaging": "^15.2.0",
    "@react-native-google-signin/google-signin": "^8.0.0",
    "@react-native-masked-view/masked-view": "^0.2.8",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/native": "^6.0.11",
    "@react-navigation/stack": "^6.2.2",
    "@sentry/react-native": "^3.1.1",
    "callsites": "^3.1.0",
    "date-fns": "^2.29.2",
    "deep-equal": "^2.0.5",
    "deep-object-diff": "^1.1.9",
    "deprecated-react-native-prop-types": "^2.3.0",
    "expo": "^48.0.6",
    "expo-av": "^13.0.2",
    "expo-battery": "^7.0.0",
    "expo-cellular": "^5.0.1",
    "expo-constants": "^14.0.2",
    "expo-keep-awake": "^11.0.1",
    "expo-linear-gradient": "^12.1.2",
    "expo-linking": "^3.2.3",
    "expo-local-authentication": "^13.0.2",
    "expo-location": "^15.0.1",
    "expo-network": "^5.0.0",
    "expo-sensors": "^12.0.1",
    "expo-store-review": "^6.0.0",
    "expo-task-manager": "^11.0.1",
    "faker": "^5.5.3",
    "fs": "0.0.1-security",
    "geolocation-utils": "^1.2.5",
    "libphonenumber-js": "^1.9.25",
    "lodash": "^4.17.21",
    "lottie-ios": "3.4.1",
    "lottie-react-native": "5.1.3",
    "moment": "^2.29.1",
    "npm": "^7.18.1",
    "npm-license-crawler": "^0.2.1",
    "patch-package": "^6.4.7",
    "path": "^0.12.7",
    "pretty-bytes": "^5.6.0",
    "react": "^18.2.0",
    "react-mixin": "^5.0.0",
    "react-native": "^0.70.6",
    "react-native-android-open-settings": "^1.3.0",
    "react-native-animatable": "^1.3.3",
    "react-native-background-timer": "^2.4.1",
    "react-native-contacts": "^7.0.4",
    "react-native-date-picker": "^4.2.5",
    "react-native-device-info": "^10.3.0",
    "react-native-fbsdk-next": "^10.0.0",
    "react-native-flipper": "0.163.0",
    "react-native-geocoding": "^0.5.0",
    "react-native-geolocation-service": "^5.3.0-beta.1",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-get-random-values": "^1.8.0",
    "react-native-google-mobile-ads": "^9.1.1",
    "react-native-google-places-autocomplete": "^2.5.1",
    "react-native-gradle-plugin": "^0.70.0",
    "react-native-iap": "^12.7.2",
    "react-native-image-crop-picker": "^0.38.0",
    "react-native-in-app-review": "^4.3.1",
    "react-native-in-app-utils": "^6.1.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-localize": "^2.2.2",
    "react-native-maps": "^1.3.2",
    "react-native-notification-sounds": "^0.5.5",
    "react-native-onesignal": "^4.5.1",
    "react-native-permissions": "^3.6.0",
    "react-native-pose": "^0.9.1",
    "react-native-push-notification": "^8.1.1",
    "react-native-render-html": "^6.3.4",
    "react-native-ringer-mode": "^2.0.0",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.15.0",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^13.4.0",
    "react-native-system-navigation-bar": "^1.0.5",
    "react-native-system-setting": "^1.7.6",
    "react-native-vector-icons": "^9.2.0",
    "react-redux": "^8.0.2",
    "react-timer-hook": "^3.0.5",
    "react-timer-mixin": "^0.13.4",
    "react-use": "^17.4.0",
    "redux": "^4.2.0",
    "redux-flipper": "^2.0.2",
    "redux-middleware-flipper": "^1.0.9",
    "redux-sentry-middleware": "^0.2.2",
    "redux-thunk": "^2.4.1",
    "rn-async-storage-flipper": "^0.0.10",
    "rn-emoji-keyboard": "^1.0.0",
    "rn-sliding-up-panel": "^2.4.6",
    "url-parse": "^1.5.10",
    "uuid": "^8.3.2",
    "validator": "^13.7.0"
  },

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[necolas]

I think it will be difficult to get attention from the maintainers without a) providing a test case, b) steps to reproduce the issue in the test case, and c) verifying the issue is still present after upgrading to the latest version of React Native

[vrgimael]

Hi @necolas thanks for the feedback, however you really should not close this issue..... other users have mentioned similar problems, please do not ignore this issue just because it happens intermittently.

a) As I said, the problem cannot be reliably reproduced at all b) The problem happens intermittently c) This has been happening through several previous versions of RN... I will upgrade again but this certainly is not the problem.

I provided as much information as I could possibly gather from this and hoped it could be helpful to others too.

[necolas]

Hey. I'm not ignoring it, I'm telling you what this issue needs before engineers at Meta can spent time looking into it.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[etodanik]

For what its' worth, I'm also experiencing it, and it's very hard to understand how to give a reproducible example - because it doesn't happen reliably. But in an intermittent fashion onPress just won't fire for a bunch of times in a row.

I am also using maps.

[NiuGuohui]

I can provide a case:

<View
      style={{ width: 100, height: 100, backgroundColor: '#F00' }}
      onTouchStart={() => {
        console.log('start');
      }}
    >
      <TouchableHighlight
        style={{ flex: 1 }}
        underlayColor="#000"
        onPress={() => {
          console.log(123);
        }}
      >
        <View style={{ width: '100%', height: '100%', flexDirection: 'row', alignItems: 'center' }}>
          <Text>12323</Text>
        </View>
      </TouchableHighlight>
    </View>

Try clicking on the right part of the red area. UI responds but does not trigger onPress event. His parent element View triggered the onTouchStart event. I am using 0.72.0-rc.1 for Android.

It worked normally when I disabled the new architecture!

[etodanik]

@necolas looks like we have a reproducible example :)

[vrgimael]

Hmm I am not using the new architecture though, and this problem seems to have happened for a long time (before new architecture existed).

We tried this example on our project and it doesn't reproduce the issue unfortunately...

Any thoughts would be appreciated.

[NiuGuohui]

Hmm I am not using the new architecture though, and this problem seems to have happened for a long time (before new architecture existed).

We tried this example on our project and it doesn't reproduce the issue unfortunately...

Any thoughts would be appreciated.

Sorry, this is my problem.This is a bug in react-native-screens.

[Nantris]

This is a bug in react-native-screens.

@NiuGuohui can you please share a link to that issue (if there is one) for future readers?

[NiuGuohui]

This is a bug in react-native-screens.

@NiuGuohui can you please share a link to that issue (if there is one) for future readers?

In my case, I want to achieve a similar effect to iOS's UITableView (such as horizontally laid out tabs). When I use this pattern nested in a native-stack, I encounter a similar issue. I think this might be a minor issue with the react-native-screens library. see here Here is my code (in a native-stack screen):

<View style={{ flexDirection: 'row', height: '100%' }}>
  // this is real tabBar component
  <View style={{ width: 60, height: '100%' }} />
  <Tab.Navigator
    initialRouteName="One"
    sceneContainerStyle={{ flex: 1 }}
    screenOptions={{ headerShown: false }}
   // mock a empty tabBar
    tabBar={props => null}
  >
    <Tab.Screen name="One" component={One} />
  </Tab.Navigator>
</View>

[etodanik]

I am using expo-router which I don't think is using react-native-screens and getting the exact same behavior. So it seems like a bug that transcends just one library?

@necolas would be very nice if someone from contributors acknowledges the existence of this, because it makes the app I'm working on have quite degraded UX. You've had a few reports here already?

[vrgimael]

We are experiencing this problem in some of our other apps too, this time with no map component mounted whatsoever (disproving my theory above).

User is unable to interact with any touchable component, but the app is clearly not frozen and scroll gestures work fine.

Closing and reopening the app mysteriously fixes the problem.

https://github.com/facebook/react-native/assets/14969223/8e829428-30a7-4311-9738-1cd1fb0e3457

I'm surprised there aren't many more people complaining about this issue, it certainly happens in many other cases. I can only assume people reopen the app without thinking about it much.

Here are the dependencies for the project:

"dependencies": {
    "@codeleap/common": "*",
    "@codeleap/config": "*",
    "@codeleap/mobile": "*",
    "@faker-js/faker": "6.3.1",
    "@googlemaps/polyline-codec": "^1.0.28",
    "@gorhom/bottom-sheet": "^4.4.5",
    "@gorhom/portal": "1.0.14",
    "@invertase/react-native-apple-authentication": "^2.2.2",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/netinfo": "8.3.1",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-firebase/analytics": "14.4.0",
    "@react-native-firebase/app": "14.4.0",
    "@react-native-firebase/auth": "14.4.0",
    "@react-native-firebase/crashlytics": "14.4.0",
    "@react-native-firebase/messaging": "14.4.0",
    "@react-native-google-signin/google-signin": "^8.0.0",
    "@react-navigation/bottom-tabs": "6.5.3",
    "@react-navigation/drawer": "6.5.7",
    "@react-navigation/native": "6.1.2",
    "@react-navigation/native-stack": "6.9.8",
    "@react-navigation/routers": "6.1.6",
    "@react-navigation/stack": "6.3.11",
    "@sentry/browser": "6.19.7",
    "@sentry/react-native": "3.4.3",
    "@supersami/rn-foreground-service": "^2.1.0",
    "@turf/turf": "^6.5.0",
    "expo": "^48.0.6",
    "expo-cli": "^5.2.0",
    "expo-file-system": "~15.2.2",
    "expo-linear-gradient": "^12.1.2",
    "expo-linking": "3.3.0",
    "expo-local-authentication": "^13.0.2",
    "expo-location": "^15.0.1",
    "expo-task-manager": "^11.0.1",
    "fs": "^0.0.1-security",
    "geolocation-utils": "^1.2.5",
    "global": "^4.4.0",
    "intl": "^1.2.5",
    "libphonenumber-js": "1.10.18",
    "lottie-ios": "3.4.0",
    "lottie-react-native": "5.1.4",
    "moment": "2.29.4",
    "moti": "^0.18.0",
    "npm-license-crawler": "^0.2.1",
    "patch-package": "6.5.1",
    "performance-now": "^2.1.0",
    "react": "18.1.0",
    "react-devtools": "^4.22.0",
    "react-devtools-core": "^4.23.0",
    "react-native": "0.70.6",
    "react-native-animatable": "^1.3.3",
    "react-native-background-timer": "^2.4.1",
    "react-native-base64": "^0.2.1",
    "react-native-battery-optimization-check": "^1.0.8",
    "react-native-blob-util": "^0.14.1",
    "react-native-calendars": "1.1293.0",
    "react-native-circular-progress": "^1.3.7",
    "react-native-circular-progress-indicator": "^2.0.6",
    "react-native-date-picker": "^4.2.6",
    "react-native-device-info": "10.3.0",
    "react-native-document-picker": "8.1.3",
    "react-native-exit-app": "^1.1.0",
    "react-native-fast-image": "8.6.3",
    "react-native-fbsdk-next": "10.1.0",
    "react-native-flipper": "^0.131.1",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-google-places-autocomplete": "^2.5.1",
    "react-native-image-crop-picker": "^0.37.2",
    "react-native-image-viewing": "^0.2.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-maps": "^1.4.0",
    "react-native-mask-input": "1.2.2",
    "react-native-monorepo-tools": "1.2.1",
    "react-native-permissions": "3.6.1",
    "react-native-push-notification": "^8.1.1",
    "react-native-reanimated": "2.14.4",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "3.18.2",
    "react-native-splash-screen": "^3.3.0",
    "react-native-super-grid": "4.6.1",
    "react-native-svg": "12.5.0",
    "react-native-svg-app-icon": "^0.5.1",
    "react-native-system-navigation-bar": "1.0.5",
    "react-native-vector-icons": "^9.2.0",
    "react-native-webview": "11.26.0",
    "react-redux": "^7.2.6",
    "redux-flipper": "^2.0.1",
    "redux-middleware-flipper": "^1.0.9",
    "redux-persist": "^6.0.0",
    "rn-async-storage-flipper": "^0.0.10",
    "rn-sliding-up-panel": "^2.4.6",
    "yup": "^0.32.11"
  },

Thoughts?

[mtjkln]

Hello, Guys,

using React-Native 0.71.8

When using new architecture the touchable works sometimes and sometimes it wont. The moment I build using old architecture it works perfectly.

Please help us @necolas

[necolas]

I tried to help by pointing out that a reproducible example will help the maintainers (not me) more easily look for the root cause of the problem.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[skinsapp]

The issue is triggered when useNativeDriver is set to true as per this issue: https://github.com/facebook/react-native/issues/36504

onPress works until a translation animation -- with useNativeDriver: true -- occurs. Thereafter onPress never works again anywhere in the app.

• android
• 71.10
• both debug + release modes

[etodanik]

@the-skins-app I guess there are a multitude of bugs because I get mine on iOS (not android only) ...

[Crhaj]

I tried to help by pointing out that a reproducible example will help the maintainers (not me) more easily look for the root cause of the problem.

@necolas we understand that reproducible example would help tremendously but it seems like no one can provide that reliably. This issue seems to be completely random @vrgimael even mentioned it is happening across multiple different versions of RN. For us it is only happening in one of our apps where, unfortunately, it is big problem as it needs to be constantly running and communicating with other apps.

It really needs some attention, this is making all applications that need quick & reliable interactions and cannot just be restarted virtually useless.

@vrgimael have you possibly also tried swapping out Touchable components for Pressable? Does the issue persist?

[necolas]

Please stop @-mentioning me

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[cortinico]

Asking again: can we get a smaller reproducer using this template: https://github.com/react-native-community/reproducer-react-native

[horne3754sg]

Hi all, I have been encountering this issue as well.

I noticed that when I disable animations for react navigation, it seems to stop happening. When I enabled animations on navigators, it appears that randomly touch events stop responding, as well as the back button.

I cant reliablity reproduce the issue though, it just happens at random.

Edit: I tried switching all my TouchableOpacity components to react-native-gesture-handler implementations and it seems to have addressed the issue for me.

Having read their docs it states:

Gesture Handler library provides an implementation of RN's touchable components that are based on native buttons and does not rely on JS responder system utilized by RN. Our touchable implementation follows the same API and aims to be a drop-in replacement for touchables available in React Native.

The motivation for using RNGH touchables as a replacement for these imported from React Native is to follow built-in native behavior more closely by utilizing platform native touch system instead of relying on the JS responder system. These touchables and their feedback behavior are deeply integrated with native gesture ecosystem and could be connected with other native components (e.g. ScrollView) and Gesture Handlers easily and in a more predictable way, which follows native apps' behavior.

This leads me to believe the issue is in the JS responder system.

[horne3754sg]

@vrgimael are you able to try and switch the Touch components to the ones from react-native-gesture-handler. You may need to adjust some styling or set the container styling. But its 99% the same as the react-native touch components.

[vrgimael]

Hi @horne3754sg, we have already tried it and the same problem still happens. We were unable to tell whether it makes any different, but it doesn't seem like it.

We also tried Pressable a long time ago and it didn't seem to resolve anything either. Should there be any difference between Pressable and Touchable regarding this?

[vrgimael]

Here's what we're thinking:

We're considering building some automated testing to try to reliably reproduce the issue by just sending touch events in a certain way. This way we should be able to measure whether any of these changes would actually make any impact, because at the moment everything just seems like a hopeful guess.

Did anybody ever do anything similar? What would be the easiest way to go about this?

[horne3754sg]

@vrgimael I have been running into the same issues as well. I have not tried automating some tests.

I have switched all my Touchables to Pressables (which is recommended). But I am still hitting the same issue where they become unresponsive, but if I change the onPress prop to onPressIn, it works. The problem though, is that then causes other issues like in scroll views.

When I look at the log, I can see the different events being logged.

3 taps and the first 2 only inPressIn/onPressOut fire and on the 3rd tap, all 3 onPress events fire.

The problem is I cannot see what is preventing onPress from firing the first 2 taps.

[vrgimael]

Indeed, check point 6 of my OP:

6. When the issue happens, the onPressIn and onPressOut events are fired almost simultaneously with only a few milliseconds difference but onPress is not fired - kinda like what happens when you're scrolling or actually interacting with another gesture handler. I tried to make a fallback mechanism that uses this behaviour to our advantage but it's outcome is not very consistent for a few different reasons.

I tried a solution using this and the x and y velocity to determine whether the user is tapping or trying to scroll, and although this seem to be the best workaround so far, it still doesn't work every time.

It just seems like some other touchable area is intercepting the touch event and preventing it from firing the actual "onPress" trigger of the desired target.

[vrgimael]

The issue is triggered when useNativeDriver is set to true as per this issue: #36504

onPress works until a translation animation -- with useNativeDriver: true -- occurs. Thereafter onPress never works again anywhere in the app.

• android
• 71.10
• both debug + release modes

Regarding this - we observed the problem in both Android and iOS, so it might not actually be the same problem, although I'll do some more tests with animations as something related seems plausible.

[Crhaj]

The issue is triggered when useNativeDriver is set to true as per this issue: #36504 onPress works until a translation animation -- with useNativeDriver: true -- occurs. Thereafter onPress never works again anywhere in the app.

• android
• 71.10
• both debug + release modes

Regarding this - we observed the problem in both Android and iOS, so it might not actually be the same problem, although I'll do some more tests with animations as something related seems plausible.

There is a note in the linked issue that the bug occurs on android when the new architecture is enabled but at least in our case, it is happening also on old architecture so I'm not sure it is the same problem.

[FluffyDiscord]

Also experiencing this issue on Android new arch enabled. For now my workaround for simulating onPress is using onTouchStart/end and move

[meabed]

Having the same issue exactly, android touchable stop responding randomly

It doesn't happens on local development

It happens on new architecture and old architecture, dev or prod build apk / aar, and react native >= 0.70

"react-native": "0.71.12"

[meabed]

I have a case where i could reproduce this issue, and I just tested with react-native 0.72.1 and the issue seems fixed. I will keep watching for it and update the issue incase if it happen again.

[dunapanta]

In my case, I note this unusual behavior happening on the Onboarding screens with animations specifically on iOS using "react-native": "0.72.1". I will try using onPressIn to see if it resolves the issue. However, I will also stay updated on any new updates related to this problem.

[Crhaj]

I have a case where i could reproduce this issue, and I just tested with react-native 0.72.1 and the issue seems fixed. I will keep watching for it and update the issue incase if it happen again.

@meabed would it be possible to share the code where you were able to reproduce this issue consistently?

[ice-cap0]

seeing this issue as well

[torver213]

HOW TO FIX REACT NATIVE NOT RESPONDING TO CLICK EVENTS ON REAL DEVICES

Are you still facing this issue? I faced this same issue and it was so painful having a properly working app on emulators but buttons not responding to clicks on real devices.

Here are possible solutions that worked for me.

First of all install react-native-gesture-handler

npm install react-native-gesture-handler

import 'react-native-gesture-handler' at the top of your root app in App.js or index.js

import 'react-native-gesture-handler'

In App.js wrap your App with GestureHandlerRootView

import { GestureHandlerRootView } from 'react-native-gesture-handler'

`<GestureHandlerRootView style={{flex: 1}}>

`

Note: I used react native paper you can follow the docs to install

Optionally, you can install the library or use any library.

Example ~ Works quite well on emulators but sometimes don't respond to clicks on real devices. With multiple press, it responds but we don't want that. We want our app to respond once pressed. This is really awful most especially in a ScrollView or FlatList

import { Button }  from  'react-native-paper'
import {Alert} from 'react-native'

  const HomeScreen = () => {
      return (<Button onPress={() => Alert.alert("Hello world")>Press me</Button>)
  }
  export default HomeScreen

To fix the above code to respond fully well on real devices both android and iOS, particularly android devices. This solutions work in ScrollView or FlatList

SOLUTION 1

1. Wrap all your components with gestureHandlerRootHOC
2. change onPress event handler to onPressIn event handler It's crazy but it works

import { gestureHandlerRootHOC }  from  'react-native-gesture-handler'
import {Button} from 'react-native-paper'
import {Alert} from 'react-native'

  const HomeScreen = () => {
      return (<Button onPressIn={() => Alert.alert("Hello world") title="Press me" />)
  }
  export default  gestureHandlerRootHOC(HomeScreen)

  //this will work perfectly on both emulators and real devices

SOLUTION 2

1. Wrap all your components with gestureHandlerRootHOC
2. Wrap the Button component with any of the Touchable event handler.

You can use TouchableOpacity but if you don't want the ripple effect, use TouchableWithoutFeedback. Remember it's not just buttons but any component with onPress event handler can be wrapped with of TouchableWithoutFeedback or TouchableOpacity

import React, {Fragment} from 'react'
import {TouchableOpacity, TouchableWithoutFeedback, gestureHandlerRootHOC} from 'react-native-gesture-handler'; 
import { Button }  from  'react-native-paper' 

  const HomeScreen = () => {
      return (<Fragment>

         <TouchableOpacity onPress={() => Alert.alert("Hello world")>
                    <Button >Press me </Button>
        </TouchableOpacity>

        <TouchableWithoutFeedback onPress={() => Alert.alert("Hello world")>
                    <Button >Press me </Button>
        </TouchableWithoutFeedback>

      </Fragment>)
  }
  export default gestureHandlerRootHOC(HomeScreen)

Library versions

"react-native": "^0.72.3"
"react-native-paper": "^5.10.1"
"react-native-gesture-handler": "^2.12.1",

These are the solutions that worked for me. My device was Android 10 API 29, development system MacBook Pro M2.

You can experiment more and try other possible solutions too. Happy coding :)

[Crhaj]

I have a case where i could reproduce this issue, and I just tested with react-native 0.72.1 and the issue seems fixed. I will keep watching for it and update the issue incase if it happen again.

@meabed kind reminder, would it be possible to share the code where you were able to reproduce this issue consistently? It would be greatly appreciated!

[NotArtyom]

Facing the same issue on some android devices (not all android devices though) with new arch enabled "react-native": "0.72.4"

[mars-peng-lb]

I have the same problem. Disabling all react-navigation animations can solve the problem, but it is still a problem because we need animations. If you don't need animations, you can just do it in your navigator: screenOptions={{ animationEnabled: false }}

[sneh2608]

I have the same problem. Disabling all react-navigation animations can solve the problem, but it is still a problem because we need animations. If you don't need animations, you can just do it in your navigator: screenOptions={{ animationEnabled: false }}

@satya164 Can you please look into this.We have to disable all animations to get this to work properly.

[dibyopra]

I can provide a case:

https://github.com/facebook/react-native/assets/50160911/035e9353-ecf6-4342-80a0-fd5e7764a5c9

in my case I have 3 button component when the last button component is not responding when touched but the others is working perfectly i tried comment the last button component and the result is only first button component is working

I have 2 apss that have bug like this in this version I use "react-native": "0.72.4" (new architecture is disabled) and the other is "react-native": "^0.66.5"

[IsuruSathyajith]

I have the same problem. Disabling all react-navigation animations can solve the problem, but it is still a problem because we need animations. If you don't need animations, you can just do it in your navigator: screenOptions={{ animationEnabled: false }}

This workaround supported to resolve this issue for me. However, it comes with the expense of animations on stack screen changes. Is there any ongoing discussion on React Navigation V6 to solve this anytime soon? (I couldn’t find) For me; This issue existed only on devices running Android 13. For Example, I had the issue on a Pixel 6A & a Samsung S20 both of which were with Android 13.

[sneh2608]

Another workaround to solve this issue is to wrap your entry file in GestureHandlerRootView from react-native-gesture-handler and use Touchables from react-native-gesture-handler. This works because Touchables in react-native-gesture-handler do not use JS Responder system. Docs

[IsuruSathyajith]

Another workaround to solve this issue is to wrap your entry file in GestureHandlerRootView from react-native-gesture-handler and use Touchables from react-native-gesture-handler. This works because Touchables in react-native-gesture-handler do not use JS Responder system. Docs

Does it make the keyboard touch events work as well? Currently keyboard doesn’t get poped up when clicked on a input field too.

[sneh2608]

Another workaround to solve this issue is to wrap your entry file in GestureHandlerRootView from react-native-gesture-handler and use Touchables from react-native-gesture-handler. This works because Touchables in react-native-gesture-handler do not use JS Responder system. Docs

Does it make the keyboard touch events work as well? Currently keyboard doesn’t get poped up when clicked on a input field too.

Yes...for that you will have to use TextInput also from react-native-gesture-handler

[horne3754sg]

I have the same problem. Disabling all react-navigation animations can solve the problem, but it is still a problem because we need animations. If you don't need animations, you can just do it in your navigator: screenOptions={{ animationEnabled: false }}

This is what I have had to do for the time being on Android. Hopefully a bug fix can be provided in the near future.

[skinsapp]

My company is willing to put a bounty of $1,000 on fixing this and getting it merged. If anyone else would like to add to the bounty, please chime in.

The reason this needs to be top priority is because concurrent react has been out for a long time, yet -- in practice -- not in the react-native world, as this issue makes Android useless, given all workarounds are unacceptable for pro apps.

For additional information, we currently have an app in both app stores, and I implemented an onPressIn hack + a timeout after scrolling so events aren't triggered while scrolling, and it's not satisfactory. The onPress prop of Pressable really needs to operate correctly for the new architecture to be ready for prime time.

[etodanik]

I’m shocked that the maintainers are ignoring this.

On Sat, Sep 30, 2023 at 07:47 the-skins-app @.***> wrote:

My company is willing to put a bounty of $1,000 on fixing this and getting it merged. If anyone else would like to add to the bounty, please chime in.

The reason this needs to be top priority is because concurrent react has been out for a long time, yet -- in practice -- not in the react-native world, as this issue makes Android useless, given all workarounds are unacceptable for pro apps.

For additional information, we currently have an app in both app stores, and I implemented an onPressIn hack + a timeout after scrolling so events aren't triggered while scrolling, and it's not satisfactory. The onPress prop of Pressable really needs to operate correctly for the new architecture to be ready for prime time.

— Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/36710#issuecomment-1741676828, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAPBB6FKXYDEZQPRSJY26VLX46P5HANCNFSM6AAAAAAWMQPNFI . You are receiving this because you commented.Message ID: @.***>