@@ -1,6 +1,8 @@
-import { render } from '@testing-library/react-native';
+import { fireEvent, render, screen } from '@testing-library/react-native';
 import React from 'react';
-import { Text } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+import { withSpring } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 
 import GestureHandlerRootView from '../components/GestureHandlerRootView';
@@ -9,7 +11,25 @@ import type {
   SwipeableProps,
 } from '../components/ReanimatedSwipeable';
 import ReanimatedSwipeable from '../components/ReanimatedSwipeable';
+import { createGestureController } from '../jestUtils';
 import RNGestureHandlerModule from '../RNGestureHandlerModule';
+import type * as Gestures from '../v3/hooks/gestures';
+
+let mockLastPanGesture: Gestures.PanGesture | undefined;
+
+jest.mock('../v3/hooks/gestures', () => {
+  const actual = jest.requireActual<typeof Gestures>('../v3/hooks/gestures');
+
+  return {
+    ...actual,
+    usePanGesture: jest.fn(
+      (...args: Parameters<typeof actual.usePanGesture>) => {
+        mockLastPanGesture = actual.usePanGesture(...args);
+        return mockLastPanGesture;
+      }
+    ),
+  };
+});
 
 jest.mock('react-native-reanimated', () => {
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@@ -29,18 +49,27 @@ jest.mock('react-native-reanimated', () => {
     createAnimatedComponent: (component: unknown) => component,
     interpolate: (value: number) => value,
     isSharedValue: () => false,
-    measure: () => null,
+    measure: () => ({ pageX: 0 }),
     ReduceMotion: { System: 'system' },
     // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
     useAnimatedRef: () => ReactActual.useRef(null),
-    useAnimatedStyle: () => ({}),
+    useAnimatedStyle: (updater: () => object) => updater(),
     useSharedValue: (init: unknown) => {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       const ref = ReactActual.useRef({ value: init });
       // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
       return ref.current;
     },
-    withSpring: (to: unknown) => to,
+    withSpring: jest.fn(
+      (
+        to: unknown,
+        _config: unknown,
+        callback?: (finished: boolean) => void
+      ) => {
+        callback?.(true);
+        return to;
+      }
+    ),
   };
 });
 
@@ -193,3 +222,145 @@ describe('ReanimatedSwipeable callback identity', () => {
     expect(scheduleOnRN).not.toHaveBeenCalled();
   });
 });
