[New Arch][Android] Touchable components stop responding randomly

[peaktan]

Description

On Android new Arch, touch events always stop responding randomly, and recently we expanded the user base, and more and more people are reporting obstacles. I think many people have raised such issues before, and finally there was a fix that said it fixed such problems. I wonder whether the situation we encountered can be fixed, because we are using version 0.74.1. Due to the large number of users and high upgrade cost, we want to fix such problems on the basis of 0.74.1. Thank you

Steps to reproduce

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

React Native Version

0.74.1

Affected Platforms

Runtime - Android

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 13.4
  CPU: (10) arm64 Apple M2 Pro
  Memory: 123.03 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.0.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.19
    path: /usr/local/bin/yarn
  npm:
    version: 8.6.0
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /Users/01400926/.rbenv/shims/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10671973
  Xcode:
    version: 14.3/14E222b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/01400926/.rbenv/shims/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

not

Reproducer

not

Screenshots and Videos

In this example, the user list doesn't respond, but the navigation at the top switches, the scan hover button clicks, and, oddly enough, touch events are available again after the user swipes a few lists.

42238487.mp4

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - 0.74.6. 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.

[react-native-bot]

Tip

Newer version available: You are on a supported minor version, but it looks like there's a newer patch available - undefined. 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.

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[TallNutAlt]

It may be related to this #44643

[peaktan]

此事有关#44643

Hello, We are not using react-native-pager-view，can this fix fix this problem? I haven't tried it yet. #45865

[TallNutAlt]

此事有关#44643

Hello, We are not using react-native-pager-view，can this fix fix this problem? I haven't tried it yet. #45865

我并不清楚此pr是否能解决此问题，但是目前此问题仅在新构架被发现

[peaktan]

此事有关#44643

Hello, We are not using react-native-pager-view，can this fix fix this problem? I haven't tried it yet. #45865

我并不清楚此pr是否能解决此问题，但是目前此问题仅在新构架被发现

Yes, especially the huawei mobile phones, can emersion, source of the study showed that the problem seems to be Pressability.js, I try to _isTouchWithinResponderRegion judgment seems to have a problem, lead to trigger occurs, The signal is LEAVE_PRESS_RECT

[TallNutAlt]

此事有关#44643

Hello, We are not using react-native-pager-view，can this fix fix this problem? I haven't tried it yet. #45865

我并不清楚此pr是否能解决此问题，但是目前此问题仅在新构架被发现

Yes, especially the huawei mobile phones, can emersion, source of the study showed that the problem seems to be Pressability.js, I try to _isTouchWithinResponderRegion judgment seems to have a problem, lead to trigger occurs, The signal is LEAVE_PRESS_RECT

此pr不能解决此问题的话，你可能需要等待rn安卓团队的人回来了

[princektripathi]

@peaktan, can you please share a reproducer to validate? It will also help to narrow down if there is any other dependency that could possibly cause this issue.

Several other instances are reported where other dependencies have caused issues e.g. software-mansion/react-native-screens#2219, react-navigation/react-navigation#12039

[peaktan]

@peaktan, can you please share a reproducer to validate? It will also help to narrow down if there is any other dependency that could possibly cause this issue.

@princektripathi Hello, this demo can be reproduced on Huawei mobile phone, there is no problem with the simulator and some other equipment, only some machines have problems, please help to see the reason, thank you：https://github.com/peaktan/rnnotresponsedemo.git

After our test, it is found that this._responderID.measure(this._measureCallback) in Pressability.js; The bottom of the measurement is biased, in my equipment, the bottom value is 400 under normal circumstances, and the bottom value is 349.3333435058594 under abnormal circumstances

[Dallas62]

Hello, also experienced this issue, specially when the button was placed in a Flatlist with Animated header.
Found a workaround by replacing buttons in that list with RN Gesture Handler pressable.
Hope it will be fix soon to remove this tricks...
Version 0.76.5 - Android.

[peaktan]

Hello, also experienced this issue, specially when the button was placed in a Flatlist with Animated header. Found a workaround by replacing buttons in that list with RN Gesture Handler pressable. Hope it will be fix soon to remove this tricks... Version 0.76.5 - Android.

Yes, this button in FlatList occasionally fails to respond to user clicks, but can be clicked again after sliding. Is this the case for you as well?

[Dallas62]

Hello, also experienced this issue, specially when the button was placed in a Flatlist with Animated header. Found a workaround by replacing buttons in that list with RN Gesture Handler pressable. Hope it will be fix soon to remove this tricks... Version 0.76.5 - Android.

Yes, this button in FlatList occasionally fails to respond to user clicks, but can be clicked again after sliding. Is this the case for you as well?

