react-native-screen-transitions 1.0.2 → 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,244 +94,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 = (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_native2 = require("@react-navigation/native");
-var import_react3 = 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/store/utils/use-shallow.tsx
-var import_react = __toESM(require("react"));
-
-// src/store/utils/shallow.ts
-var isIterable = (obj) => Symbol.iterator in obj;
-var hasIterableEntries = (value) => (
-  // HACK: avoid checking entries type
-  "entries" in value
-);
-var compareEntries = (valueA, valueB) => {
-  const mapA = valueA instanceof Map ? valueA : new Map(valueA.entries());
-  const mapB = valueB instanceof Map ? valueB : new Map(valueB.entries());
-  if (mapA.size !== mapB.size) {
-    return false;
-  }
-  for (const [key, value] of mapA) {
-    if (!Object.is(value, mapB.get(key))) {
-      return false;
-    }
-  }
-  return true;
-};
-var compareIterables = (valueA, valueB) => {
-  const iteratorA = valueA[Symbol.iterator]();
-  const iteratorB = valueB[Symbol.iterator]();
-  let nextA = iteratorA.next();
-  let nextB = iteratorB.next();
-  while (!nextA.done && !nextB.done) {
-    if (!Object.is(nextA.value, nextB.value)) {
-      return false;
-    }
-    nextA = iteratorA.next();
-    nextB = iteratorB.next();
-  }
-  return !!nextA.done && !!nextB.done;
-};
-function shallow(valueA, valueB) {
-  if (Object.is(valueA, valueB)) {
-    return true;
-  }
-  if (typeof valueA !== "object" || valueA === null || typeof valueB !== "object" || valueB === null) {
-    return false;
-  }
-  if (Object.getPrototypeOf(valueA) !== Object.getPrototypeOf(valueB)) {
-    return false;
-  }
-  if (isIterable(valueA) && isIterable(valueB)) {
-    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) {
-      return compareEntries(valueA, valueB);
-    }
-    return compareIterables(valueA, valueB);
-  }
-  return compareEntries(
-    { entries: () => Object.entries(valueA) },
-    { entries: () => Object.entries(valueB) }
-  );
-}
-
-// src/store/utils/use-shallow.tsx
-function useShallow(selector) {
-  const prev = import_react.default.useRef(void 0);
-  return (state) => {
-    const next = selector(state);
-    if (shallow(prev.current, next)) {
-      return prev.current;
-    }
-    prev.current = next;
-    return next;
-  };
-}
-
 // src/animation-engine.ts
 var import_react_native_reanimated3 = require("react-native-reanimated");
 
@@ -344,54 +140,93 @@ function createVanillaStore(initialState) {
   return useStore;
 }
 
