react-native-screen-transitions 1.0.3 → 1.1.0

package/dist/index.mjs

@@ -5,21 +5,59 @@ var __export = (target, all) => {
 };
 
 // src/index.ts
-import { Pressable, View } from "react-native";
+import { FlatList, Pressable, ScrollView, View as View2 } from "react-native";
 
-// src/configs/presets.ts
-var presets_exports = {};
-__export(presets_exports, {
-  DraggableCard: () => DraggableCard,
-  ElasticCard: () => ElasticCard,
-  SlideFromBottom: () => SlideFromBottom,
-  SlideFromTop: () => SlideFromTop,
-  ZoomIn: () => ZoomIn
-});
+// src/components/create-transition-aware-component.tsx
+import { forwardRef, memo } from "react";
+import { StyleSheet } from "react-native";
+import Animated, {
+  useAnimatedStyle as useAnimatedStyle2
+} from "react-native-reanimated";
+
+// src/components/transition-gesture-handler-provider.tsx
+import { useMemo as useMemo2 } from "react";
+import { GestureDetector } from "react-native-gesture-handler";
+import { useSharedValue as useSharedValue3 } from "react-native-reanimated";
+
+// src/contexts/gesture.ts
+import { createContext, useContext } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import { useSharedValue } from "react-native-reanimated";
+var GestureContext = createContext(
+  void 0
+);
+var useGestureContext = () => {
+  const context = useContext(GestureContext);
+  const scrollProgressFallback = useSharedValue({
+    x: 0,
+    y: 0,
+    contentHeight: 0,
+    contentWidth: 0,
+    layoutHeight: 0,
+    layoutWidth: 0
+  });
+  if (!context) {
+    return {
+      panGesture: Gesture.Pan(),
+      nativeGesture: Gesture.Native(),
+      scrollProgress: scrollProgressFallback,
+      isPlaceholder: true
+    };
+  }
+  return context;
+};
+
+// src/hooks/use-build-gestures.tsx
+import { useNavigation } from "@react-navigation/native";
+import { useCallback, useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import {
+  Gesture as Gesture2
+} from "react-native-gesture-handler";
 import {
-  Extrapolation,
   interpolate,
-  interpolateColor
+  runOnJS as runOnJS2,
+  useSharedValue as useSharedValue2
 } from "react-native-reanimated";
 
 // src/configs/specs.ts
@@ -35,173 +73,6 @@ 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 = 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 = interpolate(
-        progress,
-        [0, 1, 2],
-        [0.5, 1, 0.5],
-        Extrapolation.CLAMP
-      );
-      const opacity = interpolate(
-        progress,
-        [0, 1, 2],
-        [0, 1, 0],
-        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 = 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 = interpolate(progress, [0, 1, 2], [0, 1, 0.75]);
-      const translateY = interpolate(
-        current.gesture.normalizedY.value,
-        [-1, 1],
-        [-screen.height * 0.5, screen.height * 0.5],
-        "clamp"
-      );
-      const translateX = 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 = 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 = interpolate(
-        current.gesture.normalizedX.value,
-        [-1, 0, 1],
-        [-maxElasticityX, 0, maxElasticityX],
-        "clamp"
-      );
-      const translateY = interpolate(
-        current.gesture.normalizedY.value,
-        [-1, 0, 1],
-        [-maxElasticityY, 0, maxElasticityY],
-        "clamp"
-      );
-      const overlayColor = 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
-import { useNavigation } from "@react-navigation/native";
-import { useCallback, useMemo } from "react";
-import { useWindowDimensions } from "react-native";
-import { useSharedValue } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-
 // src/animation-engine.ts
 import {
   cancelAnimation,
@@ -360,7 +231,8 @@ var animationValues = {
   gestureY: {},
   normalizedGestureX: {},
   normalizedGestureY: {},
-  gestureDragging: {}
+  gestureDragging: {},
+  isDismissing: {}
 };
 var triggerAnimation = (screen) => {
   "worklet";
@@ -410,71 +282,131 @@ ScreenStore.use.subscribeWithSelector(
   }
 );
 
-// src/utils/gesture/build-gesture-detector.ts
-import { Gesture } from "react-native-gesture-handler";
-import {
-  interpolate as interpolate2,
-  runOnJS as runOnJS2
-} from "react-native-reanimated";
-
-// src/utils/gesture/apply-gesture-activation-criteria.ts
-var applyGestureActivationCriteria = ({
-  gestureDirection,
-  gestureResponseDistance,
-  panGesture
+// src/utils/create-config.ts
+var createConfig = ({
+  navigation: reactNavigation,
+  route,
+  ...config
 }) => {
-  const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
-  if (directions.includes("bidirectional")) {
-    return {
-      activeOffsetX: [
-        -gestureResponseDistance,
-        gestureResponseDistance
-      ],
-      activeOffsetY: [
-        -gestureResponseDistance,
-        gestureResponseDistance
-      ]
-    };
-  }
-  const allowedDown = directions.includes("vertical");
-  const allowedUp = directions.includes("vertical-inverted");
-  const allowedRight = directions.includes("horizontal");
-  const allowedLeft = directions.includes("horizontal-inverted");
-  const toleranceX = 15;
-  const toleranceY = 20;
-  const dist = gestureResponseDistance;
-  const result = {};
-  const hasHorizontal = allowedLeft || allowedRight;
-  if (hasHorizontal) {
-    if (allowedLeft && allowedRight) {
-      result.activeOffsetX = [-dist, dist];
-    } else if (allowedLeft) {
-      result.activeOffsetX = -dist;
-    } else if (allowedRight) {
-      result.activeOffsetX = dist;
-    }
-    if (allowedRight && !allowedLeft) {
-      result.failOffsetX = -dist;
-    } else if (allowedLeft && !allowedRight) {
-      result.failOffsetX = dist;
-    }
-  } else {
-    result.failOffsetX = [-toleranceX, toleranceX];
-  }
-  const hasVertical = allowedUp || allowedDown;
-  if (hasVertical) {
-    if (allowedUp && allowedDown) {
-      result.activeOffsetY = [-dist, dist];
-    } else if (allowedUp) {
-      result.activeOffsetY = -dist;
-    } else if (allowedDown) {
-      result.activeOffsetY = dist;
-    }
-    if (allowedDown && !allowedUp) {
-      result.failOffsetY = -dist;
-    } else if (allowedUp && !allowedDown) {
-      result.failOffsetY = dist;
-    }
+  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 = ({
+  gestureDirection,
+  gestureResponseDistance,
+  panGesture
+}) => {
+  const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
+  if (directions.includes("bidirectional")) {
+    return {
+      activeOffsetX: [
+        -gestureResponseDistance,
+        gestureResponseDistance
+      ],
+      activeOffsetY: [
+        -gestureResponseDistance,
+        gestureResponseDistance
+      ]
+    };
+  }
+  const allowedDown = directions.includes("vertical");
+  const allowedUp = directions.includes("vertical-inverted");
+  const allowedRight = directions.includes("horizontal");
+  const allowedLeft = directions.includes("horizontal-inverted");
+  const toleranceX = 15;
+  const toleranceY = 20;
+  const dist = gestureResponseDistance;
+  const result = {};
+  const hasHorizontal = allowedLeft || allowedRight;
+  if (hasHorizontal) {
+    if (allowedLeft && allowedRight) {
+      result.activeOffsetX = [-dist, dist];
+    } else if (allowedLeft) {
+      result.activeOffsetX = -dist;
+    } else if (allowedRight) {
+      result.activeOffsetX = dist;
+    }
+    if (allowedRight && !allowedLeft) {
+      result.failOffsetX = -dist;
+    } else if (allowedLeft && !allowedRight) {
+      result.failOffsetX = dist;
+    }
+  } else {
+    result.failOffsetX = [-toleranceX, toleranceX];
+  }
+  const hasVertical = allowedUp || allowedDown;
+  if (hasVertical) {
+    if (allowedUp && allowedDown) {
+      result.activeOffsetY = [-dist, dist];
+    } else if (allowedUp) {
+      result.activeOffsetY = -dist;
+    } else if (allowedDown) {
+      result.activeOffsetY = dist;
+    }
+    if (allowedDown && !allowedUp) {
+      result.failOffsetY = -dist;
+    } else if (allowedUp && !allowedDown) {
+      result.failOffsetY = dist;
+    }
   } else {
     result.failOffsetY = [-toleranceY, toleranceY];
   }
@@ -501,153 +433,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
+import { useRoute } from "@react-navigation/native";
+var useKey = () => 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 key = useKey();
+  const dimensions = useWindowDimensions();
+  const navigation = useNavigation();
+  const currentScreen = ScreenStore.use(
+    useCallback((state) => state.screens[key], [key])
+  );
+  const handleDismiss = useCallback(
+    (screenBeingDismissed) => {
+      ScreenStore.handleScreenDismiss(screenBeingDismissed, navigation);
+    },
+    [navigation]
+  );
+  const initialTouch = useSharedValue2({
+    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 = "horizontal",
-    gestureEnabled = false,
-    transitionSpec,
+    gestureDirection = DEFAULT_GESTURE_DIRECTION,
+    gestureEnabled = DEFAULT_GESTURE_ENABLED,
+    transitionSpec = {
+      open: DefaultSpec,
+      close: DefaultSpec
+    },
     gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
     gestureResponseDistance = DEFAULT_GESTURE_RESPONSE_DISTANCE
-  } = screenState;
+  } = currentScreen ?? {};
   const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
-  const panGesture = 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 = interpolate2(
-      event.translationX,
-      [-width, width],
-      [-1, 1],
-      "clamp"
-    );
-    _normalizedGestureY.value = interpolate2(
-      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 = Gesture2.Native();
+  const onTouchesDown = useCallback(
+    (e) => {
+      "worklet";
+      const firstTouch = e.changedTouches[0];
+      initialTouch.value = { x: firstTouch.x, y: firstTouch.y };
+    },
+    [initialTouch]
+  );
+  const onTouchesMove = 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 = 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 = useCallback(
+    (event) => {
+      "worklet";
+      let gestureProgress = 0;
+      translateX.value = event.translationX;
+      translateY.value = event.translationY;
+      normalizedGestureX.value = interpolate(
+        event.translationX,
+        [-dimensions.width, dimensions.width],
+        [-1, 1],
+        "clamp"
       );
-      const finalY = Math.abs(
-        translationY + velocityY * gestureVelocityImpact
+      normalizedGestureY.value = 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 = useCallback(
+    (event) => {
       "worklet";
-      if (isFinished) runOnJS2(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) runOnJS2(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 = useMemo(
+    () => Gesture2.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
+import { jsx } from "react/jsx-runtime";
+var TransitionGestureHandlerProvider = ({
+  children
+}) => {
+  const scrollProgress = useSharedValue3({
+    x: 0,
+    y: 0,
+    contentHeight: 0,
+    contentWidth: 0,
+    layoutHeight: 0,
+    layoutWidth: 0
+  });
+  const { panGesture, nativeGesture } = useBuildGestures({
+    scrollProgress
+  });
+  const value = useMemo2(() => {
+    return {
+      panGesture,
+      scrollProgress,
+      nativeGesture
+    };
+  }, [panGesture, scrollProgress, nativeGesture]);
+  return /* @__PURE__ */ jsx(GestureContext.Provider, { value, children: /* @__PURE__ */ jsx(GestureDetector, { gesture: panGesture, children }) });
 };
 
-// src/hooks/use-key.tsx
-import { useRoute } from "@react-navigation/native";
-var useKey = () => useRoute().key;
-
 // src/hooks/use-screen-animation.tsx
+import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
+import { useWindowDimensions as useWindowDimensions2 } from "react-native";
+import { useSharedValue as useSharedValue4 } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 var useAnimationBuilder = () => {
   const key = useKey();
-  const dimensions = useWindowDimensions();
+  const dimensions = useWindowDimensions2();
   const insets = useSafeAreaInsets();
-  const navigation = useNavigation();
-  const progressFallback = useSharedValue(0);
-  const gestureDraggingFallback = useSharedValue(0);
-  const gestureXFallback = useSharedValue(0);
-  const gestureYFallback = useSharedValue(0);
-  const normalizedGestureXFallback = useSharedValue(0);
-  const normalizedGestureYFallback = useSharedValue(0);
+  const progressFallback = useSharedValue4(0);
+  const gestureDraggingFallback = useSharedValue4(0);
+  const gestureXFallback = useSharedValue4(0);
+  const gestureYFallback = useSharedValue4(0);
+  const normalizedGestureXFallback = useSharedValue4(0);
+  const normalizedGestureYFallback = useSharedValue4(0);
+  const isDismissingFallback = useSharedValue4(0);
   const currentScreen = ScreenStore.use(
-    useCallback((state) => state.screens[key], [key])
+    useCallback2((state) => state.screens[key], [key])
   );
   const actualNextScreen = ScreenStore.use(
-    useCallback(
+    useCallback2(
       (state) => {
         const current = state.screens[key];
         if (!current) return void 0;
@@ -659,26 +767,7 @@ var useAnimationBuilder = () => {
       [key]
     )
   );
-  const panGesture = 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 = useCallback(
+  const getAnimationValuesForScreen = useCallback2(
     (screenId) => ({
       progress: animationValues.screenProgress[screenId] || progressFallback,
       gesture: {
@@ -686,7 +775,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
       }
     }),
     [
@@ -695,18 +785,18 @@ var useAnimationBuilder = () => {
       gestureXFallback,
       gestureYFallback,
       normalizedGestureXFallback,
-      normalizedGestureYFallback
+      normalizedGestureYFallback,
+      isDismissingFallback
     ]
   );
-  return useMemo(() => {
+  return useMemo3(() => {
     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,
@@ -714,7 +804,6 @@ var useAnimationBuilder = () => {
     actualNextScreen,
     dimensions,
     insets,
-    panGesture,
     getAnimationValuesForScreen
   ]);
 };
@@ -722,73 +811,15 @@ 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
-import { forwardRef, memo } from "react";
-import { StyleSheet } from "react-native";
-import { GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  useAnimatedStyle as useAnimatedStyle2
-} from "react-native-reanimated";
-
 // src/hooks/use-skip-first-frame.tsx
 import { useEffect } from "react";
-import { useAnimatedStyle, useSharedValue as useSharedValue2 } from "react-native-reanimated";
+import { useAnimatedStyle, useSharedValue as useSharedValue5 } from "react-native-reanimated";
 var useSkipFirstFrame = () => {
-  const opacity = useSharedValue2(0);
+  const opacity = useSharedValue5(0);
   const style = useAnimatedStyle(() => {
     "worklet";
     return {
@@ -803,18 +834,14 @@ var useSkipFirstFrame = () => {
   return { style };
 };
 
-// src/utils/create-transition-component.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function createTransitionComponent(Wrapped) {
+// src/components/create-transition-aware-component.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function createTransitionAwareComponent(Wrapped) {
   const AnimatedComponent = Animated.createAnimatedComponent(Wrapped);
   const Inner = forwardRef(
     (props, ref) => {
       const { children, style, ...rest } = props;
-      const {
-        screenStyleInterpolator,
-        gestureDetector,
-        ...screenInterpolationProps
-      } = _useScreenAnimation();
+      const { screenStyleInterpolator, ...screenInterpolationProps } = _useScreenAnimation();
       const screenContainerStyle = useAnimatedStyle2(() => {
         "worklet";
         return screenStyleInterpolator(screenInterpolationProps).contentStyle || {};
@@ -824,8 +851,15 @@ function createTransitionComponent(Wrapped) {
         return screenStyleInterpolator(screenInterpolationProps).overlayStyle || {};
       });
       const { style: flickerFixStyle } = useSkipFirstFrame();
-      return /* @__PURE__ */ jsxs(Animated.View, { style: [{ flex: 1 }, flickerFixStyle], children: [
-        /* @__PURE__ */ jsx(GestureDetector, { gesture: gestureDetector, children: /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(TransitionGestureHandlerProvider, { children: /* @__PURE__ */ jsxs(Animated.View, { style: [{ flex: 1 }, flickerFixStyle], children: [
+        /* @__PURE__ */ jsx2(
+          Animated.View,
+          {
+            style: [StyleSheet.absoluteFillObject, overlayStyle],
+            pointerEvents: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
           AnimatedComponent,
           {
             ...rest,
@@ -837,41 +871,286 @@ function createTransitionComponent(Wrapped) {
             ],
             children
           }
-        ) }),
-        /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            style: [
-              StyleSheet.absoluteFillObject,
-              overlayStyle,
-              { zIndex: 1e4 }
-            ],
-            pointerEvents: "none"
-          }
         )
-      ] });
+      ] }) });
     }
   );
   Inner.displayName = `Transition(${Wrapped.displayName || Wrapped.name || "Component"})`;
   return memo(Inner);
 }
 
-// src/utils/default-screen-options.ts
-var defaultScreenOptions = () => ({
-  presentation: "containedTransparentModal",
-  headerShown: false,
-  animation: "none"
+// src/components/create-transition-aware-scrollable.tsx
+import { forwardRef as forwardRef2, memo as memo2 } from "react";
+import { View } from "react-native";
+import { GestureDetector as GestureDetector2 } from "react-native-gesture-handler";
+import Animated2 from "react-native-reanimated";
+
+// src/hooks/use-scroll-progress.tsx
+import { useCallback as useCallback3 } from "react";
+import { useAnimatedScrollHandler } from "react-native-reanimated";
+var useScrollProgress = (props) => {
+  const { scrollProgress } = useGestureContext();
+  const scrollHandler = 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 = useCallback3(
+    (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
+import { jsx as jsx3 } from "react/jsx-runtime";
+function createTransitionAwareScrollable(ScrollableComponent) {
+  const WithTransitionAwareness = createTransitionAwareComponent(View);
+  const AnimatedScrollableComponent = Animated2.createAnimatedComponent(ScrollableComponent);
+  const WithScrollAwareness = forwardRef2((props, ref) => {
+    const { nativeGesture } = useGestureContext();
+    const { scrollHandler, onContentSizeChange } = useScrollProgress({
+      onScroll: props.onScroll,
+      onContentSizeChange: props.onContentSizeChange
+    });
+    return /* @__PURE__ */ jsx3(GestureDetector2, { gesture: nativeGesture, children: /* @__PURE__ */ jsx3(
+      AnimatedScrollableComponent,
+      {
+        ...props,
+        ref,
+        onScroll: scrollHandler,
+        onContentSizeChange,
+        scrollEventThrottle: props.scrollEventThrottle || 16
+      }
+    ) });
+  });
+  const Wrapped = forwardRef2((props, ref) => {
+    const { isPlaceholder } = useGestureContext();
+    if (isPlaceholder) {
+      return /* @__PURE__ */ jsx3(WithTransitionAwareness, { children: /* @__PURE__ */ jsx3(WithScrollAwareness, { ...props, ref }) });
+    }
+    return /* @__PURE__ */ jsx3(WithScrollAwareness, { ...props, ref });
+  });
+  WithScrollAwareness.displayName = `Transition(${ScrollableComponent.displayName || ScrollableComponent.name || "Component"})`;
+  return memo2(Wrapped);
+}
+
+// src/configs/presets.ts
+var presets_exports = {};
+__export(presets_exports, {
+  DraggableCard: () => DraggableCard,
+  ElasticCard: () => ElasticCard,
+  SlideFromBottom: () => SlideFromBottom,
+  SlideFromTop: () => SlideFromTop,
+  ZoomIn: () => ZoomIn
 });
+import {
+  Extrapolation,
+  interpolate as interpolate2,
+  interpolateColor
+} from "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 = interpolate2(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 = interpolate2(
+        progress,
+        [0, 1, 2],
+        [0.5, 1, 0.5],
+        Extrapolation.CLAMP
+      );
+      const opacity = interpolate2(
+        progress,
+        [0, 1, 2],
+        [0, 1, 0],
+        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 = interpolate2(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 = interpolate2(progress, [0, 1, 2], [0, 1, 0.75]);
+      const translateY = interpolate2(
+        current.gesture.normalizedY.value,
+        [-1, 1],
+        [-screen.height * 0.5, screen.height * 0.5],
+        "clamp"
+      );
+      const translateX = interpolate2(
+        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 = interpolate2(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 = interpolate2(
+        current.gesture.normalizedX.value,
+        [-1, 0, 1],
+        [-maxElasticityX, 0, maxElasticityX],
+        "clamp"
+      );
+      const translateY = interpolate2(
+        current.gesture.normalizedY.value,
+        [-1, 0, 1],
+        [-maxElasticityY, 0, maxElasticityY],
+        "clamp"
+      );
+      const overlayColor = 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(View),
-  Pressable: createTransitionComponent(Pressable),
+  View: createTransitionAwareComponent(View2),
+  Pressable: createTransitionAwareComponent(Pressable),
+  ScrollView: createTransitionAwareScrollable(ScrollView),
+  FlatList: createTransitionAwareScrollable(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
 };
 export {
   index_default as default,