Was only able to reproduce this issue one time on iOS simulator, but never on a real device (iOS / Android). The issue was reported on Android device (Samsung S10e). Also, there was no horizontal slide in the list.
Will experiencing this issue on iOS Simulator, I remember I had to click just above the button to make it works. After a full reinstallation, I wasn't able to reproduce on the simulator...
Just tried the RNGH workaround on impacted button and made the test with the impacted customer, was easier to test than rollback due to custom modules.

[cipolleschi]

@peaktan the problem should be fixed in most recent versions of React Native and we do not advise to use the New Architecture with versions older than 0.76, as it was not ready to be used in production before that version.

---

@Dallas62 given that you could not reproduce it anymore, could it be that you were testing an old version and then you installed a most recent version that contains the fix?
As far as we know, this problem is fixed and we even have a test case in our test application (RNTester) to make sure we do not regress.

If the problem persist for you, it would be helpful if you can provide a repro with no dependencies using this template.

[Dallas62]

Hi @cipolleschi,

Not sure to understand your point. Yes for the iOS issue on simulator, the bug "disapear".
But the issue appears on Android device (Play Store Release), I will not tell end-users to deinstall the application to make it works... (and I think the impacted user reinstalled the application). Also, I was forced to make a workaround with React Native Gesture Handler.

I cannot provide a reproducer since the issue was only perceptible on end-user devices. I will never be sure to reproduce it correctly.

The React Native version was 0.76.x, new architecture.

Can you give the version of RN where RNTester test case was introduced ?

[cipolleschi]

@Dallas62 thanks for clarifying.

What I meant was that you were seeing the issue, then the issue disappeared after you reinstalled the app. So, perhaps, the version on which you were seeing the issue was an old one.

Anyway, pushing a new version on the stores should prompt the users to update in any case, right?

Can you give the version of RN where RNTester test case was introduced ?

This is the commit where I added the example.
From the tag list below, it has been there since 0.76.

This is the result on Android:

Before	After
Android_before.mov	Android_after.mov

[Dallas62]

The only thing I'm sure, is that the user experienced the issue on RN 0.76.3.
Sad that I can't reproduce on my test Android device, maybe someone will encounter the same issue and be able to give more details.

[cortinico]

Closing as basically a duplicate of #36710

@Dallas62 if you can't provide a reproducer, not even a video, we can't help you in any form.
Please open a new issue once you have a reproducer/video that we could look into.

@peaktan eventually you'll have to update React Native version or you won't be able to publish to the stores anymore (due to Android/iOS versions requirement). We already shipped a fix for this type of issues for 0.76.x which can't easily be backported, so we suggest you start looking into upgrading React Native version.

[rayson-intrack]

I'm having this same issue in the 0.74, and was using RN Gesture Handler pressable as a workaround, however the issue was only happening on iOS for me. Updating RN to the latest 0.76.5 seems to fix the problem fox iOS, but now the exact same issue is happening on Android.

[Dallas62]

Hi @rayson-intrack, as mentioned by @cortinico, are you able to reproduce it on a real device ? or at least do you have a video ?

[wvq]

@rayson-intrack Same problem, iOS works fine, android didn't work. version is [email protected].

When I press, the onPressIn event is called.
the problem is onPressOut is also called quickly (abount 100ms~150ms), I haven't lifted my finger yet.

So the onPress callback need me to lift my finger as quick as possible, must lifted before onPressOut calls.

I think there is some thing wrong in android's gesture detect.

 // no trigger onPress log 
 (NOBRIDGE) LOG  onPressIn at:  1736215926067
 (NOBRIDGE) LOG  onPressOut at:  1736215926216
 (NOBRIDGE) LOG  onPressIn at:  1736215927667
 (NOBRIDGE) LOG  onPressOut at:  1736215927811
 (NOBRIDGE) LOG  onPressIn at:  1736215928583
 (NOBRIDGE) LOG  onPressOut at:  1736215928728

   // click as quick as possible to trigger onPress
 (NOBRIDGE) LOG  onPressIn at:  1736216632304
 (NOBRIDGE) LOG  onPressOut at:  1736216632447
 (NOBRIDGE) LOG  onPressIn at:  1736216633106
 (NOBRIDGE) LOG  onPressOut at:  1736216633248
 (NOBRIDGE) LOG  onPressIn at:  1736216633275
 (NOBRIDGE) LOG  onPress at:  1736216633305
 (NOBRIDGE) LOG  onPressOut at:  1736216633416
 (NOBRIDGE) LOG  onPressIn at:  1736216633432

the success trigger from onPressIn to onPress about 30ms.