react-native-screen-transitions 1.0.1

package/dist/index.mjs

@@ -0,0 +1,891 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/index.ts
+import { Pressable, View } from "react-native";
+
+// src/configs/presets.ts
+var presets_exports = {};
+__export(presets_exports, {
+  DraggableCard: () => DraggableCard,
+  ElasticCard: () => ElasticCard,
+  SlideFromBottom: () => SlideFromBottom,
+  SlideFromTop: () => SlideFromTop,
+  ZoomIn: () => ZoomIn
+});
+import {
+  Extrapolation,
+  interpolate,
+  interpolateColor
+} from "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 = 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 { useMemo } from "react";
+import { useWindowDimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+// src/store/utils/use-shallow.tsx
+import React from "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 = React.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
+import {
+  cancelAnimation,
+  makeMutable,
+  runOnJS
+} from "react-native-reanimated";
+
+// src/store/utils/create-vanilla-store.ts
+import { produce } from "immer";
+import { useSyncExternalStore } from "react";
+function createVanillaStore(initialState) {
+  let state = initialState;
+  const listeners = /* @__PURE__ */ new Set();
+  const getState = () => state;
+  const setState = (updater) => {
+    const nextState = 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 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
+import {
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+var animate = (toValue, config, callback) => {
+  "worklet";
+  const isSpring = typeof config === "object" && !("duration" in config) && !("easing" in config);
+  if (!isSpring) {
+    return withTiming(toValue, config, callback);
+  }
+  return 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) {
+      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] = makeMutable(0);
+      }
+    }
+    for (const removedKey of removedKeys) {
+      for (const value of animatableValues) {
+        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
+import { Gesture } from "react-native-gesture-handler";
+import {
+  interpolate as interpolate2,
+  runOnJS as runOnJS2
+} from "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 = 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);
+      }
+      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) runOnJS2(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 = Gesture.Native().shouldCancelWhenOutside(false);
+  return Gesture.Race(panGesture, nativeGesture);
+};
+
+// src/utils/noop-interpolator.ts
+var noopinterpolator = () => {
+  "worklet";
+  return {
+    contentStyle: {},
+    overlayStyle: {}
+  };
+};
+
+// src/hooks/use-key.tsx
+import { useRoute } from "@react-navigation/native";
+var useKey = () => useRoute().key;
+
+// src/hooks/use-screen-animation.tsx
+var useAnimationBuilder = () => {
+  const key = useKey();
+  const dimensions = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const navigation = 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 = 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 = useSharedValue(0);
+  const gestureDraggingFallback = useSharedValue(0);
+  const gestureXFallback = useSharedValue(0);
+  const gestureYFallback = useSharedValue(0);
+  const normalizedGestureXFallback = useSharedValue(0);
+  const normalizedGestureYFallback = useSharedValue(0);
+  return 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
+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";
+var useSkipFirstFrame = () => {
+  const opacity = useSharedValue2(0);
+  const style = useAnimatedStyle(() => {
+    "worklet";
+    return {
+      opacity: opacity.value
+    };
+  });
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      opacity.value = 1;
+    });
+  }, [opacity]);
+  return { style };
+};
+
+// src/utils/create-transition-component.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function createTransitionComponent(Wrapped) {
+  const AnimatedComponent = Animated.createAnimatedComponent(Wrapped);
+  const Inner = forwardRef(
+    (props, ref) => {
+      const { children, style, ...rest } = props;
+      const {
+        screenStyleInterpolator,
+        gestureDetector,
+        ...screenInterpolationProps
+      } = _useScreenAnimation();
+      const screenContainerStyle = useAnimatedStyle2(() => {
+        "worklet";
+        return screenStyleInterpolator(screenInterpolationProps).contentStyle || {};
+      });
+      const overlayStyle = useAnimatedStyle2(() => {
+        "worklet";
+        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(
+          AnimatedComponent,
+          {
+            ...rest,
+            ref,
+            style: [
+              { flex: 1, position: "relative" },
+              screenContainerStyle,
+              style
+            ],
+            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/index.ts
+var index_default = {
+  createTransitionComponent,
+  View: createTransitionComponent(View),
+  Pressable: createTransitionComponent(Pressable),
+  createConfig,
+  defaultScreenOptions,
+  presets: presets_exports,
+  specs: specs_exports
+};
+export {
+  index_default as default,
+  useScreenAnimation
+};
+//# sourceMappingURL=index.mjs.map