Android: No way to pass js-touches through the views without "pointerEvents="NONE"

Hi all and thanks for this project!

We are creating this small library to cut the holes inside view and pass clicks through them.

So, we faced that there is no way on Android to pass js-touch events (that needed for all Touchables) through the custom view, using default android’s way

onTouchEvent(event: MotionEvent){
   return false;
}

The one and only click-checking mechanism, that we’ve found located in TouchTargetHelper.java and it uses only view’s bounding (top, bottom, left, right) + hitSlopRect

code:

private static boolean isTransformedTouchPointInView(
      float x, float y, ViewGroup parent, View child, PointF outLocalPoint) {
    float localX = x + parent.getScrollX() - child.getLeft();
    float localY = y + parent.getScrollY() - child.getTop();
    Matrix matrix = child.getMatrix();
    if (!matrix.isIdentity()) {
      float[] localXY = mMatrixTransformCoords;
      localXY[0] = localX;
      localXY[1] = localY;
      Matrix inverseMatrix = mInverseMatrix;
      matrix.invert(inverseMatrix);
      inverseMatrix.mapPoints(localXY);
      localX = localXY[0];
      localY = localXY[1];
    }
    if (child instanceof ReactHitSlopView && ((ReactHitSlopView) child).getHitSlopRect() != null) {
      Rect hitSlopRect = ((ReactHitSlopView) child).getHitSlopRect();
      if ((localX >= -hitSlopRect.left
              && localX < (child.getRight() - child.getLeft()) + hitSlopRect.right)
          && (localY >= -hitSlopRect.top
              && localY < (child.getBottom() - child.getTop()) + hitSlopRect.bottom)) {
        outLocalPoint.set(localX, localY);
        return true;
      }

      return false;
    } else {
      if ((localX >= 0 && localX < (child.getRight() - child.getLeft()))
          && (localY >= 0 && localY < (child.getBottom() - child.getTop()))) {
        outLocalPoint.set(localX, localY);
        return true;
      }

      return false;
    }
  }

So we’d like to write some custom method to check click availability for View.

Something like

interceptsTouchEvent(touchX: Float, touchY: Float): Boolean

for ReactViewGroup What do you guys think about it?

Description

Violet view - custom android’s view (inherited from ReactViewGroup) with

onTouchEvent(event: MotionEvent){
   return false;
}

So it’s passes all native touches to scroll view, but don’t do it with TouchableOpacity

React Native version:

System: OS: macOS 10.15.4 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Memory: 195.21 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 12.16.2 - ~/.nvm/versions/node/v12.16.2/bin/node Yarn: 1.22.4 - ~/.yarn/bin/yarn npm: 6.14.4 - ~/.nvm/versions/node/v12.16.2/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.1 - /Users/stepankopylov/.rvm/rubies/ruby-2.6.3/bin/pod SDKs: iOS SDK: Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2 Android SDK: API Levels: 23, 28, 29 Build Tools: 28.0.3, 29.0.2, 30.0.0 System Images: android-29 | Google Play Intel x86 Atom Android NDK: Not Found IDEs: Android Studio: 3.6 AI-192.7142.36.36.6392135 Xcode: 11.5/11E608c - /usr/bin/xcodebuild Languages: Java: 1.8.0_222 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: Not Found react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2 npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Create native android module with view that passes all touches through Cover all the screen with it, put some Touchables under, and try to click

Expected Results

Passing clicks to Touchables under

[stephenkopylov]

I’ve made PR for solve this issue: https://github.com/facebook/react-native/pull/28956

It would be nice if some’ll have a look on it

[fabriziobertoglio1987]

when you prepare a pr that solves an issue, you can connect it to the issue by including the following text in the pr summary

fixes https://github.com/facebook/react-native/issues/28953

this will automatically link the issue to the pr, once the pr is merged the issue will automatically be closed additionally a very useful icon shows in the issues list so other developers do not try to solve it

and also on top of the issue, it will show the linked pr so other developers do not troubleshooot that issue

more info https://docs.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue

thanks a lot for the pr 🙏 ☮️