+
+const ROW_WIDTH = 300;
+
+function getHostStyle(text: string) {
+  let node = screen.getByText(text).parent;
+  while (node && typeof node.type !== 'string') {
+    node = node.parent;
+  }
+  return StyleSheet.flatten(node?.props.style as StyleProp<ViewStyle>) ?? {};
+}
+
+describe('ReanimatedSwipeable release and action panes', () => {
+  const callbacks = {
+    onSwipeableOpen: jest.fn(),
+    onSwipeableWillOpen: jest.fn(),
+    onSwipeableClose: jest.fn(),
+    onSwipeableWillClose: jest.fn(),
+  };
+
+  function expectNoSwipeableCallbacks() {
+    for (const callback of Object.values(callbacks)) {
+      expect(callback).not.toHaveBeenCalled();
+    }
+  }
+
+  function renderRow() {
+    const swipeableRef = React.createRef<SwipeableMethods>();
+    const row = () => (
+      <GestureHandlerRootView>
+        <ReanimatedSwipeable
+          ref={swipeableRef}
+          renderLeftActions={() => <Text>Archive</Text>}
+          renderRightActions={() => <Text>Delete</Text>}
+          {...callbacks}>
+          <Text style={{ backgroundColor: 'rgba(255, 255, 255, 0.35)' }}>
+            Row
+          </Text>
+        </ReanimatedSwipeable>
+      </GestureHandlerRootView>
+    );
+    const { rerender } = render(row());
+    let container = screen.getByText('Row').parent;
+    while (container && !container.props.onLayout) {
+      container = container.parent;
+    }
+    if (!container || !mockLastPanGesture) {
+      throw new Error('ReanimatedSwipeable did not render');
+    }
+    fireEvent(container, 'layout', {
+      nativeEvent: { layout: { width: ROW_WIDTH } },
+    });
+
+    return {
+      pan: createGestureController(mockLastPanGesture),
+      refreshStyles: () => rerender(row()),
+      swipeableRef,
+    };
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('opens the row when the pan ends past the threshold', async () => {
+    const { pan, refreshStyles } = renderRow();
+
+    pan.begin();
+    pan.activate({ translationX: -20 });
+    pan.update({ translationX: -200 });
+    pan.end({ translationX: -200 });
+    await flushNativeOps();
+    refreshStyles();
+
+    expect(callbacks.onSwipeableOpen).toHaveBeenCalledTimes(1);
+    expect(getHostStyle('Row').transform).toEqual([{ translateX: -ROW_WIDTH }]);
+  });
+
+  test.each(['cancel', 'fail'] as const)(
+    'keeps a closed row closed without callbacks when the pan is %sed past the threshold',
+    async (action) => {
+      const { pan, refreshStyles } = renderRow();
+
+      pan.begin();
+      pan.activate({ translationX: -20 });
+      pan.update({ translationX: -200 });
+      pan[action]({ translationX: -200 });
+      await flushNativeOps();
+      refreshStyles();
+
+      expectNoSwipeableCallbacks();
+      expect(getHostStyle('Row').transform).toEqual([{ translateX: 0 }]);
+    }
+  );
+
+  test.each(['cancel', 'fail'] as const)(
+    'keeps an open row open without callbacks when the pan is %sed past the threshold',
+    async (action) => {
+      const { pan, refreshStyles } = renderRow();
+
+      pan.begin();
+      pan.activate({ translationX: -20 });
+      pan.update({ translationX: -200 });
+      pan.end({ translationX: -200 });
+      await flushNativeOps();
+      Object.values(callbacks).forEach((callback) => callback.mockClear());
+
+      pan.begin();
+      pan.activate({ translationX: 20 });
+      pan.update({ translationX: 200 });
+      pan[action]({ translationX: 200 });
+      await flushNativeOps();
+      refreshStyles();
+
+      expectNoSwipeableCallbacks();
+      expect(getHostStyle('Row').transform).toEqual([
+        { translateX: -ROW_WIDTH },
+      ]);
+    }
+  );
+
+  test('finishes an open animation that a cancelled pan interrupted', async () => {
+    const { pan, swipeableRef } = renderRow();
+
+    // The open animation is still running when the pan starts.
+    jest.mocked(withSpring).mockImplementationOnce((to) => to);
+    swipeableRef.current?.openRight();
+    await flushNativeOps();
+    expect(callbacks.onSwipeableWillOpen).toHaveBeenCalledTimes(1);
+    expect(callbacks.onSwipeableOpen).not.toHaveBeenCalled();
+
+    pan.begin();
+    pan.activate({ translationX: 20 });
+    pan.update({ translationX: 50 });
+    pan.cancel({ translationX: 50 });
+    await flushNativeOps();
+
+    expect(callbacks.onSwipeableWillOpen).toHaveBeenCalledTimes(1);
+    expect(callbacks.onSwipeableOpen).toHaveBeenCalledTimes(1);
+    expect(callbacks.onSwipeableWillClose).not.toHaveBeenCalled();
+    expect(callbacks.onSwipeableClose).not.toHaveBeenCalled();
+  });
+});
@@ -153,6 +153,10 @@ const Swipeable = (props: SwipeableProps) => {
   const showLeftProgress = useSharedValue<number>(0);
   const showRightProgress = useSharedValue<number>(0);
 
+  // Row state at the start of the animation whose end events are not yet
+  // dispatched, or `null` when there is none.
+  const pendingEndFromState = useSharedValue<number | null>(null);
+
   const updateAnimatedEvent = useCallback(() => {
     'worklet';
 
@@ -257,8 +261,12 @@ const Swipeable = (props: SwipeableProps) => {
     [onSwipeableClose, onSwipeableOpen]
   );
 
-  const animateRow: (toValue: number, velocityX?: number) => void = useCallback(
-    (toValue: number, velocityX = 0) => {
+  const animateRow: (
+    toValue: number,
+    velocityX?: number,
+    silent?: boolean
+  ) => void = useCallback(
+    (toValue: number, velocityX = 0, silent = false) => {
       'worklet';
 
       const translationSpringConfig = {
@@ -292,12 +300,18 @@ const Swipeable = (props: SwipeableProps) => {
 
       const frozenRowState = rowState.value;
 
+      // A silent animation dispatches only the end events of an earlier
+      // animation that it interrupted.
+      const endFromState = silent ? pendingEndFromState.value : frozenRowState;
+      pendingEndFromState.value = endFromState;
+
       appliedTranslation.value = withSpring(
         toValue,
         translationSpringConfig,
         (isFinished) => {
-          if (isFinished) {
-            dispatchEndEvents(frozenRowState, toValue);
+          if (isFinished && endFromState !== null) {
+            pendingEndFromState.value = null;
+            dispatchEndEvents(endFromState, toValue);
           }
         }
       );
@@ -314,7 +328,9 @@ const Swipeable = (props: SwipeableProps) => {
         progressSpringConfig
       );
 
-      dispatchImmediateEvents(frozenRowState, toValue);
+      if (!silent) {
+        dispatchImmediateEvents(frozenRowState, toValue);
+      }
 
       rowState.value = Math.sign(toValue);
 
@@ -330,6 +346,7 @@ const Swipeable = (props: SwipeableProps) => {
       rightWidth,
       dispatchImmediateEvents,
       dispatchEndEvents,
+      pendingEndFromState,
     ]
   );
 
@@ -400,6 +417,7 @@ const Swipeable = (props: SwipeableProps) => {
         showLeftProgress.value = 0;
         appliedTranslation.value = 0;
         rowState.value = 0;
+        pendingEndFromState.value = null;
       },
     }),
     [
@@ -411,6 +429,7 @@ const Swipeable = (props: SwipeableProps) => {
       showLeftProgress,
       appliedTranslation,
       rowState,
+      pendingEndFromState,
     ]
   );
 
@@ -488,8 +507,20 @@ const Swipeable = (props: SwipeableProps) => {
   );
 
   const handleRelease = useCallback(
-    (event: PanGestureActiveEvent) => {
+    (event: PanGestureActiveEvent & { canceled: boolean }) => {
       'worklet';
+      if (event.canceled) {
+        // Restore the row to where it rested before the gesture.
+        const restingValue =
+          rowState.value === 1
+            ? leftWidth.value
+            : rowState.value === -1
+              ? -rightWidth.value
+              : 0;
+        animateRow(restingValue, 0, true);
+        return;
+      }
+
       const { velocityX } = event;
       userDrag.value = event.translationX;