react-native-screen-transitions 1.0.3 → 1.1.0

package/dist/index.js

@@ -34,18 +34,52 @@ __export(index_exports, {
   useScreenAnimation: () => useScreenAnimation
 });
 module.exports = __toCommonJS(index_exports);
+var import_react_native5 = require("react-native");
+
+// src/components/create-transition-aware-component.tsx
+var import_react7 = require("react");
 var import_react_native3 = require("react-native");
+var import_react_native_reanimated8 = __toESM(require("react-native-reanimated"));
 
-// src/configs/presets.ts
-var presets_exports = {};
-__export(presets_exports, {
-  DraggableCard: () => DraggableCard,
-  ElasticCard: () => ElasticCard,
-  SlideFromBottom: () => SlideFromBottom,
-  SlideFromTop: () => SlideFromTop,
-  ZoomIn: () => ZoomIn
-});
+// src/components/transition-gesture-handler-provider.tsx
+var import_react4 = require("react");
+var import_react_native_gesture_handler3 = require("react-native-gesture-handler");
+var import_react_native_reanimated5 = require("react-native-reanimated");
+
+// src/contexts/gesture.ts
+var import_react = require("react");
+var import_react_native_gesture_handler = require("react-native-gesture-handler");
 var import_react_native_reanimated = require("react-native-reanimated");
+var GestureContext = (0, import_react.createContext)(
+  void 0
+);
+var useGestureContext = () => {
+  const context = (0, import_react.useContext)(GestureContext);
+  const scrollProgressFallback = (0, import_react_native_reanimated.useSharedValue)({
+    x: 0,
+    y: 0,
+    contentHeight: 0,
+    contentWidth: 0,
+    layoutHeight: 0,
+    layoutWidth: 0
+  });
+  if (!context) {
+    return {
+      panGesture: import_react_native_gesture_handler.Gesture.Pan(),
+      nativeGesture: import_react_native_gesture_handler.Gesture.Native(),
+      scrollProgress: scrollProgressFallback,
+      isPlaceholder: true
+    };
+  }
+  return context;
+};
+
+// src/hooks/use-build-gestures.tsx
+var import_native3 = require("@react-navigation/native");
+var import_react3 = require("react");
+var import_react_native = require("react-native");
+var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
+var import_react_native_reanimated4 = require("react-native-reanimated");
 
 // src/configs/specs.ts
 var specs_exports = {};
@@ -60,179 +94,12 @@ var DefaultSpec = {
   restSpeedThreshold: 0.01
 };
 
