Make TouchTargetHelper hit-test the parallelogram, not the rectangle

`View.setAnimationMatrix(Matrix)` composes for drawing but `View.getMatrix()`
does not include `mAnimationMatrix` in its return value. RN's hit test
in `TouchTargetHelper.getChildPoint` inverse-maps touch coordinates
through `child.matrix` and falls back to the original rectangular
bounds. Net result: after the rendering fix, skewed Views render as
parallelograms but tip taps that fall outside the rectangular bounds
miss, and rect-corner taps that are visually empty post-skew still
register. iOS gets parity for free because UIKit hit-testing
inverse-maps through the layer's `CATransform3D`.

Store the affine `Matrix` on `R.id.skew_animation_matrix` (instead of
`Boolean.TRUE`) and have `TouchTargetHelper.getChildPoint` consult the
tag, falling back to `child.matrix` when absent. Net effect: hit
testing follows the rendered parallelogram on both platforms.

Verified empirically by sweeping tap coordinates 1 px on either side
of every parallelogram edge:
- (100, 555): inside parallelogram top-left tip / outside rect bounds.
  Before this commit: missed. After: registers as `skewX 20deg`.
- (330, 731): inside parallelogram bottom-right tip / outside rect.
  Same flip.
- (208, 640): rect center / parallelogram center. Registers in both
  states.
- (350, 640): outside parallelogram at vertical-pivot y. Misses in both
  states (correct).

Author: qflen

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -600,7 +600,10 @@ protected void setTransformProperty(
       view.setScaleY(1);
       view.setCameraDistance(0);
       view.setAnimationMatrix(affine);
-      view.setTag(R.id.skew_animation_matrix, Boolean.TRUE);
+      // Tag value is the matrix itself so TouchTargetHelper can use it for hit testing -- View's
+      // own getMatrix() does not compose mAnimationMatrix, so without this fallback the React
+      // hit-test path would still see the original rectangular bounds.
+      view.setTag(R.id.skew_animation_matrix, affine);
       return;
     }
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/TouchTargetHelper.kt

@@ -13,6 +13,7 @@ import android.graphics.PointF
 import android.view.View
 import android.view.ViewGroup
 import com.facebook.common.logging.FLog
+import com.facebook.react.R
 import com.facebook.react.bridge.UiThreadUtil
 import com.facebook.react.common.ReactConstants
 import com.facebook.react.touch.ReactHitSlopView
@@ -298,7 +299,11 @@ public object TouchTargetHelper {
   ): Boolean {
     var localX = x + parent.scrollX - child.left
     var localY = y + parent.scrollY - child.top
-    val matrix = child.matrix
+    // BaseViewManager applies skewX / skewY through View.setAnimationMatrix, which is composed
+    // for drawing but not exposed via View.getMatrix(); fall back to the stashed matrix so hit
+    // testing follows the rendered parallelogram and not the original rectangle.
+    val skewMatrix = child.getTag(R.id.skew_animation_matrix) as? Matrix
+    val matrix = skewMatrix ?: child.matrix
     if (!matrix.isIdentity) {
       val inverseMatrix = inverseMatrix
       if (!matrix.invert(inverseMatrix)) {

packages/rn-tester/js/examples/Transform/TransformExample.js

@@ -251,14 +251,18 @@ function SkewExample(): React.Node {
   };
   const tapStyle =
     (extra: ViewStyleProp) =>
-    ({pressed}: PressableStateCallbackType): ViewStyleProp =>
-      [styles.skewBox, extra, pressed && styles.skewBoxPressed];
+    ({pressed}: PressableStateCallbackType): ViewStyleProp => [
+      styles.skewBox,
+      extra,
+      pressed && styles.skewBoxPressed,
+    ];
 
   return (
     <View testID="transform-skew-27649" style={styles.skewContainer}>
       <Text style={styles.skewLabel}>Last tapped: {tapped}</Text>
       <Text style={styles.skewNote}>
-        Tap any box to confirm hit testing follows the rendered shape.
+        Tap any box to confirm hit testing follows the rendered parallelogram on
+        both platforms.
       </Text>
       <View style={styles.skewRow}>
         <Pressable