Add more complex transformations example by j-piasecki · Pull Request #3124 · software-mansion/react-native-gesture-handler

j-piasecki · 2024-09-25T07:33:43Z

Description

Extracted new transformations example from #2919, so that the entire thing isn't blocked by #2929

## Description Anchor and focal points were not converted to local view coordinates before being sent. This PR fixes this problem. Fixes #2929 ## Test plan Tested on example from #3124

j-piasecki · 2026-04-14T10:30:30Z

The V3 coordinates are wrong (at least on iOS). Changing render to

    <InterceptingGestureDetector>
      <VirtualGestureDetector gesture={gesture}>
        <Animated.View
          onLayout={({ nativeEvent }) => {
            setSize({
              width: nativeEvent.layout.width,
              height: nativeEvent.layout.height,
            });
          }}
          style={[styles.container, style]}>
          <Image source={SIGNET} style={styles.image} resizeMode="contain" />
        </Animated.View>
      </VirtualGestureDetector>
    </InterceptingGestureDetector>

fixes it so it seems like the wrong coordinate space is being used. This needs to be investigated.

Copilot

Pull request overview

This PR adds a new, more advanced “Transformations” example to the New API example set (extracted from #2919) and updates the legacy v2 transformations example to use the same matrix-based approach for pan/pinch/rotate composition.

Changes:

Register a new “Transformations” entry in the New API “Complicated” examples list.
Add a new New API transformations example that composes pan/pinch/rotation/double-tap using a 4×4 matrix accumulator.
Rework the legacy v2 transformations example to use the same matrix/origin approach (instead of simple translate/scale/rotate values).

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 8 comments.

File	Description
apps/common-app/src/new_api/index.tsx	Adds the Transformations example to the New API list.
apps/common-app/src/new_api/complicated/transformations/index.tsx	New complex matrix-based transformations example using hook gestures.
apps/common-app/src/legacy/v2_api/transformations/index.tsx	Updates legacy example to match the complex matrix/origin approach and add layout sizing.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-14T10:33:58Z

+      if (!isRotating.value && !isScaling.value) {
+        origin.value = {
+          x: -(e.anchorX - size.width / 2),
+          y: -(e.anchorY - size.height / 2),
+        };


On web, anchorX/anchorY are not in the view’s local coordinate space (issue #2929), so computing origin from these values makes rotations behave incorrectly. Consider excluding this example on web or adding a web-specific conversion from window to local coordinates before using anchorX/anchorY.

Copilot · 2026-04-14T10:33:58Z

+      if (!isRotating.value && !isScaling.value) {
+        origin.value = {
+          x: -(e.focalX - size.width / 2),
+          y: -(e.focalY - size.height / 2),
+        };


On web, focalX/focalY are not in the view’s local coordinate space (issue #2929), so this origin calculation will be incorrect and scaling will drift relative to the view. Consider excluding this example on web or adding a web-specific conversion from window to local coordinates before using focalX/focalY.

Copilot · 2026-04-14T10:33:59Z

+      if (!isRotating.value && !isScaling.value) {
+        origin.value = {
+          x: -(e.anchorX - size.width / 2),
+          y: -(e.anchorY - size.height / 2),
+        };


On web, anchorX/anchorY are not in the view’s local coordinate space (issue #2929), so computing origin from these values makes rotations behave incorrectly. Consider excluding this example on web or adding a web-specific conversion from window to local coordinates before using anchorX/anchorY.

Copilot · 2026-04-14T10:33:59Z

+      if (!isRotating.value && !isScaling.value) {
+        origin.value = {
+          x: -(e.focalX - size.width / 2),
+          y: -(e.focalY - size.height / 2),
+        };


On web, focalX/focalY are not in the view’s local coordinate space (issue #2929), so this origin calculation will be incorrect and scaling will drift relative to the view. Consider excluding this example on web or adding a web-specific conversion from window to local coordinates before using focalX/focalY.

Copilot · 2026-04-14T10:33:59Z

+    .onEnd(() => {
+      'worklet';
+      transform.value = applyTransformations(
+        translation.value,
+        scale.value,


Cleanup/commit logic is attached to .onEnd, which won’t run for cancelled/failed gestures. That can leave isRotating/transient values stuck and the matrix uncommitted. Prefer .onFinalize (or handle success in .onEnd and also reset state in .onFinalize) so the reset/commit runs for END/CANCELLED/FAILED.

Copilot · 2026-04-14T10:33:59Z

+    .onEnd(() => {
+      'worklet';
+      transform.value = applyTransformations(
+        translation.value,
+        scale.value,


Cleanup/commit logic is attached to .onEnd, which won’t run for cancelled/failed gestures. That can leave isScaling/transient values stuck and the matrix uncommitted. Prefer .onFinalize (or add a matching .onFinalize cleanup) so the reset/commit runs for END/CANCELLED/FAILED.

Copilot · 2026-04-14T10:34:00Z

+    .onEnd(() => {
+      'worklet';
+      transform.value = applyTransformations(
+        translation.value,
+        scale.value,


Cleanup/commit logic is attached to .onEnd, which won’t run for cancelled/failed gestures. If the pan is interrupted (e.g., pointer count changes during a simultaneous gesture), translation/scale/rotation may not be reset and the matrix may not be committed. Prefer .onFinalize (or add a matching .onFinalize cleanup) so cleanup runs for END/CANCELLED/FAILED.

Copilot · 2026-04-14T10:34:00Z

      { name: 'Velocity Test', component: VelocityExample },
      { name: 'Chat Heads', component: ChatHeadsExample },
      { name: 'Camera', component: CameraExample },
+      { name: 'Transformations', component: TransformationsExample },


This example relies on rotation anchor / pinch focal coordinates being in the view’s coordinate space, which is currently not true on web (see issue #2929). As-is, the Transformations example will behave incorrectly on web; consider marking it as unsupportedPlatforms: new Set(['web']) (or applying a web-specific coordinate-space workaround) until the underlying web behavior is fixed.

Suggested change

{ name: 'Transformations', component: TransformationsExample },

{

name: 'Transformations',

component: TransformationsExample,

unsupportedPlatforms: new Set(['web']),

},

## Description Currently, all native handlers are using the coordinate space of the view they are attached to for calculating events. If the handler is attached directly to the view (v1, v2, intercepting detector), this is correct, but when the handler is attached to a wrapper (native detector), the coordinates may drift if the child is transformed. This PR addresses this by using the child of the native detector as the coordinate space base. ## Test plan Tested on #3124

j-piasecki mentioned this pull request Sep 25, 2024

Update examples #2919

Merged

m-bert mentioned this pull request Apr 7, 2026

[Web] Fix focal and anchor points coordinates #4061

Merged

j-piasecki added 2 commits April 14, 2026 11:56

Add complex transformations example

31ba4b8

V3 example

7172bbf

j-piasecki force-pushed the @jpiasecki/complex-transformations branch from 8b20d90 to 7172bbf Compare April 14, 2026 10:27

Copilot AI review requested due to automatic review settings April 14, 2026 10:27

Copilot started reviewing on behalf of j-piasecki April 14, 2026 10:28 View session

Copilot AI reviewed Apr 14, 2026

View reviewed changes

j-piasecki mentioned this pull request Apr 30, 2026

[Native] Use correct coordinate space when using native detector #4137

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add more complex transformations example#3124

Add more complex transformations example#3124
j-piasecki wants to merge 2 commits intomainfrom
@jpiasecki/complex-transformations

j-piasecki commented Sep 25, 2024

Uh oh!

j-piasecki commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Copilot AI Apr 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

j-piasecki commented Sep 25, 2024

Description

Uh oh!

j-piasecki commented Apr 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants