Allow passing range option to useSwipeTransition

packages/react-art/src/ReactFiberConfigART.js

@@ -510,8 +510,13 @@ export function createViewTransitionInstance(
 
 export type GestureTimeline = null;
 
+export function getCurrentGestureOffset(provider: GestureTimeline): number {
+  throw new Error('useSwipeTransition is not yet supported in react-art.');
+}
+
 export function subscribeToGestureDirection(
   provider: GestureTimeline,
+  currentOffset: number,
   directionCallback: (direction: boolean) => void,
 ): () => void {
   throw new Error('useSwipeTransition is not yet supported in react-art.');

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -1480,17 +1480,21 @@ export function createViewTransitionInstance(
 
 export type GestureTimeline = AnimationTimeline; // TODO: More provider types.
 
-export function subscribeToGestureDirection(
-  provider: GestureTimeline,
-  directionCallback: (direction: boolean) => void,
-): () => void {
+export function getCurrentGestureOffset(provider: GestureTimeline): number {
   const time = provider.currentTime;
   if (time === null) {
     throw new Error(
       'Cannot start a gesture with a disconnected AnimationTimeline.',
     );
   }
-  const startTime = typeof time === 'number' ? time : time.value;
+  return typeof time === 'number' ? time : time.value;
+}
+
+export function subscribeToGestureDirection(
+  provider: GestureTimeline,
+  currentOffset: number,
+  directionCallback: (direction: boolean) => void,
+): () => void {
   if (
     typeof ScrollTimeline === 'function' &&
     provider instanceof ScrollTimeline
@@ -1500,11 +1504,10 @@ export function subscribeToGestureDirection(
     const scrollCallback = () => {
       const newTime = provider.currentTime;
       if (newTime !== null) {
-        directionCallback(
-          typeof newTime === 'number'
-            ? newTime > startTime
-            : newTime.value > startTime,
-        );
+        const newValue = typeof newTime === 'number' ? newTime : newTime.value;
+        if (newValue !== currentOffset) {
+          directionCallback(newValue > currentOffset);
+        }
       }
     };
     element.addEventListener('scroll', scrollCallback, false);
@@ -1517,11 +1520,10 @@ export function subscribeToGestureDirection(
     const rafCallback = () => {
       const newTime = provider.currentTime;
       if (newTime !== null) {
-        directionCallback(
-          typeof newTime === 'number'
-            ? newTime > startTime
-            : newTime.value > startTime,
-        );
+        const newValue = typeof newTime === 'number' ? newTime : newTime.value;
+        if (newValue !== currentOffset) {
+          directionCallback(newValue > currentOffset);
+        }
       }
       callbackID = requestAnimationFrame(rafCallback);
     };

packages/react-native-renderer/src/ReactFiberConfigNative.js

@@ -607,8 +607,13 @@ export function createViewTransitionInstance(
 
 export type GestureTimeline = null;
 
+export function getCurrentGestureOffset(provider: GestureTimeline): number {
+  throw new Error('useSwipeTransition is not yet supported in React Native.');
+}
+
 export function subscribeToGestureDirection(
   provider: GestureTimeline,
+  currentOffset: number,
   directionCallback: (direction: boolean) => void,
 ): () => void {
   throw new Error('useSwipeTransition is not yet supported in React Native.');

packages/react-noop-renderer/src/createReactNoop.js

@@ -796,8 +796,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           return null;
         },
 
+        getCurrentGestureOffset(provider: GestureTimeline): number {
+          return 0;
+        },
+
         subscribeToGestureDirection(
           provider: GestureTimeline,
+          currentOffset: number,
           directionCallback: (direction: boolean) => void,
         ): () => void {
           return () => {};

packages/react-reconciler/src/ReactFiberConfigWithNoMutation.js

@@ -49,4 +49,5 @@ export const startViewTransition = shim;
 export type ViewTransitionInstance = null | {name: string, ...};
 export const createViewTransitionInstance = shim;
 export type GestureTimeline = any;
+export const getCurrentGestureOffset = shim;
 export const subscribeToGestureDirection = shim;

packages/react-reconciler/src/ReactFiberGestureScheduler.js

@@ -19,6 +19,9 @@ export type ScheduledGesture = {
   provider: GestureTimeline,
   count: number, // The number of times this same provider has been started.
   direction: boolean, // false = previous, true = next
+  rangePrevious: number, // The end along the timeline where the previous state is reached.
+  rangeCurrent: number, // The starting offset along the timeline.
+  rangeNext: number, // The end along the timeline where the next state is reached.
   cancel: () => void, // Cancel the subscription to direction change.
   prev: null | ScheduledGesture, // The previous scheduled gesture in the queue for this root.
   next: null | ScheduledGesture, // The next scheduled gesture in the queue for this root.
@@ -28,6 +31,9 @@ export function scheduleGesture(
   root: FiberRoot,
   provider: GestureTimeline,
   initialDirection: boolean,
+  rangePrevious: number,
+  rangeCurrent: number,
+  rangeNext: number,
 ): ScheduledGesture {
   let prev = root.gestures;
   while (prev !== null) {
@@ -42,32 +48,43 @@ export function scheduleGesture(
     }
     prev = next;
   }
+  const isFlippedDirection = rangePrevious > rangeNext;
   // Add new instance to the end of the queue.
-  const cancel = subscribeToGestureDirection(provider, (direction: boolean) => {
-    if (gesture.direction !== direction) {
-      gesture.direction = direction;
-      if (gesture.prev === null && root.gestures !== gesture) {
-        // This gesture is not in the schedule, meaning it was already rendered.
-        // We need to rerender in the new direction. Insert it into the first slot
-        // in case other gestures are queued after the on-going one.
-        const existing = root.gestures;
-        gesture.next = existing;
-        if (existing !== null) {
-          existing.prev = gesture;
+  const cancel = subscribeToGestureDirection(
+    provider,
+    rangeCurrent,
+    (direction: boolean) => {
+      if (isFlippedDirection) {
+        direction = !direction;
+      }
+      if (gesture.direction !== direction) {
+        gesture.direction = direction;
+        if (gesture.prev === null && root.gestures !== gesture) {
+          // This gesture is not in the schedule, meaning it was already rendered.
+          // We need to rerender in the new direction. Insert it into the first slot
+          // in case other gestures are queued after the on-going one.
+          const existing = root.gestures;
+          gesture.next = existing;
+          if (existing !== null) {
+            existing.prev = gesture;
+          }
+          root.gestures = gesture;
+          // Schedule the lane on the root. The Fibers will already be marked as
+          // long as the gesture is active on that Hook.
+          root.pendingLanes |= GestureLane;
+          ensureRootIsScheduled(root);
         }
-        root.gestures = gesture;
-        // Schedule the lane on the root. The Fibers will already be marked as
-        // long as the gesture is active on that Hook.
-        root.pendingLanes |= GestureLane;
-        ensureRootIsScheduled(root);
+        // TODO: If we're currently rendering this gesture, we need to restart it.
       }
-      // TODO: If we're currently rendering this gesture, we need to restart it.
-    }
-  });
+    },
+  );
   const gesture: ScheduledGesture = {
     provider: provider,
     count: 1,
     direction: initialDirection,
+    rangePrevious: rangePrevious,
+    rangeCurrent: rangeCurrent,
+    rangeNext: rangeNext,
     cancel: cancel,
     prev: prev,
     next: null,

packages/react-reconciler/src/ReactFiberHooks.js

@@ -16,6 +16,7 @@ import type {
   Awaited,
   StartGesture,
   GestureProvider,
+  GestureOptions,
 } from 'shared/ReactTypes';
 import type {
   Fiber,
@@ -35,6 +36,7 @@ import {
   NotPendingTransition as NoPendingHostTransition,
   setCurrentUpdatePriority,
   getCurrentUpdatePriority,
+  getCurrentGestureOffset,
 } from './ReactFiberConfig';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -3988,6 +3990,7 @@ function startGesture(
   fiber: Fiber,
   queue: SwipeTransitionUpdateQueue,
   gestureProvider: GestureProvider,
+  gestureOptions?: GestureOptions,
 ): () => void {
   const root = enqueueGestureRender(fiber);
   if (root === null) {
@@ -3998,10 +4001,44 @@ function startGesture(
     };
   }
   const gestureTimeline: GestureTimeline = gestureProvider;
+  const currentOffset = getCurrentGestureOffset(gestureTimeline);
+  const range = gestureOptions && gestureOptions.range;
+  const rangePrevious: number = range ? range[0] : 0; // If no range is provider we assume it's the starting point of the range.
+  const rangeCurrent: number = range ? range[1] : currentOffset;
+  const rangeNext: number = range ? range[2] : 100; // If no range is provider we assume it's the starting point of the range.
+  if (__DEV__) {
+    if (
+      (rangePrevious > rangeCurrent && rangeNext > rangeCurrent) ||
+      (rangePrevious < rangeCurrent && rangeNext < rangeCurrent)
+    ) {
+      console.error(
+        'The range of a gesture needs "previous" and "next" to be on either side of ' +
+          'the "current" offset. Both cannot be above current and both cannot be below current.',
+      );
+    }
+  }
+  const isFlippedDirection = rangePrevious > rangeNext;
+  const initialDirection =
+    // If a range is specified we can imply initial direction if it's not the current
+    // value such as if the gesture starts after it has already moved.
+    currentOffset < rangeCurrent
+      ? isFlippedDirection
+      : currentOffset > rangeCurrent
+        ? !isFlippedDirection
+        : // Otherwise, look for an explicit option.
+          gestureOptions && gestureOptions.direction === 'next'
+          ? true
+          : gestureOptions && gestureOptions.direction === 'previous'
+            ? false
+            : // If no option is specified, imply from the values specified.
+              queue.initialDirection;
   const scheduledGesture = scheduleGesture(
     root,
     gestureTimeline,
-    queue.initialDirection,
+    initialDirection,
+    rangePrevious,
+    rangeCurrent,
+    rangeNext,
   );
   // Add this particular instance to the queue.
   // We add multiple of the same timeline even if they get batched so

packages/react-reconciler/src/forks/ReactFiberConfig.custom.js

@@ -145,6 +145,7 @@ export const wasInstanceInViewport = $$$config.wasInstanceInViewport;
 export const hasInstanceChanged = $$$config.hasInstanceChanged;
 export const hasInstanceAffectedParent = $$$config.hasInstanceAffectedParent;
 export const startViewTransition = $$$config.startViewTransition;
+export const getCurrentGestureOffset = $$$config.getCurrentGestureOffset;
 export const subscribeToGestureDirection =
   $$$config.subscribeToGestureDirection;
 export const createViewTransitionInstance =

packages/react-test-renderer/src/ReactFiberConfigTestHost.js

@@ -393,8 +393,13 @@ export function getInstanceFromNode(mockNode: Object): Object | null {
 
 export type GestureTimeline = null;
 
+export function getCurrentGestureOffset(provider: GestureTimeline): number {
+  return 0;
+}
+
 export function subscribeToGestureDirection(
   provider: GestureTimeline,
+  currentOffset: number,
   directionCallback: (direction: boolean) => void,
 ): () => void {
   return () => {};

packages/shared/ReactTypes.js

@@ -172,7 +172,15 @@ export type ReactFormState<S, ReferenceId> = [
 // renderer supports it.
 export type GestureProvider = any;
 
-export type StartGesture = (gestureProvider: GestureProvider) => () => void;
+export type StartGesture = (
+  gestureProvider: GestureProvider,
+  gestureOptions: GestureOptions,
+) => () => void;
+
+export type GestureOptions = {
+  direction?: 'previous' | 'next',
+  range?: [/*previous*/ number, /*current*/ number, /*next*/ number],
+};
 
 export type Awaited<T> = T extends null | void
   ? T // special case for `null | undefined` when not in `--strictNullChecks` mode