-// src/configs/presets.ts
-var SlideFromTop = (config = {}) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: "vertical-inverted",
-    screenStyleInterpolator: ({
-      current,
-      next,
-      layouts: {
-        screen: { height }
-      }
-    }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const y = (0, import_react_native_reanimated.interpolate)(progress, [0, 1, 2], [-height, 0, height]);
-      return {
-        contentStyle: {
-          transform: [{ translateY: y }]
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var ZoomIn = (config = {}) => {
-  return {
-    gestureEnabled: false,
-    screenStyleInterpolator: ({ current, next }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const scale = (0, import_react_native_reanimated.interpolate)(
-        progress,
-        [0, 1, 2],
-        [0.5, 1, 0.5],
-        import_react_native_reanimated.Extrapolation.CLAMP
-      );
-      const opacity = (0, import_react_native_reanimated.interpolate)(
-        progress,
-        [0, 1, 2],
-        [0, 1, 0],
-        import_react_native_reanimated.Extrapolation.CLAMP
-      );
-      return {
-        contentStyle: {
-          transform: [{ scale }],
-          opacity
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var SlideFromBottom = (config = {}) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: "vertical",
-    screenStyleInterpolator: ({
-      current,
-      next,
-      layouts: {
-        screen: { height }
-      }
-    }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const y = (0, import_react_native_reanimated.interpolate)(progress, [0, 1, 2], [height, 0, -height]);
-      return {
-        contentStyle: {
-          transform: [{ translateY: y }]
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var DraggableCard = (config = {}) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: ["horizontal", "vertical"],
-    screenStyleInterpolator: ({ current, next, layouts: { screen } }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const scale = (0, import_react_native_reanimated.interpolate)(progress, [0, 1, 2], [0, 1, 0.75]);
-      const translateY = (0, import_react_native_reanimated.interpolate)(
-        current.gesture.normalizedY.value,
-        [-1, 1],
-        [-screen.height * 0.5, screen.height * 0.5],
-        "clamp"
-      );
-      const translateX = (0, import_react_native_reanimated.interpolate)(
-        current.gesture.normalizedX.value,
-        [-1, 1],
-        [-screen.width * 0.5, screen.width * 0.5],
-        "clamp"
-      );
-      return {
-        contentStyle: {
-          transform: [{ scale }, { translateY }, { translateX }]
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var ElasticCard = (config = { elasticFactor: 0.5 }) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: "bidirectional",
-    screenStyleInterpolator: ({ current, next, layouts: { screen } }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const scale = (0, import_react_native_reanimated.interpolate)(progress, [0, 1, 2], [0, 1, 0.8]);
-      const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
-      const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
-      const translateX = (0, import_react_native_reanimated.interpolate)(
-        current.gesture.normalizedX.value,
-        [-1, 0, 1],
-        [-maxElasticityX, 0, maxElasticityX],
-        "clamp"
-      );
-      const translateY = (0, import_react_native_reanimated.interpolate)(
-        current.gesture.normalizedY.value,
-        [-1, 0, 1],
-        [-maxElasticityY, 0, maxElasticityY],
-        "clamp"
-      );
-      const overlayColor = (0, import_react_native_reanimated.interpolateColor)(
-        next?.progress.value || 0,
-        [0, 1],
-        ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]
-      );
-      return {
-        contentStyle: {
-          transform: [{ scale }, { translateX }, { translateY }]
-        },
-        overlayStyle: {
-          backgroundColor: overlayColor
-        }
-      };
-    },
-    ...config
-  };
-};
-
-// src/hooks/use-screen-animation.tsx
-var import_native3 = require("@react-navigation/native");
-var import_react2 = require("react");
-var import_react_native = require("react-native");
-var import_react_native_reanimated5 = require("react-native-reanimated");
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
-
 // src/animation-engine.ts
 var import_react_native_reanimated3 = require("react-native-reanimated");
 
 // src/store/utils/create-vanilla-store.ts
 var import_immer = require("immer");
-var import_react = require("react");
+var import_react2 = require("react");
 function createVanillaStore(initialState) {
   let state = initialState;
   const listeners = /* @__PURE__ */ new Set();
@@ -262,7 +129,7 @@ function createVanillaStore(initialState) {
     return unsubscribe;
   };
   function useStore(selector) {
-    return (0, import_react.useSyncExternalStore)(subscribe, () => selector(getState()));
+    return (0, import_react2.useSyncExternalStore)(subscribe, () => selector(getState()));
   }
   Object.assign(useStore, {
     setState,
@@ -378,7 +245,8 @@ var animationValues = {
   gestureY: {},
   normalizedGestureX: {},
   normalizedGestureY: {},
-  gestureDragging: {}
+  gestureDragging: {},
+  isDismissing: {}
 };
 var triggerAnimation = (screen) => {
   "worklet";
@@ -428,9 +296,72 @@ ScreenStore.use.subscribeWithSelector(
   }
 );
 
-// src/utils/gesture/build-gesture-detector.ts
-var import_react_native_gesture_handler = require("react-native-gesture-handler");
-var import_react_native_reanimated4 = require("react-native-reanimated");
+// src/utils/create-config.ts
+var createConfig = ({
+  navigation: reactNavigation,
+  route,
+  ...config
+}) => {
+  return {
+    focus: (e) => {
+      const parentNavigatorKey = reactNavigation.getParent()?.getState?.()?.key;
+      const navigatorKey = reactNavigation.getState().key;
+      ScreenStore.updateScreen(e.target, {
+        id: e.target,
+        name: route.name,
+        status: 1,
+        closing: false,
+        navigatorKey,
+        parentNavigatorKey,
+        ...config
+      });
+    },
+    beforeRemove: (e) => {
+      const shouldSkipPreventDefault2 = ScreenStore.shouldSkipPreventDefault(
+        e.target,
+        reactNavigation.getState()
+      );
+      if (shouldSkipPreventDefault2) {
+        ScreenStore.removeScreen(e.target);
+        return;
+      }
+      e.preventDefault();
+      const handleFinish = (finished) => {
+        if (!finished) return;
+        if (reactNavigation.canGoBack()) {
+          reactNavigation.dispatch(e.data?.action);
+          ScreenStore.removeScreen(e.target);
+        }
+      };
+      ScreenStore.updateScreen(e.target, {
+        status: 0,
+        closing: true,
+        onAnimationFinish: handleFinish
+      });
+    }
+  };
+};
+var createScreenConfig = (config) => {
+  return {
+    listeners: (l) => createConfig({ ...l, ...config || {} })
+  };
+};
+
+// src/utils/default-screen-options.ts
+var defaultScreenOptions = () => ({
+  presentation: "containedTransparentModal",
+  headerShown: false,
+  animation: "none"
+});
+
+// src/utils/noop-interpolator.ts
+var noopinterpolator = () => {
+  "worklet";
+  return {
+    contentStyle: {},
+    overlayStyle: {}
+  };
+};
 
 // src/utils/gesture/apply-gesture-activation-criteria.ts
 var applyGestureActivationCriteria = ({
@@ -516,153 +447,329 @@ var mapGestureToProgress = (translation, dimension) => {
   return Math.max(0, Math.min(1, rawProgress));
 };
 
-// src/utils/gesture/build-gesture-detector.ts
+// src/hooks/use-key.tsx
+var import_native2 = require("@react-navigation/native");
+var useKey = () => (0, import_native2.useRoute)().key;
+
+// src/hooks/use-build-gestures.tsx
 var GESTURE_VELOCITY_IMPACT = 0.3;
 var DEFAULT_GESTURE_RESPONSE_DISTANCE = 50;
-var buildGestureDetector = ({
-  key,
-  progress,
-  screenState,
-  width,
-  height,
-  handleDismiss
+var DEFAULT_GESTURE_DIRECTION = "horizontal";
+var DEFAULT_GESTURE_ENABLED = false;
+var useBuildGestures = ({
+  scrollProgress
 }) => {
-  const _translateX = animationValues.gestureX[key];
-  const _translateY = animationValues.gestureY[key];
-  const _normalizedGestureX = animationValues.normalizedGestureX[key];
-  const _normalizedGestureY = animationValues.normalizedGestureY[key];
-  const _isDragging = animationValues.gestureDragging[key];
-  const {
-    gestureDirection = "horizontal",
-    gestureEnabled = false,
-    transitionSpec,
-    gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
-    gestureResponseDistance = DEFAULT_GESTURE_RESPONSE_DISTANCE
-  } = screenState;
+  const key = useKey();
+  const dimensions = (0, import_react_native.useWindowDimensions)();
+  const navigation = (0, import_native3.useNavigation)();
+  const currentScreen = ScreenStore.use(
+    (0, import_react3.useCallback)((state) => state.screens[key], [key])
+  );
+  const handleDismiss = (0, import_react3.useCallback)(
+    (screenBeingDismissed) => {
+      ScreenStore.handleScreenDismiss(screenBeingDismissed, navigation);
+    },
+    [navigation]
+  );
+  const initialTouch = (0, import_react_native_reanimated4.useSharedValue)({
+    x: 0,
+    y: 0
+  });
+  const translateX = animationValues.gestureX[key];
+  const translateY = animationValues.gestureY[key];
+  const normalizedGestureX = animationValues.normalizedGestureX[key];
+  const normalizedGestureY = animationValues.normalizedGestureY[key];
+  const isDragging = animationValues.gestureDragging[key];
+  const isDismissing = animationValues.isDismissing[key];
+  const progress = animationValues.screenProgress[key] || 0;
+  const {
+    gestureDirection = DEFAULT_GESTURE_DIRECTION,
+    gestureEnabled = DEFAULT_GESTURE_ENABLED,
+    transitionSpec = {
+      open: DefaultSpec,
+      close: DefaultSpec
+    },
+    gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
+    gestureResponseDistance = DEFAULT_GESTURE_RESPONSE_DISTANCE
+  } = currentScreen ?? {};
   const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
-  const panGesture = import_react_native_gesture_handler.Gesture.Pan().enabled(gestureEnabled).onStart(() => {
-    "worklet";
-    _isDragging.value = 1;
-  }).onUpdate((event) => {
-    "worklet";
-    let gestureProgress = 0;
-    _translateX.value = event.translationX;
-    _translateY.value = event.translationY;
-    _normalizedGestureX.value = (0, import_react_native_reanimated4.interpolate)(
-      event.translationX,
-      [-width, width],
-      [-1, 1],
-      "clamp"
-    );
-    _normalizedGestureY.value = (0, import_react_native_reanimated4.interpolate)(
-      event.translationY,
-      [-height, height],
-      [-1, 1],
-      "clamp"
-    );
-    if (directions.includes("bidirectional")) {
-      const distance = Math.sqrt(
-        event.translationX ** 2 + event.translationY ** 2
-      );
-      gestureProgress = mapGestureToProgress(distance, width);
-    } else {
-      let maxProgress = 0;
-      const allowedDown = directions.includes("vertical");
-      const allowedUp = directions.includes("vertical-inverted");
-      const allowedRight = directions.includes("horizontal");
-      const allowedLeft = directions.includes("horizontal-inverted");
-      if (allowedRight || allowedLeft) {
-        const absX = Math.abs(event.translationX);
-        const currentProgress = mapGestureToProgress(absX, width);
-        maxProgress = Math.max(maxProgress, currentProgress);
+  const nativeGesture = import_react_native_gesture_handler2.Gesture.Native();
+  const onTouchesDown = (0, import_react3.useCallback)(
+    (e) => {
+      "worklet";
+      const firstTouch = e.changedTouches[0];
+      initialTouch.value = { x: firstTouch.x, y: firstTouch.y };
+    },
+    [initialTouch]
+  );
+  const onTouchesMove = (0, import_react3.useCallback)(
+    (e, manager) => {
+      "worklet";
+      const touch = e.changedTouches[0];
+      const deltaX = touch.x - initialTouch.value.x;
+      const deltaY = touch.y - initialTouch.value.y;
+      const isVerticalSwipe = Math.abs(deltaY) > Math.abs(deltaX);
+      const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
+      const isSwipingDown = isVerticalSwipe && deltaY > 0;
+      const isSwipingUp = isVerticalSwipe && deltaY < 0;
+      const isSwipingRight = isHorizontalSwipe && deltaX > 0;
+      const isSwipingLeft = isHorizontalSwipe && deltaX < 0;
+      const minMovement = 5;
+      const hasEnoughMovement = Math.abs(deltaX) > minMovement || Math.abs(deltaY) > minMovement;
+      if (!hasEnoughMovement) return;
+      if (isDragging.value) {
+        manager.activate();
+        return;
+      }
+      let shouldActivate = false;
+      for (const direction of directions) {
+        switch (direction) {
+          case "vertical":
+            if (isSwipingDown) {
+              shouldActivate = scrollProgress.value.y <= 0;
+            }
+            break;
+          case "vertical-inverted":
+            if (isSwipingUp) {
+              const maxScrollableY = scrollProgress.value.contentHeight - scrollProgress.value.layoutHeight;
+              shouldActivate = scrollProgress.value.y >= maxScrollableY;
+            }
+            break;
+          case "horizontal":
+            if (isSwipingRight) {
+              shouldActivate = scrollProgress.value.x <= 0;
+            }
+            break;
+          case "horizontal-inverted":
+            if (isSwipingLeft) {
+              const maxProgress = scrollProgress.value.contentWidth - scrollProgress.value.layoutWidth;
+              shouldActivate = scrollProgress.value.x >= maxProgress;
+            }
+            break;
+          case "bidirectional":
+            if (isSwipingDown) {
+              shouldActivate = scrollProgress.value.y <= 0;
+            } else if (isSwipingUp) {
+              shouldActivate = scrollProgress.value.y <= 0;
+            } else if (isSwipingRight || isSwipingLeft) {
+              shouldActivate = true;
+            }
+            break;
+        }
+        if (shouldActivate) break;
       }
-      if (allowedUp || allowedDown) {
-        const absY = Math.abs(event.translationY);
-        const currentProgress = mapGestureToProgress(absY, height);
-        maxProgress = Math.max(maxProgress, currentProgress);
+      if ((shouldActivate || isDragging.value) && !isDismissing.value) {
+        manager.activate();
+      } else {
+        manager.fail();
       }
-      gestureProgress = maxProgress;
-    }
-    progress.value = 1 - gestureProgress;
-  }).onEnd((event) => {
+    },
+    [initialTouch, directions, scrollProgress, isDragging, isDismissing]
+  );
+  const onStart = (0, import_react3.useCallback)(() => {
     "worklet";
-    const { translationX, translationY, velocityX, velocityY } = event;
-    let shouldDismiss = false;
-    const dismissThreshold = 0.5;
-    if (directions.includes("bidirectional")) {
-      const finalX = Math.abs(
-        translationX + velocityX * gestureVelocityImpact
+    isDragging.value = 1;
+    isDismissing.value = 0;
+  }, [isDragging, isDismissing]);
+  const onUpdate = (0, import_react3.useCallback)(
+    (event) => {
+      "worklet";
+      let gestureProgress = 0;
+      translateX.value = event.translationX;
+      translateY.value = event.translationY;
+      normalizedGestureX.value = (0, import_react_native_reanimated4.interpolate)(
+        event.translationX,
+        [-dimensions.width, dimensions.width],
+        [-1, 1],
+        "clamp"
       );
-      const finalY = Math.abs(
-        translationY + velocityY * gestureVelocityImpact
+      normalizedGestureY.value = (0, import_react_native_reanimated4.interpolate)(
+        event.translationY,
+        [-dimensions.height, dimensions.height],
+        [-1, 1],
+        "clamp"
       );
-      const finalDistance = Math.sqrt(finalX ** 2 + finalY ** 2);
-      shouldDismiss = finalDistance > width * dismissThreshold;
-    } else {
-      const allowedDown = directions.includes("vertical");
-      const allowedUp = directions.includes("vertical-inverted");
-      const allowedRight = directions.includes("horizontal");
-      const allowedLeft = directions.includes("horizontal-inverted");
-      if (allowedRight && translationX + velocityX * gestureVelocityImpact > width * dismissThreshold) {
-        shouldDismiss = true;
-      } else if (allowedLeft && -translationX - velocityX * gestureVelocityImpact > width * dismissThreshold) {
-        shouldDismiss = true;
-      } else if (allowedDown && translationY + velocityY * gestureVelocityImpact > height * dismissThreshold) {
-        shouldDismiss = true;
-      } else if (allowedUp && -translationY - velocityY * gestureVelocityImpact > height * dismissThreshold) {
-        shouldDismiss = true;
+      if (directions.includes("bidirectional")) {
+        const distance = Math.sqrt(
+          event.translationX ** 2 + event.translationY ** 2
+        );
+        gestureProgress = mapGestureToProgress(distance, dimensions.width);
+      } else {
+        let maxProgress = 0;
+        const allowedDown = directions.includes("vertical");
+        const allowedUp = directions.includes("vertical-inverted");
+        const allowedRight = directions.includes("horizontal");
+        const allowedLeft = directions.includes("horizontal-inverted");
+        if (allowedRight && event.translationX > 0) {
+          const currentProgress = mapGestureToProgress(
+            event.translationX,
+            dimensions.width
+          );
+          maxProgress = Math.max(maxProgress, currentProgress);
+        }
+        if (allowedLeft && event.translationX < 0) {
+          const currentProgress = mapGestureToProgress(
+            -event.translationX,
+            dimensions.width
+          );
+          maxProgress = Math.max(maxProgress, currentProgress);
+        }
+        if (allowedDown && event.translationY > 0) {
+          const currentProgress = mapGestureToProgress(
+            event.translationY,
+            dimensions.height
+          );
+          maxProgress = Math.max(maxProgress, currentProgress);
+        }
+        if (allowedUp && event.translationY < 0) {
+          const currentProgress = mapGestureToProgress(
+            -event.translationY,
+            dimensions.height
+          );
+          maxProgress = Math.max(maxProgress, currentProgress);
+        }
+        gestureProgress = maxProgress;
       }
-    }
-    const finalProgress = shouldDismiss ? 0 : 1;
-    const spec = shouldDismiss ? transitionSpec?.close : transitionSpec?.open;
-    const onFinish = shouldDismiss ? (isFinished) => {
+      progress.value = 1 - gestureProgress;
+    },
+    [
+      dimensions,
+      directions,
+      translateX,
+      translateY,
+      normalizedGestureX,
+      normalizedGestureY,
+      progress
+    ]
+  );
+  const onEnd = (0, import_react3.useCallback)(
+    (event) => {
       "worklet";
-      if (isFinished) (0, import_react_native_reanimated4.runOnJS)(handleDismiss)(screenState.id);
-    } : void 0;
-    progress.value = animate(finalProgress, spec, onFinish);
-    _translateX.value = animate(0, spec);
-    _translateY.value = animate(0, spec);
-    _normalizedGestureX.value = animate(0, spec);
-    _normalizedGestureY.value = animate(0, spec);
-  });
+      const { translationX, translationY, velocityX, velocityY } = event;
+      const dismissThreshold = 0.5;
+      if (directions.includes("bidirectional")) {
+        const finalX = Math.abs(
+          translationX + velocityX * gestureVelocityImpact
+        );
+        const finalY = Math.abs(
+          translationY + velocityY * gestureVelocityImpact
+        );
+        const finalDistance = Math.sqrt(finalX ** 2 + finalY ** 2);
+        isDismissing.value = Number(
+          finalDistance > dimensions.width * dismissThreshold
+        );
+      } else {
+        const allowedDown = directions.includes("vertical");
+        const allowedUp = directions.includes("vertical-inverted");
+        const allowedRight = directions.includes("horizontal");
+        const allowedLeft = directions.includes("horizontal-inverted");
+        if (allowedRight && translationX + velocityX * gestureVelocityImpact > dimensions.width * dismissThreshold) {
+          isDismissing.value = 1;
+        } else if (allowedLeft && -translationX - velocityX * gestureVelocityImpact > dimensions.width * dismissThreshold) {
+          isDismissing.value = 1;
+        } else if (allowedDown && translationY + velocityY * gestureVelocityImpact > dimensions.height * dismissThreshold) {
+          isDismissing.value = 1;
+        } else if (allowedUp && -translationY - velocityY * gestureVelocityImpact > dimensions.height * dismissThreshold) {
+          isDismissing.value = 1;
+        }
+      }
+      const finalProgress = isDismissing.value ? 0 : 1;
+      const spec = isDismissing.value ? transitionSpec?.close : transitionSpec?.open;
+      const onFinish = isDismissing.value ? (isFinished) => {
+        "worklet";
+        if (isFinished) (0, import_react_native_reanimated4.runOnJS)(handleDismiss)(currentScreen?.id);
+      } : void 0;
+      progress.value = animate(finalProgress, spec, onFinish);
+      translateX.value = animate(0, spec);
+      translateY.value = animate(0, spec);
+      normalizedGestureX.value = animate(0, spec);
+      normalizedGestureY.value = animate(0, spec);
+      isDragging.value = 0;
+    },
+    [
+      dimensions,
+      directions,
+      translateX,
+      translateY,
+      normalizedGestureX,
+      normalizedGestureY,
+      progress,
+      handleDismiss,
+      currentScreen?.id,
+      transitionSpec?.close,
+      transitionSpec?.open,
+      gestureVelocityImpact,
+      isDragging,
+      isDismissing
+    ]
+  );
+  const panGesture = (0, import_react3.useMemo)(
+    () => import_react_native_gesture_handler2.Gesture.Pan().enabled(gestureEnabled).manualActivation(true).onTouchesDown(onTouchesDown).onTouchesMove(onTouchesMove).onStart(onStart).onUpdate(onUpdate).onEnd(onEnd).blocksExternalGesture(nativeGesture),
+    [
+      gestureEnabled,
+      nativeGesture,
+      onTouchesDown,
+      onTouchesMove,
+      onStart,
+      onUpdate,
+      onEnd
+    ]
+  );
   applyGestureActivationCriteria({
     gestureDirection,
     gestureResponseDistance,
     panGesture
   });
-  return panGesture;
+  return { panGesture, nativeGesture };
 };
 
-// src/utils/noop-interpolator.ts
-var noopinterpolator = () => {
-  "worklet";
-  return {
-    contentStyle: {},
-    overlayStyle: {}
-  };
+// src/components/transition-gesture-handler-provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TransitionGestureHandlerProvider = ({
+  children
+}) => {
+  const scrollProgress = (0, import_react_native_reanimated5.useSharedValue)({
+    x: 0,
+    y: 0,
+    contentHeight: 0,
+    contentWidth: 0,
+    layoutHeight: 0,
+    layoutWidth: 0
+  });
+  const { panGesture, nativeGesture } = useBuildGestures({
+    scrollProgress
+  });
+  const value = (0, import_react4.useMemo)(() => {
+    return {
+      panGesture,
+      scrollProgress,
+      nativeGesture
+    };
+  }, [panGesture, scrollProgress, nativeGesture]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GestureContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_gesture_handler3.GestureDetector, { gesture: panGesture, children }) });
 };
 
-// src/hooks/use-key.tsx
-var import_native2 = require("@react-navigation/native");
-var useKey = () => (0, import_native2.useRoute)().key;
-
 // src/hooks/use-screen-animation.tsx
+var import_react5 = require("react");
+var import_react_native2 = require("react-native");
+var import_react_native_reanimated6 = require("react-native-reanimated");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var useAnimationBuilder = () => {
   const key = useKey();
-  const dimensions = (0, import_react_native.useWindowDimensions)();
+  const dimensions = (0, import_react_native2.useWindowDimensions)();
   const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const navigation = (0, import_native3.useNavigation)();
-  const progressFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const gestureDraggingFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const gestureXFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const gestureYFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const normalizedGestureXFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
-  const normalizedGestureYFallback = (0, import_react_native_reanimated5.useSharedValue)(0);
+  const progressFallback = (0, import_react_native_reanimated6.useSharedValue)(0);
+  const gestureDraggingFallback = (0, import_react_native_reanimated6.useSharedValue)(0);
+  const gestureXFallback = (0, import_react_native_reanimated6.useSharedValue)(0);
+  const gestureYFallback = (0, import_react_native_reanimated6.useSharedValue)(0);
+  const normalizedGestureXFallback = (0, import_react_native_reanimated6.useSharedValue)(0);
+  const normalizedGestureYFallback = (0, import_react_native_reanimated6.useSharedValue)(0);
+  const isDismissingFallback = (0, import_react_native_reanimated6.useSharedValue)(0);
   const currentScreen = ScreenStore.use(
-    (0, import_react2.useCallback)((state) => state.screens[key], [key])
+    (0, import_react5.useCallback)((state) => state.screens[key], [key])
   );
   const actualNextScreen = ScreenStore.use(
-    (0, import_react2.useCallback)(
+    (0, import_react5.useCallback)(
       (state) => {
         const current = state.screens[key];
         if (!current) return void 0;
@@ -674,26 +781,7 @@ var useAnimationBuilder = () => {
       [key]
     )
   );
-  const panGesture = (0, import_react2.useMemo)(
-    () => buildGestureDetector({
-      key,
-      progress: animationValues.screenProgress[key],
-      screenState: currentScreen || {
-        id: key,
-        name: key,
-        index: 0,
-        status: 0,
-        closing: false
-      },
-      width: dimensions.width,
-      height: dimensions.height,
-      handleDismiss: (screenBeingDismissed) => {
-        ScreenStore.handleScreenDismiss(screenBeingDismissed, navigation);
-      }
-    }),
-    [key, currentScreen, dimensions, navigation]
-  );
-  const getAnimationValuesForScreen = (0, import_react2.useCallback)(
+  const getAnimationValuesForScreen = (0, import_react5.useCallback)(
     (screenId) => ({
       progress: animationValues.screenProgress[screenId] || progressFallback,
       gesture: {
@@ -701,7 +789,8 @@ var useAnimationBuilder = () => {
         x: animationValues.gestureX[screenId] || gestureXFallback,
         y: animationValues.gestureY[screenId] || gestureYFallback,
         normalizedX: animationValues.normalizedGestureX[screenId] || normalizedGestureXFallback,
-        normalizedY: animationValues.normalizedGestureY[screenId] || normalizedGestureYFallback
+        normalizedY: animationValues.normalizedGestureY[screenId] || normalizedGestureYFallback,
+        isDismissing: animationValues.isDismissing[screenId] || isDismissingFallback
       }
     }),
     [
@@ -710,18 +799,18 @@ var useAnimationBuilder = () => {
       gestureXFallback,
       gestureYFallback,
       normalizedGestureXFallback,
-      normalizedGestureYFallback
+      normalizedGestureYFallback,
+      isDismissingFallback
     ]
   );
-  return (0, import_react2.useMemo)(() => {
+  return (0, import_react5.useMemo)(() => {
     return {
       current: getAnimationValuesForScreen(key),
       next: actualNextScreen ? getAnimationValuesForScreen(actualNextScreen.id) : void 0,
       layouts: { screen: dimensions },
       insets,
       closing: currentScreen?.closing || false,
-      screenStyleInterpolator: actualNextScreen?.screenStyleInterpolator || currentScreen?.screenStyleInterpolator || noopinterpolator,
-      gestureDetector: panGesture
+      screenStyleInterpolator: actualNextScreen?.screenStyleInterpolator || currentScreen?.screenStyleInterpolator || noopinterpolator
     };
   }, [
     key,
@@ -729,7 +818,6 @@ var useAnimationBuilder = () => {
     actualNextScreen,
     dimensions,
     insets,
-    panGesture,
     getAnimationValuesForScreen
   ]);
 };
@@ -737,78 +825,22 @@ var _useScreenAnimation = () => {
   return useAnimationBuilder();
 };
 var useScreenAnimation = () => {
-  const {
-    screenStyleInterpolator: _,
-    gestureDetector: __,
-    ...animationProps
-  } = useAnimationBuilder();
+  const { screenStyleInterpolator: _, ...animationProps } = useAnimationBuilder();
   return animationProps;
 };
 
-// src/utils/create-config.ts
-var createConfig = ({
-  navigation: reactNavigation,
-  route,
-  ...config
-}) => {
-  return {
-    focus: (e) => {
-      const parentNavigatorKey = reactNavigation.getParent()?.getState?.()?.key;
-      const navigatorKey = reactNavigation.getState().key;
-      ScreenStore.updateScreen(e.target, {
-        id: e.target,
-        name: route.name,
-        status: 1,
-        closing: false,
-        navigatorKey,
-        parentNavigatorKey,
-        ...config
-      });
-    },
-    beforeRemove: (e) => {
-      const shouldSkipPreventDefault2 = ScreenStore.shouldSkipPreventDefault(
-        e.target,
-        reactNavigation.getState()
-      );
-      if (shouldSkipPreventDefault2) {
-        ScreenStore.removeScreen(e.target);
-        return;
-      }
-      e.preventDefault();
-      const handleFinish = (finished) => {
-        if (!finished) return;
-        if (reactNavigation.canGoBack()) {
-          reactNavigation.dispatch(e.data?.action);
-          ScreenStore.removeScreen(e.target);
-        }
-      };
-      ScreenStore.updateScreen(e.target, {
-        status: 0,
-        closing: true,
-        onAnimationFinish: handleFinish
-      });
-    }
-  };
-};
-
-// src/utils/create-transition-component.tsx
-var import_react4 = require("react");
-var import_react_native2 = require("react-native");
-var import_react_native_gesture_handler2 = require("react-native-gesture-handler");
-var import_react_native_reanimated7 = __toESM(require("react-native-reanimated"));
-
 // src/hooks/use-skip-first-frame.tsx
-var import_react3 = require("react");
-var import_react_native_reanimated6 = require("react-native-reanimated");
+var import_react6 = require("react");
+var import_react_native_reanimated7 = require("react-native-reanimated");
 var useSkipFirstFrame = () => {
-  const opacity = (0, import_react_native_reanimated6.useSharedValue)(0);
-  const style = (0, import_react_native_reanimated6.useAnimatedStyle)(() => {
+  const opacity = (0, import_react_native_reanimated7.useSharedValue)(0);
+  const style = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
     "worklet";
     return {
       opacity: opacity.value
     };
   });
-  (0, import_react3.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     requestAnimationFrame(() => {
       opacity.value = 1;
     });
@@ -816,29 +848,32 @@ var useSkipFirstFrame = () => {
   return { style };
 };
 
-// src/utils/create-transition-component.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function createTransitionComponent(Wrapped) {
-  const AnimatedComponent = import_react_native_reanimated7.default.createAnimatedComponent(Wrapped);
-  const Inner = (0, import_react4.forwardRef)(
+// src/components/create-transition-aware-component.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function createTransitionAwareComponent(Wrapped) {
+  const AnimatedComponent = import_react_native_reanimated8.default.createAnimatedComponent(Wrapped);
+  const Inner = (0, import_react7.forwardRef)(
     (props, ref) => {
       const { children, style, ...rest } = props;
-      const {
-        screenStyleInterpolator,
-        gestureDetector,
-        ...screenInterpolationProps
-      } = _useScreenAnimation();
-      const screenContainerStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
+      const { screenStyleInterpolator, ...screenInterpolationProps } = _useScreenAnimation();
+      const screenContainerStyle = (0, import_react_native_reanimated8.useAnimatedStyle)(() => {
         "worklet";
         return screenStyleInterpolator(screenInterpolationProps).contentStyle || {};
       });
-      const overlayStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
+      const overlayStyle = (0, import_react_native_reanimated8.useAnimatedStyle)(() => {
         "worklet";
         return screenStyleInterpolator(screenInterpolationProps).overlayStyle || {};
       });
       const { style: flickerFixStyle } = useSkipFirstFrame();
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native_reanimated7.default.View, { style: [{ flex: 1 }, flickerFixStyle], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_gesture_handler2.GestureDetector, { gesture: gestureDetector, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TransitionGestureHandlerProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native_reanimated8.default.View, { style: [{ flex: 1 }, flickerFixStyle], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_native_reanimated8.default.View,
+          {
+            style: [import_react_native3.StyleSheet.absoluteFillObject, overlayStyle],
+            pointerEvents: "none"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           AnimatedComponent,
           {
             ...rest,
@@ -850,41 +885,282 @@ function createTransitionComponent(Wrapped) {
             ],
             children
           }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_react_native_reanimated7.default.View,
-          {
-            style: [
-              import_react_native2.StyleSheet.absoluteFillObject,
-              overlayStyle,
-              { zIndex: 1e4 }
-            ],
-            pointerEvents: "none"
-          }
         )
-      ] });
+      ] }) });
     }
   );
   Inner.displayName = `Transition(${Wrapped.displayName || Wrapped.name || "Component"})`;
-  return (0, import_react4.memo)(Inner);
+  return (0, import_react7.memo)(Inner);
 }
 
-// src/utils/default-screen-options.ts
-var defaultScreenOptions = () => ({
-  presentation: "containedTransparentModal",
-  headerShown: false,
-  animation: "none"
+// src/components/create-transition-aware-scrollable.tsx
+var import_react9 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_gesture_handler4 = require("react-native-gesture-handler");
+var import_react_native_reanimated10 = __toESM(require("react-native-reanimated"));
+
+// src/hooks/use-scroll-progress.tsx
+var import_react8 = require("react");
+var import_react_native_reanimated9 = require("react-native-reanimated");
+var useScrollProgress = (props) => {
+  const { scrollProgress } = useGestureContext();
+  const scrollHandler = (0, import_react_native_reanimated9.useAnimatedScrollHandler)({
+    onScroll: (event) => {
+      scrollProgress.modify((value) => {
+        "worklet";
+        return {
+          ...value,
+          x: event.contentOffset.x,
+          y: event.contentOffset.y,
+          layoutHeight: event.layoutMeasurement.height,
+          layoutWidth: event.layoutMeasurement.width,
+          contentHeight: event.contentSize.height,
+          contentWidth: event.contentSize.width
+        };
+      });
+    }
+  });
+  const onContentSizeChange = (0, import_react8.useCallback)(
+    (width, height) => {
+      props.onContentSizeChange?.(width, height);
+      scrollProgress.modify((value) => {
+        "worklet";
+        return {
+          ...value,
+          contentWidth: width,
+          contentHeight: height
+        };
+      });
+    },
+    [scrollProgress, props.onContentSizeChange]
+  );
+  return {
+    scrollHandler,
+    onContentSizeChange
+  };
+};
+
+// src/components/create-transition-aware-scrollable.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function createTransitionAwareScrollable(ScrollableComponent) {
+  const WithTransitionAwareness = createTransitionAwareComponent(import_react_native4.View);
+  const AnimatedScrollableComponent = import_react_native_reanimated10.default.createAnimatedComponent(ScrollableComponent);
+  const WithScrollAwareness = (0, import_react9.forwardRef)((props, ref) => {
+    const { nativeGesture } = useGestureContext();
+    const { scrollHandler, onContentSizeChange } = useScrollProgress({
+      onScroll: props.onScroll,
+      onContentSizeChange: props.onContentSizeChange
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_gesture_handler4.GestureDetector, { gesture: nativeGesture, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      AnimatedScrollableComponent,
+      {
+        ...props,
+        ref,
+        onScroll: scrollHandler,
+        onContentSizeChange,
+        scrollEventThrottle: props.scrollEventThrottle || 16
+      }
+    ) });
+  });
+  const Wrapped = (0, import_react9.forwardRef)((props, ref) => {
+    const { isPlaceholder } = useGestureContext();
+    if (isPlaceholder) {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WithTransitionAwareness, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WithScrollAwareness, { ...props, ref }) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WithScrollAwareness, { ...props, ref });
+  });
+  WithScrollAwareness.displayName = `Transition(${ScrollableComponent.displayName || ScrollableComponent.name || "Component"})`;
+  return (0, import_react9.memo)(Wrapped);
+}
+
+// src/configs/presets.ts
+var presets_exports = {};
+__export(presets_exports, {
+  DraggableCard: () => DraggableCard,
+  ElasticCard: () => ElasticCard,
+  SlideFromBottom: () => SlideFromBottom,
+  SlideFromTop: () => SlideFromTop,
+  ZoomIn: () => ZoomIn
 });
+var import_react_native_reanimated11 = require("react-native-reanimated");
+var SlideFromTop = (config = {}) => {
+  return {
+    gestureEnabled: true,
+    gestureDirection: "vertical-inverted",
+    screenStyleInterpolator: ({
+      current,
+      next,
+      layouts: {
+        screen: { height }
+      }
+    }) => {
+      "worklet";
+      const progress = current.progress.value + (next?.progress.value ?? 0);
+      const y = (0, import_react_native_reanimated11.interpolate)(progress, [0, 1, 2], [-height, 0, height]);
+      return {
+        contentStyle: {
+          transform: [{ translateY: y }]
+        }
+      };
+    },
+    transitionSpec: {
+      open: DefaultSpec,
+      close: DefaultSpec
+    },
+    ...config
+  };
+};
+var ZoomIn = (config = {}) => {
+  return {
+    gestureEnabled: false,
+    screenStyleInterpolator: ({ current, next }) => {
+      "worklet";
+      const progress = current.progress.value + (next?.progress.value ?? 0);
+      const scale = (0, import_react_native_reanimated11.interpolate)(
+        progress,
+        [0, 1, 2],
+        [0.5, 1, 0.5],
+        import_react_native_reanimated11.Extrapolation.CLAMP
+      );
+      const opacity = (0, import_react_native_reanimated11.interpolate)(
+        progress,
+        [0, 1, 2],
+        [0, 1, 0],
+        import_react_native_reanimated11.Extrapolation.CLAMP
+      );
+      return {
+        contentStyle: {
+          transform: [{ scale }],
+          opacity
+        }
+      };
+    },
+    transitionSpec: {
+      open: DefaultSpec,
+      close: DefaultSpec
+    },
+    ...config
+  };
+};
+var SlideFromBottom = (config = {}) => {
+  return {
+    gestureEnabled: true,
+    gestureDirection: "vertical",
+    screenStyleInterpolator: ({
+      current,
+      next,
+      layouts: {
+        screen: { height }
+      }
+    }) => {
+      "worklet";
+      const progress = current.progress.value + (next?.progress.value ?? 0);
+      const y = (0, import_react_native_reanimated11.interpolate)(progress, [0, 1, 2], [height, 0, -height]);
+      return {
+        contentStyle: {
+          transform: [{ translateY: y }]
+        }
+      };
+    },
+    transitionSpec: {
+      open: DefaultSpec,
+      close: DefaultSpec
+    },
+    ...config
+  };
+};
+var DraggableCard = (config = {}) => {
+  return {
+    gestureEnabled: true,
+    gestureDirection: ["horizontal", "vertical"],
+    screenStyleInterpolator: ({ current, next, layouts: { screen } }) => {
+      "worklet";
+      const progress = current.progress.value + (next?.progress.value ?? 0);
+      const scale = (0, import_react_native_reanimated11.interpolate)(progress, [0, 1, 2], [0, 1, 0.75]);
+      const translateY = (0, import_react_native_reanimated11.interpolate)(
+        current.gesture.normalizedY.value,
+        [-1, 1],
+        [-screen.height * 0.5, screen.height * 0.5],
+        "clamp"
+      );
+      const translateX = (0, import_react_native_reanimated11.interpolate)(
+        current.gesture.normalizedX.value,
+        [-1, 1],
+        [-screen.width * 0.5, screen.width * 0.5],
+        "clamp"
+      );
+      return {
+        contentStyle: {
+          transform: [{ scale }, { translateY }, { translateX }]
+        }
+      };
+    },
+    transitionSpec: {
+      open: DefaultSpec,
+      close: DefaultSpec
+    },
+    ...config
+  };
+};
+var ElasticCard = (config = { elasticFactor: 0.5 }) => {
+  return {
+    gestureEnabled: true,
+    gestureDirection: "bidirectional",
+    screenStyleInterpolator: ({ current, next, layouts: { screen } }) => {
+      "worklet";
+      const progress = current.progress.value + (next?.progress.value ?? 0);
+      const scale = (0, import_react_native_reanimated11.interpolate)(progress, [0, 1, 2], [0, 1, 0.8]);
+      const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
+      const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
+      const translateX = (0, import_react_native_reanimated11.interpolate)(
+        current.gesture.normalizedX.value,
+        [-1, 0, 1],
+        [-maxElasticityX, 0, maxElasticityX],
+        "clamp"
+      );
+      const translateY = (0, import_react_native_reanimated11.interpolate)(
+        current.gesture.normalizedY.value,
+        [-1, 0, 1],
+        [-maxElasticityY, 0, maxElasticityY],
+        "clamp"
+      );
+      const overlayColor = (0, import_react_native_reanimated11.interpolateColor)(
+        next?.progress.value || 0,
+        [0, 1],
+        ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]
+      );
+      return {
+        contentStyle: {
+          transform: [{ scale }, { translateX }, { translateY }]
+        },
+        overlayStyle: {
+          backgroundColor: overlayColor
+        }
+      };
+    },
+    ...config
+  };
+};
 
 // src/index.ts
 var index_default = {
-  createTransitionComponent,
-  View: createTransitionComponent(import_react_native3.View),
-  Pressable: createTransitionComponent(import_react_native3.Pressable),
+  View: createTransitionAwareComponent(import_react_native5.View),
+  Pressable: createTransitionAwareComponent(import_react_native5.Pressable),
+  ScrollView: createTransitionAwareScrollable(import_react_native5.ScrollView),
+  FlatList: createTransitionAwareScrollable(import_react_native5.FlatList),
   createConfig,
+  createScreenConfig,
   defaultScreenOptions,
   presets: presets_exports,
-  specs: specs_exports
+  specs: specs_exports,
+  /**
+   * Create a transition aware component
+   */
+  createTransitionAwareComponent,
+  /**
+   * Create a transition aware scrollable component
+   */
+  createTransitionAwareScrollable
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {