react-native-screen-transitions 1.0.1

package/dist/index.js

@@ -0,0 +1,904 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default,
+  useScreenAnimation: () => useScreenAnimation
+});
+module.exports = __toCommonJS(index_exports);
+var import_react_native3 = require("react-native");
+
+// src/configs/presets.ts
+var presets_exports = {};
+__export(presets_exports, {
+  DraggableCard: () => DraggableCard,
+  ElasticCard: () => ElasticCard,
+  SlideFromBottom: () => SlideFromBottom,
+  SlideFromTop: () => SlideFromTop,
+  ZoomIn: () => ZoomIn
+});
+var import_react_native_reanimated = require("react-native-reanimated");
+
+// src/configs/specs.ts
+var specs_exports = {};
+__export(specs_exports, {
+  DefaultSpec: () => DefaultSpec
+});
+var DefaultSpec = {
+  stiffness: 1e3,
+  damping: 500,
+  mass: 3,
+  overshootClamping: true,
+  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");
+
+// src/store/utils/create-vanilla-store.ts
+var import_immer = require("immer");
+var import_react2 = require("react");
+function createVanillaStore(initialState) {
+  let state = initialState;
+  const listeners = /* @__PURE__ */ new Set();
+  const getState = () => state;
+  const setState = (updater) => {
+    const nextState = (0, import_immer.produce)(state, updater);
+    if (nextState !== state) {
+      state = nextState;
+      listeners.forEach((listener) => listener());
+    }
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const subscribeWithSelector = (selector, listener) => {
+    let previousSelectedState = selector(state);
+    const internalListener = () => {
+      const currentSelectedState = selector(getState());
+      if (!Object.is(previousSelectedState, currentSelectedState)) {
+        listener(currentSelectedState, previousSelectedState);
+        previousSelectedState = currentSelectedState;
+      }
+    };
+    const unsubscribe = subscribe(internalListener);
+    listener(previousSelectedState, previousSelectedState);
+    return unsubscribe;
+  };
+  function useStore(selector) {
+    return (0, import_react2.useSyncExternalStore)(subscribe, () => selector(getState()));
+  }
+  Object.assign(useStore, {
+    setState,
+    getState,
+    subscribe,
+    subscribeWithSelector
+  });
+  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/utils/animate.ts
+var import_react_native_reanimated2 = require("react-native-reanimated");
+var animate = (toValue, config, callback) => {
+  "worklet";
+  const isSpring = typeof config === "object" && !("duration" in config) && !("easing" in config);
+  if (!isSpring) {
+    return (0, import_react_native_reanimated2.withTiming)(toValue, config, callback);
+  }
+  return (0, import_react_native_reanimated2.withSpring)(toValue, config, callback);
+};
+
+// src/animation-engine.ts
+var animationValues = {
+  screenProgress: {},
+  gestureX: {},
+  gestureY: {},
+  normalizedGestureX: {},
+  normalizedGestureY: {},
+  gestureDragging: {}
+};
+var triggerAnimation = (route) => {
+  "worklet";
+  const { id, closing, status, transitionSpec, onAnimationFinish } = route;
+  const progressValue = animationValues.screenProgress[id];
+  if (!progressValue && __DEV__) {
+    console.warn(`Animation values not found for route: ${id}`);
+    return;
+  }
+  const animationConfig = closing ? transitionSpec?.close : transitionSpec?.open;
+  const targetValue = status || 0;
+  progressValue.value = animate(targetValue, animationConfig, (finished) => {
+    "worklet";
+    if (finished && onAnimationFinish) {
+      (0, import_react_native_reanimated3.runOnJS)(onAnimationFinish)(true);
+    }
+  });
+};
+RouteStore.use.subscribeWithSelector(
+  (state) => state.routes,
+  (currRoutes, prevRoutes) => {
+    const currKeys = Object.keys(currRoutes);
+    const prevKeys = Object.keys(prevRoutes);
+    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 animatableValues = Object.values(animationValues);
+    for (const incomingKey of incomingKeys) {
+      for (const value of animatableValues) {
+        value[incomingKey] = (0, import_react_native_reanimated3.makeMutable)(0);
+      }
+    }
+    for (const removedKey of removedKeys) {
+      for (const value of animatableValues) {
+        (0, import_react_native_reanimated3.cancelAnimation)(value[removedKey]);
+        delete value[removedKey];
+      }
+    }
+    for (const changedKey of changedKeys) {
+      const currentRoute = currRoutes[changedKey];
+      if (currentRoute) {
+        triggerAnimation(currentRoute);
+      }
+    }
+  }
+);
+
+// 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
+}) => {
+  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];
+  }
+  return result;
+};
+
+// src/utils/gesture/map-gesture-to-progress.ts
+var mapGestureToProgress = (translation, dimension) => {
+  "worklet";
+  const rawProgress = translation / dimension;
+  return Math.max(0, Math.min(1, rawProgress));
+};
+
+// src/utils/gesture/build-gesture-detector.ts
+var GESTURE_VELOCITY_IMPACT = 0.3;
+var DEFAULT_GESTURE_RESPONSE_DISTANCE = 50;
+var buildGestureDetector = ({
+  key,
+  progress,
+  config,
+  width,
+  height,
+  goBack
+}) => {
+  const _translateX = animationValues.gestureX[key];
+  const _translateY = animationValues.gestureY[key];
+  const _normalizedGestureX = animationValues.normalizedGestureX[key];
+  const _normalizedGestureY = animationValues.normalizedGestureY[key];
+  const _isDragging = animationValues.gestureDragging[key];
+  const {
+    gestureDirection = "horizontal",
+    gestureEnabled = false,
+    transitionSpec,
+    gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
+    gestureResponseDistance = DEFAULT_GESTURE_RESPONSE_DISTANCE
+  } = config;
+  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);
+      }
+      if (allowedUp || allowedDown) {
+        const absY = Math.abs(event.translationY);
+        const currentProgress = mapGestureToProgress(absY, height);
+        maxProgress = Math.max(maxProgress, currentProgress);
+      }
+      gestureProgress = maxProgress;
+    }
+    progress.value = 1 - gestureProgress;
+  }).onEnd((event) => {
+    "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
+      );
+      const finalY = Math.abs(
+        translationY + velocityY * gestureVelocityImpact
+      );
+      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;
+      }
+    }
+    const finalProgress = shouldDismiss ? 0 : 1;
+    const spec = shouldDismiss ? transitionSpec?.close : transitionSpec?.open;
+    const onFinish = shouldDismiss ? (isFinished) => {
+      "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({
+    gestureDirection,
+    gestureResponseDistance
+  });
+  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);
+};
+
+// src/utils/noop-interpolator.ts
+var noopinterpolator = () => {
+  "worklet";
+  return {
+    contentStyle: {},
+    overlayStyle: {}
+  };
+};
+
+// 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 useAnimationBuilder = () => {
+  const key = useKey();
+  const dimensions = (0, import_react_native.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];
+      return {
+        currentRoute: current,
+        nextRoute: nextKey ? routes[nextKey] : void 0
+      };
+    })
+  );
+  const panGesture = (0, import_react3.useMemo)(
+    () => buildGestureDetector({
+      key,
+      progress: animationValues.screenProgress[key],
+      config: currentRoute || {
+        id: key,
+        name: key,
+        index: 0,
+        status: 0,
+        closing: false
+      },
+      width: dimensions.width,
+      height: dimensions.height,
+      goBack: navigation.goBack
+    }),
+    [key, currentRoute, dimensions.width, dimensions.height, navigation.goBack]
+  );
+  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 {
+      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,
+      layouts: { screen: dimensions },
+      insets,
+      closing: currentRoute?.closing || false,
+      screenStyleInterpolator: nextRoute?.screenStyleInterpolator || currentRoute?.screenStyleInterpolator || noopinterpolator,
+      gestureDetector: panGesture
+    };
+  }, [
+    key,
+    currentRoute,
+    nextRoute,
+    dimensions,
+    insets,
+    panGesture,
+    progressFallback,
+    gestureDraggingFallback,
+    gestureXFallback,
+    gestureYFallback,
+    normalizedGestureXFallback,
+    normalizedGestureYFallback
+  ]);
+};
+var _useScreenAnimation = () => {
+  return useAnimationBuilder();
+};
+var useScreenAnimation = () => {
+  const {
+    screenStyleInterpolator: _,
+    gestureDetector: __,
+    ...animationProps
+  } = useAnimationBuilder();
+  return animationProps;
+};
+
+// src/utils/create-config.ts
+var createConfig = ({
+  navigation: reactNavigation,
+  route,
+  ...config
+}) => {
+  return {
+    focus: (e) => {
+      RouteStore.updateRoute(e.target, {
+        id: e.target,
+        name: route.name,
+        status: 1,
+        closing: false,
+        ...config
+      });
+    },
+    beforeRemove: (e) => {
+      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 useSkipFirstFrame = () => {
+  const opacity = (0, import_react_native_reanimated6.useSharedValue)(0);
+  const style = (0, import_react_native_reanimated6.useAnimatedStyle)(() => {
+    "worklet";
+    return {
+      opacity: opacity.value
+    };
+  });
+  (0, import_react4.useEffect)(() => {
+    requestAnimationFrame(() => {
+      opacity.value = 1;
+    });
+  }, [opacity]);
+  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)(
+    (props, ref) => {
+      const { children, style, ...rest } = props;
+      const {
+        screenStyleInterpolator,
+        gestureDetector,
+        ...screenInterpolationProps
+      } = _useScreenAnimation();
+      const screenContainerStyle = (0, import_react_native_reanimated7.useAnimatedStyle)(() => {
+        "worklet";
+        return screenStyleInterpolator(screenInterpolationProps).contentStyle || {};
+      });
+      const overlayStyle = (0, import_react_native_reanimated7.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)(
+          AnimatedComponent,
+          {
+            ...rest,
+            ref,
+            style: [
+              { flex: 1, position: "relative" },
+              screenContainerStyle,
+              style
+            ],
+            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);
+}
+
+// src/utils/default-screen-options.ts
+var defaultScreenOptions = () => ({
+  presentation: "containedTransparentModal",
+  headerShown: false,
+  animation: "none"
+});
+
+// src/index.ts
+var index_default = {
+  createTransitionComponent,
+  View: createTransitionComponent(import_react_native3.View),
+  Pressable: createTransitionComponent(import_react_native3.Pressable),
+  createConfig,
+  defaultScreenOptions,
+  presets: presets_exports,
+  specs: specs_exports
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useScreenAnimation
+});
+//# sourceMappingURL=index.js.map