Fix fatal crash Cannot read property 'translationX' of undefined when a touch event is serialized without allTouches (#4316)

> [!NOTE]
> This PR was written with AI assistance (Claude), based on a production
crash investigated from Sentry.

## Description

Fixes a fatal, unhandled production crash in apps using the v3 API
(`usePanGesture` + `GestureDetector`) with Reanimated on Android (Fabric
/ New Architecture):

```
TypeError: Cannot read property 'translationX' of undefined
    at diffCalculator
    at getChangeEventCalculator
    at handleUpdateEvent
    at eventHandler
```

Since the error is thrown inside a worklet running on the UI thread, it
results in a native `CppException` caught by the
`UncaughtExceptionHandler` — a hard crash, not a JS redbox.

**Observed trigger:** very fast repeated taps on a screen with a
`GestureDetector` + pan gesture (reproduced in production on a low-end
Android 15 device, but the underlying race is not device-specific).

### Root cause

The failure is a chain across the Android event serialization and the v3
event classification:

1. **Kotlin — `GestureHandler.kt`**: `dispatchTouchEvent()` only guards
on `changedTouchesPayload != null`. In `dispatchTouchUpEvent()`,
`extractAllPointersData()` runs *before* the changed pointer is re-added
to `trackedPointers`. If the tracked pointers were already cleared at
that point (e.g. `cancelPointers()` fired by a rapid succession of taps
racing with the touch-up dispatch), `allTouchesPayload` is `null` while
`changedTouchesPayload` is still populated — so the event is dispatched
anyway.

2. **Kotlin — `RNGestureHandlerTouchEvent.kt`**: the serializer omitted
the key entirely when the payload was `null`:

   ```kotlin
handler.consumeAllTouchesPayload()?.let { putArray("allTouches", it) }
   ```

→ a touch event can reach JS **without the `allTouches` key**. Note that
iOS always serializes `allTouches`/`changedTouches` as (possibly empty)
arrays (`RNGestureHandlerManager.mm` initializes `.allTouches = {}`), so
this was also a platform inconsistency.

3. **TS — `src/v3/hooks/utils/eventUtils.ts`**: touch events are
discriminated by key presence:

   ```ts
export function isTouchEvent(...) { 'worklet'; return 'allTouches' in
event; }
   ```

   Key absent → the touch event is **misclassified as an update event**.

4. **TS — `src/v3/hooks/callbacks/eventHandler.ts`**: the event is
routed to `handleUpdateEvent()` → `getChangeEventCalculator()` reads
`current.handlerData` (`undefined` for a touch event) and passes it to
the gesture's `diffCalculator`, which reads `current.translationX` →
`TypeError` in a UI-thread worklet → fatal crash.

### Fix

**JS (defensive, worklet-safe, no behavior change for valid events):**

- `eventHandler()` now drops events that are neither state-change
events, nor touch events, nor carry `handlerData`, instead of treating
them as update events. (`handlerData` is present on all well-formed
update events on every platform: Android `createNativeEventData`, web
`GestureHandler.ts`, and `jestUtils`.)
- `getChangeEventCalculator()` returns the event unchanged when
`handlerData` is `undefined` instead of calling the diff calculator with
undefined data.

**Android (root cause):**

- `RNGestureHandlerTouchEvent.createEventData()` always serializes
`allTouches` and `changedTouches`, falling back to empty arrays instead
of omitting the keys — matching the iOS implementation.

## Test plan

- New regression test in `src/__tests__/api_v3.test.tsx`: fires a
malformed touch event (no `allTouches`, no `oldState`, no `handlerData`)
through a pan gesture's `jsEventHandler`. Without the JS fix it
reproduces the exact production error (`Cannot read properties of
undefined (reading 'translationX')` through `diffCalculator`); with the
fix the event is dropped without invoking any callback, and subsequent
valid update events still compute `changeX`/`changeY` correctly.
- New unit tests for `getChangeEventCalculator` in
`src/__tests__/utils.test.tsx`: change payload computed for well-formed
events; event returned untouched when `handlerData` is missing.
- Full Jest suite passes (80/80), `yarn ts-check` clean, `yarn lint:js`
clean.
- Android: `spotlessCheck` passes, library compiles via
`apps/basic-example` (`:react-native-gesture-handler:compileDebugKotlin`
— BUILD SUCCESSFUL).

---------

Co-authored-by: Michał <michal.bert@swmansion.com>

Author: huextrat

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/events/RNGestureHandlerTouchEvent.kt

@@ -69,13 +69,8 @@ class RNGestureHandlerTouchEvent private constructor() : Event<RNGestureHandlerT
       putInt("eventType", handler.touchEventType)
       putInt("pointerType", handler.pointerType)
 
-      handler.consumeChangedTouchesPayload()?.let {
-        putArray("changedTouches", it)
-      }
-
-      handler.consumeAllTouchesPayload()?.let {
-        putArray("allTouches", it)
-      }
+      putArray("changedTouches", handler.consumeChangedTouchesPayload() ?: Arguments.createArray())
+      putArray("allTouches", handler.consumeAllTouchesPayload() ?: Arguments.createArray())
 
       if (handler.isAwaiting && handler.state == GestureHandler.STATE_ACTIVE) {
         putInt("state", GestureHandler.STATE_BEGAN)

packages/react-native-gesture-handler/src/__tests__/api_v3.test.tsx

@@ -43,6 +43,88 @@ describe('[API v3] Hooks', () => {
     expect(onBegin).toHaveBeenCalledTimes(1);
     expect(onStart).toHaveBeenCalledTimes(1);
   });
+
+  test('Pan gesture drops malformed event without crashing', () => {
+    // On Android a touch event may be serialized without the `allTouches` key
+    // when its payload is lost in a race (e.g. rapid taps cancelling the
+    // gesture). Such an event has no `oldState`, no `allTouches` and no
+    // `handlerData`, so it used to be misclassified as an update event and
+    // crash the pan change calculator with
+    // "Cannot read property 'translationX' of undefined".
+    const onUpdate = jest.fn();
+    const onTouchesUp = jest.fn();
+
+    const panGesture = renderHook(() =>
+      usePanGesture({
+        disableReanimated: true,
+        onUpdate: (e) => onUpdate(e),
+        onTouchesUp: (e) => onTouchesUp(e),
+      })
+    ).result.current;
+
+    const { jsEventHandler } = panGesture.detectorCallbacks;
+
+    const malformedTouchEvent = {
+      handlerTag: panGesture.handlerTag,
+      state: State.ACTIVE,
+      eventType: 3, // TouchEventType.TOUCHES_UP
+      numberOfTouches: 0,
+      changedTouches: [{ id: 0, x: 0, y: 0, absoluteX: 0, absoluteY: 0 }],
+      // no `allTouches`, no `oldState`, no `handlerData`
+    };
+
+    expect(() => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      jsEventHandler?.(malformedTouchEvent as any);
+    }).not.toThrow();
+
+    expect(onUpdate).not.toHaveBeenCalled();
+    expect(onTouchesUp).not.toHaveBeenCalled();
+  });
+
+  test('Pan gesture handles valid update events after a malformed one', () => {
+    const onUpdate = jest.fn();
+
+    const panGesture = renderHook(() =>
+      usePanGesture({
+        disableReanimated: true,
+        onUpdate: (e) => onUpdate(e),
+      })
+    ).result.current;
+
+    const { jsEventHandler } = panGesture.detectorCallbacks;
+
+    jsEventHandler?.({
+      handlerTag: panGesture.handlerTag,
+      state: State.ACTIVE,
+      eventType: 3,
+      numberOfTouches: 0,
+      changedTouches: [],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any);
+
+    jsEventHandler?.({
+      handlerTag: panGesture.handlerTag,
+      state: State.ACTIVE,
+      handlerData: {
+        translationX: 10,
+        translationY: 5,
+        x: 10,
+        y: 5,
+        absoluteX: 10,
+        absoluteY: 5,
+        velocityX: 0,
+        velocityY: 0,
+        stylusData: undefined,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } as any,
+    });
+
+    expect(onUpdate).toHaveBeenCalledTimes(1);
+    expect(onUpdate).toHaveBeenCalledWith(
+      expect.objectContaining({ changeX: 10, changeY: 5 })
+    );
+  });
 });
 
 describe('[API v3] Components', () => {

packages/react-native-gesture-handler/src/__tests__/utils.test.tsx

@@ -1,4 +1,6 @@
 import { withPrevAndCurrent } from '../utils';
+import { getChangeEventCalculator } from '../v3/hooks/utils/eventUtils';
+import type { GestureUpdateEventWithHandlerData } from '../v3/types';
 
 describe('withPrevAndCurrent', () => {
   test('returns transformed elements', () => {
@@ -14,3 +16,46 @@ describe('withPrevAndCurrent', () => {
     expect(withPrevAndCurrent([], concat)).toEqual([]);
   });
 });
+
+describe('getChangeEventCalculator', () => {
+  type TestHandlerData = { translationX: number; changeX?: number };
+
+  const diffCalculator = (
+    current: TestHandlerData,
+    previous: TestHandlerData | null
+  ) => ({
+    changeX: previous
+      ? current.translationX - previous.translationX
+      : current.translationX,
+  });
+
+  const calculator = getChangeEventCalculator(diffCalculator);
+
+  const makeEvent = (handlerData?: TestHandlerData) =>
+    ({
+      handlerTag: 1,
+      state: 4,
+      handlerData,
+    }) as GestureUpdateEventWithHandlerData<TestHandlerData>;
+
+  test('computes change payload for well-formed events', () => {
+    const first = calculator(makeEvent({ translationX: 10 }));
+    expect(first.handlerData).toEqual({ translationX: 10, changeX: 10 });
+
+    const second = calculator(
+      makeEvent({ translationX: 25 }),
+      makeEvent({ translationX: 10 })
+    );
+    expect(second.handlerData).toEqual({ translationX: 25, changeX: 15 });
+  });
+
+  test('returns event untouched when handlerData is missing', () => {
+    // Regression: a malformed event without `handlerData` used to crash the
+    // diff calculator with "Cannot read property 'translationX' of undefined".
+    const malformed = makeEvent(undefined);
+
+    expect(() => calculator(malformed)).not.toThrow();
+    expect(calculator(malformed)).toBe(malformed);
+    expect(malformed.handlerData).toBeUndefined();
+  });
+});

packages/react-native-gesture-handler/src/v3/hooks/callbacks/eventHandler.ts

@@ -150,6 +150,11 @@ export function eventHandler<
     return;
   }
 
+  // Guard against malformed events
+  if (eventWithData.handlerData === undefined) {
+    return;
+  }
+
   if (!dispatchesAnimatedEvents) {
     handleUpdateEvent(
       eventWithData,

packages/react-native-gesture-handler/src/v3/hooks/utils/eventUtils.ts

@@ -118,6 +118,12 @@ export function getChangeEventCalculator<TExtendedHandlerData>(
   ) => {
     'worklet';
     const currentEventData = current.handlerData;
+
+    // Guard against malformed events
+    if (currentEventData === undefined) {
+      return current;
+    }
+
     const previousEventData = previous ? previous.handlerData : null;
 
     const changePayload = diffCalculator(currentEventData, previousEventData);