View can't receive touch down event: Got DOWN touch before receiving UP or CANCEL from last gesture

[hohoaisan]

Description

Scaffolded react native Native view module could not receive Touch down events. I wonder if this is React Native issue, or the scaffolded code's issue.

Step to reproduce:

1. npx create-react-native-library@latest test-library
2. Use following options

√ What is the description for the package? ... test
√ What is the name of package author? ... hohoaisan
√ What is the email address for the package author? ... [email protected]
√ What is the URL for the package author? ... https://github.com/hohoaisan
√ What is the URL for the repository? ... https://github.com/hohoaisan/react-native-test-library
√ What type of library do you want to develop? » Native view
√ Which languages do you want to use? » Java & Objective-C

3. Install lib packages: cd test-library, yarn
4. Install example app packages cd example, yarn
5. yarn start to start Metro Server
6. Open test-library/example/android with Android Studio, wait for Gradle initialization
7. create TestLibraryView extends Android View class that override onTouchEvent to print out the x,y,action of the touched

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    float pointX = event.getX();
    float pointY = event.getY();
    Log.e("TOUCHED", "pointX: " + String.valueOf(pointX));
    Log.e("TOUCHED", "pointY: " + String.valueOf(pointY));
    Log.e("TOUCHED", "getAction: " + event.getAction());
    return super.onTouchEvent(event);
  }

8. Build and run Example app
9. Open logcat panel for the App with connected Android Device

2024-04-19 11:10:04: Launching app on 'samsung SM-A536E'.
Starting: Intent { act=android.intent.action.MAIN cat=[android.intent.category.LAUNCHER] cmp=com.testlibraryexample/.MainActivity }

Open logcat panel for samsung SM-A536E (R5CT21TDLGW)

10. Try touching the area outside the retangle view, and view:

2024-04-19 11:38:21.840 26010-26010 ViewRootIm...nActivity] com.testlibraryexample               I  ViewPostIme pointer 0
2024-04-19 11:38:21.841 26010-26010 unknown:ReactNative     com.testlibraryexample               E  Got DOWN touch before receiving UP or CANCEL from last gesture
2024-04-19 11:38:21.959 26010-26010 ViewRootIm...nActivity] com.testlibraryexample               I  ViewPostIme pointer 1
2024-04-19 11:38:22.097 26010-26172 TrafficStats            com.testlibraryexample               D  tagSocket(105) with statsTag=0x90000, statsUid=-1
2024-04-19 11:38:22.668 26010-26010 ViewRootIm...nActivity] com.testlibraryexample               I  ViewPostIme pointer 0
2024-04-19 11:38:22.670 26010-26010 unknown:ReactNative     com.testlibraryexample               E  Got DOWN touch before receiving UP or CANCEL from last gesture
2024-04-19 11:38:22.773 26010-26010 ViewRootIm...nActivity] com.testlibraryexample               I  ViewPostIme pointer 1
2024-04-19 11:38:24.111 26010-26175 TrafficStats            com.testlibraryexample               D  tagSocket(105) with statsTag=0x90000, statsUid=-1
2024-04-19 11:38:25.091 26010-26010 ViewRootIm...nActivity] com.testlibraryexample               I  ViewPostIme pointer 0
2024-04-19 11:38:25.092 26010-26010 TOUCHED                 com.testlibraryexample               E  pointX: 75.0
2024-04-19 11:38:25.093 26010-26010 TOUCHED                 com.testlibraryexample               E  pointY: 47.0
2024-04-19 11:38:25.093 26010-26010 TOUCHED                 com.testlibraryexample               E  getAction: 0
2024-04-19 11:38:25.093 26010-26010 unknown:ReactNative     com.testlibraryexample               E  Got DOWN touch before receiving UP or CANCEL from last gesture
2024-04-19 11:38:25.185 26010-26010 ViewRootIm...nActivity] com.testlibraryexample               I  ViewPostIme pointer 1

Both the app and the native View can receive the Touch DOWN event, but Got DOWN touch before receiving UP or CANCEL from last gesture error always pop up after a touch, with ViewPostIme pointer 1 and ViewPostIme pointer 0, I can see that the React RootView does know that touch down/up was fired, but somehow touch UP doesn't get recognized by the native view.

The issue make my Custom View Native component is unusable cuz touch DOWN was not received, leads to no interaction in the Component view. Is there any lacking configuration that I needed to add into the View/View Manager configuration?

Packages

• create-react-native-library
• react-native-builder-bob

Selected options

√ What is the name of the npm package? ... react-native-test-library
√ What is the description for the package? ... test
√ What is the name of package author? ... hohoaisan
√ What is the email address for the package author? ... [email protected]
√ What is the URL for the package author? ... https://github.com/hohoaisan
√ What is the URL for the repository? ... https://github.com/hohoaisan/react-native-test-library
√ What type of library do you want to develop? » Native view
√ Which languages do you want to use? » Java & Objective-C

Link to repro

https://github.com/hohoaisan/test-react-native-library

Environment

info Fetching system and libraries information...
System:
OS: Windows 10 10.0.19045
CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
Memory: 945.04 MB / 15.82 GB
Binaries:
Node:
version: 18.19.0
path: ~\AppData\Local\nvs\default\node.EXE
Yarn:
version: 3.6.1
path: ~\AppData\Local\nvs\default\yarn.CMD
npm:
version: 10.2.3
path: ~\AppData\Local\nvs\default\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
Versions:
- 10.0.20348.0
IDEs:
Android Studio: AI-232.10300.40.2321.11668458
Visual Studio: Not Found
Languages:
Java:
version: 11.0.14.1
path: /c/Program Files/OpenJDK/openjdk-11.0.14.1_1/bin/javac
Ruby: Not Found
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.73.7
wanted: 0.73.7
react-native-windows: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

[hohoaisan]

onTouchEvent needs to return true on touch DOWN before receiving touch UP, but somehow super.onTouchEvent(event) does not return true, to it need to be like this:

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    super.onTouchEvent(event);
    ...
    return true;
  }

The issued error disappear