-// src/store/index.ts
-var useRouteStore = createVanillaStore({
-  routes: {},
-  routeKeys: []
-});
-var RouteStore = {
-  use: useRouteStore,
-  updateRoute: (key, value) => {
-    if (!key) return;
-    useRouteStore.setState(({ routeKeys, routes }) => {
-      const currentRoute = routes[key];
-      if (currentRoute) {
-        routes[key] = {
-          ...currentRoute,
-          ...value
-        };
-      } else {
-        const { name = "", status = 0, closing = false, ...rest } = value;
-        const newIndex = routeKeys.length;
-        routes[key] = {
-          id: key,
-          index: newIndex,
-          name,
-          status,
-          closing,
-          ...rest
-        };
-        routeKeys.push(key);
-      }
-    });
-  },
-  removeRoute: (key) => {
-    if (!key) return;
-    useRouteStore.setState(({ routes, routeKeys }) => {
-      delete routes[key];
-      const indexToRemove = routeKeys.indexOf(key);
-      if (indexToRemove > -1) {
-        routeKeys.splice(indexToRemove, 1);
-      }
+// src/store/utils/handle-screen-dismiss.tsx
+var import_native = require("@react-navigation/native");
+var handleScreenDismiss = (screenBeingDismissed, navigation) => {
+  const { screens } = ScreenStore.use.getState();
+  const dismissedScreen = screens[screenBeingDismissed];
+  if (!dismissedScreen) {
+    navigation.goBack();
+    return;
+  }
+  const childScreens = Object.values(screens).filter(
+    (screen) => screen.parentNavigatorKey === dismissedScreen.navigatorKey
+  );
+  if (childScreens.length > 0) {
+    ScreenStore.updateScreen(dismissedScreen.id, {
+      closing: true
     });
-  },
-  getPreviousRoute: (key) => {
-    if (!key) return null;
-    const index = useRouteStore.getState().routeKeys.indexOf(key);
-    return index > -1 ? useRouteStore.getState().routes[useRouteStore.getState().routeKeys[index - 1]] : null;
+    navigation.dispatch(import_native.StackActions.pop(childScreens.length));
+  } else {
+    navigation.goBack();
   }
 };
 
+// src/store/utils/remove-screen.tsx
+var removeScreen = (key) => {
+  if (!key) return;
+  ScreenStore.use.setState(({ screens, screenKeys }) => {
+    delete screens[key];
+    const indexToRemove = screenKeys.indexOf(key);
+    if (indexToRemove > -1) {
+      screenKeys.splice(indexToRemove, 1);
+    }
+  });
+};
+
+// src/store/utils/should-skip-prevent-default.tsx
+var shouldSkipPreventDefault = (key, navigatorState) => {
+  if (!key) return false;
+  const { screens } = ScreenStore.use.getState();
+  const currentScreen = screens[key];
+  const isLastScreenInStack = navigatorState.routes.length === 1 && navigatorState.routes[0].key === key;
+  const isParentNavigatorExiting = Boolean(
+    currentScreen?.parentNavigatorKey && Object.values(screens).some(
+      (screen) => screen.navigatorKey === currentScreen.parentNavigatorKey && screen.closing
+    )
+  );
+  return isLastScreenInStack || isParentNavigatorExiting;
+};
+
+// src/store/utils/update-screen.tsx
+var updateScreen = (key, value) => {
+  if (!key) return;
+  ScreenStore.use.setState(({ screenKeys, screens }) => {
+    const currentScreen = screens[key];
+    if (currentScreen) {
+      screens[key] = {
+        ...currentScreen,
+        ...value
+      };
+    } else {
+      const { name = "", status = 0, closing = false, ...rest } = value;
+      const newIndex = screenKeys.length;
+      screens[key] = {
+        id: key,
+        index: newIndex,
+        name,
+        status,
+        closing,
+        ...rest
+      };
+      screenKeys.push(key);
+    }
+  });
+};
+
+// src/store/index.ts
+var useScreenStore = createVanillaStore({
+  screens: {},
+  screenKeys: []
+});
+var ScreenStore = {
+  use: useScreenStore,
+  updateScreen,
+  removeScreen,
+  handleScreenDismiss,
+  shouldSkipPreventDefault
+};
+
 // src/utils/animate.ts
 var import_react_native_reanimated2 = require("react-native-reanimated");
 var animate = (toValue, config, callback) => {
@@ -410,14 +245,15 @@ var animationValues = {
   gestureY: {},
   normalizedGestureX: {},
   normalizedGestureY: {},
-  gestureDragging: {}
+  gestureDragging: {},
+  isDismissing: {}
 };
-var triggerAnimation = (route) => {
+var triggerAnimation = (screen) => {
   "worklet";
-  const { id, closing, status, transitionSpec, onAnimationFinish } = route;
+  const { id, closing, status, transitionSpec, onAnimationFinish } = screen;
   const progressValue = animationValues.screenProgress[id];
   if (!progressValue && __DEV__) {
-    console.warn(`Animation values not found for route: ${id}`);
+    console.warn(`Animation values not found for screen: ${id}`);
     return;
   }
   const animationConfig = closing ? transitionSpec?.close : transitionSpec?.open;
@@ -429,14 +265,16 @@ var triggerAnimation = (route) => {
     }
   });
 };
-RouteStore.use.subscribeWithSelector(
-  (state) => state.routes,
-  (currRoutes, prevRoutes) => {
-    const currKeys = Object.keys(currRoutes);
-    const prevKeys = Object.keys(prevRoutes);
+ScreenStore.use.subscribeWithSelector(
+  (state) => state.screens,
+  (currScreens, prevScreens) => {
+    const currKeys = Object.keys(currScreens);
+    const prevKeys = Object.keys(prevScreens);
     const incomingKeys = currKeys.filter((k) => !prevKeys.includes(k));
     const removedKeys = prevKeys.filter((k) => !currKeys.includes(k));
-    const changedKeys = currKeys.filter((k) => currRoutes[k] !== prevRoutes[k]);
+    const changedKeys = currKeys.filter(
+      (k) => currScreens[k] !== prevScreens[k]
+    );
     const animatableValues = Object.values(animationValues);
     for (const incomingKey of incomingKeys) {
       for (const value of animatableValues) {
@@ -450,37 +288,101 @@ RouteStore.use.subscribeWithSelector(
       }
     }
     for (const changedKey of changedKeys) {
-      const currentRoute = currRoutes[changedKey];
-      if (currentRoute) {
-        triggerAnimation(currentRoute);
+      const currentScreen = currScreens[changedKey];
+      if (currentScreen) {
+        triggerAnimation(currentScreen);
       }
     }
   }
 );
 
-// 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/gesture/create-gesture-activation-criteria.ts
-var createGestureActivationCriteria = ({
-  gestureDirection,
-  gestureResponseDistance
+// 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");
+  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");
@@ -522,7 +424,20 @@ var createGestureActivationCriteria = ({
   } else {
     result.failOffsetY = [-toleranceY, toleranceY];
   }
-  return result;
+  if (result?.activeOffsetX) {
+    panGesture.activeOffsetX(result.activeOffsetX);
+  }
+  if (result?.activeOffsetY) {
+    panGesture.activeOffsetY(result.activeOffsetY);
+  }
+  if (result?.failOffsetX) {
+    panGesture.failOffsetX(result.failOffsetX);
+  }
+  if (result?.failOffsetY) {
+    panGesture.failOffsetY(result.failOffsetY);
+  }
+  panGesture.enableTrackpadTwoFingerGesture(true);
+  return panGesture;
 };
 
 // src/utils/gesture/map-gesture-to-progress.ts
@@ -532,315 +447,400 @@ 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,
-  config,
-  width,
-  height,
-  goBack
+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 = (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 = "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
-  } = config;
+  } = 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;
       }
-      if (allowedUp || allowedDown) {
-        const absY = Math.abs(event.translationY);
-        const currentProgress = mapGestureToProgress(absY, height);
-        maxProgress = Math.max(maxProgress, currentProgress);
+      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;
       }
-      gestureProgress = maxProgress;
-    }
-    progress.value = 1 - gestureProgress;
-  }).onEnd((event) => {
+      if ((shouldActivate || isDragging.value) && !isDismissing.value) {
+        manager.activate();
+      } else {
+        manager.fail();
+      }
+    },
+    [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)(goBack)();
-    } : 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 criteria = createGestureActivationCriteria({
+      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
+    gestureResponseDistance,
+    panGesture
   });
-  if (criteria?.activeOffsetX) {
-    panGesture.activeOffsetX(criteria.activeOffsetX);
-  }
-  if (criteria?.activeOffsetY) {
-    panGesture.activeOffsetY(criteria.activeOffsetY);
-  }
-  if (criteria?.failOffsetX) {
-    panGesture.failOffsetX(criteria.failOffsetX);
-  }
-  if (criteria?.failOffsetY) {
-    panGesture.failOffsetY(criteria.failOffsetY);
-  }
-  panGesture.enableTrackpadTwoFingerGesture(true);
-  const nativeGesture = import_react_native_gesture_handler.Gesture.Native().shouldCancelWhenOutside(false);
-  return import_react_native_gesture_handler.Gesture.Race(panGesture, nativeGesture);
+  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_native = require("@react-navigation/native");
-var useKey = () => (0, import_native.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_native2.useNavigation)();
-  const { currentRoute, nextRoute } = RouteStore.use(
-    useShallow(({ routes, routeKeys }) => {
-      const current = routes[key];
-      if (!current) {
-        return { currentRoute: void 0, nextRoute: void 0 };
-      }
-      const currentScreenIndex = current.index;
-      const nextKey = routeKeys[currentScreenIndex + 1];
-      const next = nextKey ? routes[nextKey] : void 0;
-      const isSameNavigator = next?.navigatorKey === current.navigatorKey;
-      if (!isSameNavigator) {
-        return {
-          currentRoute: current,
-          nextRoute: void 0
-        };
-      }
-      return {
-        currentRoute: current,
-        nextRoute: next
-      };
-    })
+  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_react5.useCallback)((state) => state.screens[key], [key])
   );
-  const panGesture = (0, import_react3.useMemo)(
-    () => buildGestureDetector({
-      key,
-      progress: animationValues.screenProgress[key],
-      config: currentRoute || {
-        id: key,
-        name: key,
-        index: 0,
-        status: 0,
-        closing: false
+  const actualNextScreen = ScreenStore.use(
+    (0, import_react5.useCallback)(
+      (state) => {
+        const current = state.screens[key];
+        if (!current) return void 0;
+        const nextKey = state.screenKeys[current.index + 1];
+        const nextScreen = nextKey ? state.screens[nextKey] : void 0;
+        const shouldUseNext = nextScreen?.navigatorKey === current?.navigatorKey;
+        return shouldUseNext ? nextScreen : void 0;
       },
-      width: dimensions.width,
-      height: dimensions.height,
-      goBack: navigation.goBack
+      [key]
+    )
+  );
+  const getAnimationValuesForScreen = (0, import_react5.useCallback)(
+    (screenId) => ({
+      progress: animationValues.screenProgress[screenId] || progressFallback,
+      gesture: {
+        isDragging: animationValues.gestureDragging[screenId] || gestureDraggingFallback,
+        x: animationValues.gestureX[screenId] || gestureXFallback,
+        y: animationValues.gestureY[screenId] || gestureYFallback,
+        normalizedX: animationValues.normalizedGestureX[screenId] || normalizedGestureXFallback,
+        normalizedY: animationValues.normalizedGestureY[screenId] || normalizedGestureYFallback,
+        isDismissing: animationValues.isDismissing[screenId] || isDismissingFallback
+      }
     }),
-    [key, currentRoute, dimensions.width, dimensions.height, navigation.goBack]
+    [
+      progressFallback,
+      gestureDraggingFallback,
+      gestureXFallback,
+      gestureYFallback,
+      normalizedGestureXFallback,
+      normalizedGestureYFallback,
+      isDismissingFallback
+    ]
   );
-  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);
-  return (0, import_react3.useMemo)(() => {
+  return (0, import_react5.useMemo)(() => {
     return {
-      current: {
-        progress: animationValues.screenProgress[key] || progressFallback,
-        gesture: {
-          isDragging: animationValues.gestureDragging[key] || gestureDraggingFallback,
-          x: animationValues.gestureX[key] || gestureXFallback,
-          y: animationValues.gestureY[key] || gestureYFallback,
-          normalizedX: animationValues.normalizedGestureX[key] || normalizedGestureXFallback,
-          normalizedY: animationValues.normalizedGestureY[key] || normalizedGestureYFallback
-        }
-      },
-      next: nextRoute && animationValues.screenProgress[nextRoute.id] ? {
-        progress: animationValues.screenProgress[nextRoute.id],
-        gesture: {
-          isDragging: animationValues.gestureDragging[nextRoute.id] || gestureDraggingFallback,
-          x: animationValues.gestureX[nextRoute.id] || gestureXFallback,
-          y: animationValues.gestureY[nextRoute.id] || gestureYFallback,
-          normalizedX: animationValues.normalizedGestureX[nextRoute.id] || normalizedGestureXFallback,
-          normalizedY: animationValues.normalizedGestureY[nextRoute.id] || normalizedGestureYFallback
-        }
-      } : void 0,
+      current: getAnimationValuesForScreen(key),
+      next: actualNextScreen ? getAnimationValuesForScreen(actualNextScreen.id) : void 0,
       layouts: { screen: dimensions },
       insets,
-      closing: currentRoute?.closing || false,
-      screenStyleInterpolator: nextRoute?.screenStyleInterpolator || currentRoute?.screenStyleInterpolator || noopinterpolator,
-      gestureDetector: panGesture
+      closing: currentScreen?.closing || false,
+      screenStyleInterpolator: actualNextScreen?.screenStyleInterpolator || currentScreen?.screenStyleInterpolator || noopinterpolator
     };
   }, [
     key,
-    currentRoute,
-    nextRoute,
+    currentScreen,
+    actualNextScreen,
     dimensions,
     insets,
-    panGesture,
-    progressFallback,
-    gestureDraggingFallback,
-    gestureXFallback,
-    gestureYFallback,
-    normalizedGestureXFallback,
-    normalizedGestureYFallback
+    getAnimationValuesForScreen
   ]);
 };
 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 navigatorKey = reactNavigation.getState().key;
-      RouteStore.updateRoute(e.target, {
-        id: e.target,
-        name: route.name,
-        status: 1,
-        closing: false,
-        navigatorKey,
-        ...config
-      });
-    },
-    beforeRemove: (e) => {
-      const navigatorState = reactNavigation.getState();
-      const isLastScreenInStack = navigatorState.routes.length === 1 && navigatorState.routes[0].key === e.target;
-      if (isLastScreenInStack) {
-        RouteStore.removeRoute(e.target);
-        return;
-      }
-      e.preventDefault();
-      const handleFinish = (finished) => {
-        if (!finished) return;
-        if (reactNavigation.canGoBack()) {
-          reactNavigation.dispatch(e.data?.action);
-          RouteStore.removeRoute(e.target);
-        }
-      };
-      RouteStore.updateRoute(e.target, {
-        status: 0,
-        closing: true,
-        onAnimationFinish: handleFinish
-      });
-    }
-  };
-};
-
-// src/utils/create-transition-component.tsx
-var import_react5 = 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_react4 = 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_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     requestAnimationFrame(() => {
       opacity.value = 1;
     });
@@ -848,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_react5.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,
@@ -882,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_react5.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 = {