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 #34999 #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.

Screen_Recording_20230219_103121_Becon.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]

⚠️

Newer Version of React Native is Available!

ℹ️

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]

⚠️	Missing Reproducible Example
ℹ️	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 :)