react-native-screen-transitions 1.2.0 → 2.0.0

package/dist/index.mjs

@@ -1,1279 +0,0 @@
-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 { FlatList, Pressable, ScrollView, View as View2 } from "react-native";
-
-// src/components/create-transition-aware-component.tsx
-import { forwardRef, memo } from "react";
-import { StyleSheet } from "react-native";
-import Animated, {
-  useAnimatedStyle as useAnimatedStyle2
-} from "react-native-reanimated";
-
-// src/components/transition-gesture-handler-provider.tsx
-import { useMemo as useMemo2 } from "react";
-import { GestureDetector } from "react-native-gesture-handler";
-import { useSharedValue as useSharedValue3 } from "react-native-reanimated";
-
-// src/contexts/gesture.ts
-import { createContext, useContext } from "react";
-import { Gesture } from "react-native-gesture-handler";
-import { useSharedValue } from "react-native-reanimated";
-var GestureContext = createContext(
-  void 0
-);
-var useGestureContext = () => {
-  const context = useContext(GestureContext);
-  const scrollProgressFallback = useSharedValue({
-    x: 0,
-    y: 0,
-    contentHeight: 0,
-    contentWidth: 0,
-    layoutHeight: 0,
-    layoutWidth: 0
-  });
-  if (!context) {
-    return {
-      panGesture: Gesture.Pan(),
-      nativeGesture: Gesture.Native(),
-      scrollProgress: scrollProgressFallback,
-      isPlaceholder: true
-    };
-  }
-  return context;
-};
-
-// src/hooks/use-build-gestures.tsx
-import { useNavigation } from "@react-navigation/native";
-import { useCallback, useMemo } from "react";
-import { useWindowDimensions } from "react-native";
-import {
-  Gesture as Gesture2
-} from "react-native-gesture-handler";
-import {
-  interpolate,
-  runOnJS as runOnJS2,
-  useSharedValue as useSharedValue2
-} 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/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/utils/handle-screen-dismiss.tsx
-import { StackActions } from "@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
-    });
-    navigation.dispatch(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
-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: {},
-  isDismissing: {}
-};
-var triggerAnimation = (screen) => {
-  "worklet";
-  const { id, closing, status, transitionSpec, onAnimationFinish } = screen;
-  const progressValue = animationValues.screenProgress[id];
-  if (!progressValue && __DEV__) {
-    console.warn(`Animation values not found for screen: ${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);
-    }
-  });
-};
-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) => currScreens[k] !== prevScreens[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 currentScreen = currScreens[changedKey];
-      if (currentScreen) {
-        triggerAnimation(currentScreen);
-      }
-    }
-  }
-);
-
-// src/utils/create-config.ts
-var createConfig = ({
-  navigation: reactNavigation,
-  route,
-  ...config
-}) => {
-  return {
-    focus: (e) => {
-      const parentNavigatorKey = reactNavigation.getParent()?.getState?.()?.key;
-      const navigatorKey = reactNavigation.getState().key;
-      ScreenStore.updateScreen(e.target, {
-        id: e.target,
-        name: route.name,
-        status: 1,
-        closing: false,
-        navigatorKey,
-        parentNavigatorKey,
-        ...config
-      });
-    },
-    beforeRemove: (e) => {
-      const shouldSkipPreventDefault2 = ScreenStore.shouldSkipPreventDefault(
-        e.target,
-        reactNavigation.getState()
-      );
-      if (shouldSkipPreventDefault2) {
-        ScreenStore.removeScreen(e.target);
-        return;
-      }
-      e.preventDefault();
-      const handleFinish = (finished) => {
-        if (!finished) return;
-        if (reactNavigation.canGoBack()) {
-          reactNavigation.dispatch(e.data?.action);
-          ScreenStore.removeScreen(e.target);
-        }
-      };
-      ScreenStore.updateScreen(e.target, {
-        status: 0,
-        closing: true,
-        onAnimationFinish: handleFinish
-      });
-    }
-  };
-};
-var createScreenConfig = (config) => {
-  return {
-    listeners: (l) => createConfig({ ...l, ...config || {} })
-  };
-};
-
-// src/utils/default-screen-options.ts
-var defaultScreenOptions = () => ({
-  presentation: "containedTransparentModal",
-  headerShown: false,
-  animation: "none"
-});
-
-// src/utils/noop-interpolator.ts
-var noopinterpolator = () => {
-  "worklet";
-  return {
-    contentStyle: {},
-    overlayStyle: {}
-  };
-};
-
-// src/utils/gesture/apply-gesture-activation-criteria.ts
-var applyGestureActivationCriteria = ({
-  gestureDirection,
-  gestureResponseDistance,
-  panGesture
-}) => {
-  const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
-  if (directions.includes("bidirectional")) {
-    return {
-      activeOffsetX: [
-        -gestureResponseDistance,
-        gestureResponseDistance
-      ],
-      activeOffsetY: [
-        -gestureResponseDistance,
-        gestureResponseDistance
-      ]
-    };
-  }
-  const allowedDown = directions.includes("vertical");
-  const allowedUp = directions.includes("vertical-inverted");
-  const allowedRight = directions.includes("horizontal");
-  const allowedLeft = directions.includes("horizontal-inverted");
-  const toleranceX = 15;
-  const toleranceY = 20;
-  const dist = gestureResponseDistance;
-  const result = {};
-  const hasHorizontal = allowedLeft || allowedRight;
-  if (hasHorizontal) {
-    if (allowedLeft && allowedRight) {
-      result.activeOffsetX = [-dist, dist];
-    } else if (allowedLeft) {
-      result.activeOffsetX = -dist;
-    } else if (allowedRight) {
-      result.activeOffsetX = dist;
-    }
-    if (allowedRight && !allowedLeft) {
-      result.failOffsetX = -dist;
-    } else if (allowedLeft && !allowedRight) {
-      result.failOffsetX = dist;
-    }
-  } else {
-    result.failOffsetX = [-toleranceX, toleranceX];
-  }
-  const hasVertical = allowedUp || allowedDown;
-  if (hasVertical) {
-    if (allowedUp && allowedDown) {
-      result.activeOffsetY = [-dist, dist];
-    } else if (allowedUp) {
-      result.activeOffsetY = -dist;
-    } else if (allowedDown) {
-      result.activeOffsetY = dist;
-    }
-    if (allowedDown && !allowedUp) {
-      result.failOffsetY = -dist;
-    } else if (allowedUp && !allowedDown) {
-      result.failOffsetY = dist;
-    }
-  } else {
-    result.failOffsetY = [-toleranceY, toleranceY];
-  }
-  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
-var mapGestureToProgress = (translation, dimension) => {
-  "worklet";
-  const rawProgress = translation / dimension;
-  return Math.max(0, Math.min(1, rawProgress));
-};
-
-// src/hooks/use-key.tsx
-import { useRoute } from "@react-navigation/native";
-var useKey = () => useRoute().key;
-
-// src/hooks/use-build-gestures.tsx
-var GESTURE_VELOCITY_IMPACT = 0.3;
-var DEFAULT_GESTURE_RESPONSE_DISTANCE = 50;
-var DEFAULT_GESTURE_DIRECTION = "horizontal";
-var DEFAULT_GESTURE_ENABLED = false;
-var useBuildGestures = ({
-  scrollProgress
-}) => {
-  const key = useKey();
-  const dimensions = useWindowDimensions();
-  const navigation = useNavigation();
-  const currentScreen = ScreenStore.use(
-    useCallback((state) => state.screens[key], [key])
-  );
-  const handleDismiss = useCallback(
-    (screenBeingDismissed) => {
-      ScreenStore.handleScreenDismiss(screenBeingDismissed, navigation);
-    },
-    [navigation]
-  );
-  const initialTouch = useSharedValue2({
-    x: 0,
-    y: 0
-  });
-  const translateX = animationValues.gestureX[key];
-  const translateY = animationValues.gestureY[key];
-  const normalizedGestureX = animationValues.normalizedGestureX[key];
-  const normalizedGestureY = animationValues.normalizedGestureY[key];
-  const isDragging = animationValues.gestureDragging[key];
-  const isDismissing = animationValues.isDismissing[key];
-  const progress = animationValues.screenProgress[key] || 0;
-  const {
-    gestureDirection = DEFAULT_GESTURE_DIRECTION,
-    gestureEnabled = DEFAULT_GESTURE_ENABLED,
-    transitionSpec = {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    gestureVelocityImpact = GESTURE_VELOCITY_IMPACT,
-    gestureResponseDistance = DEFAULT_GESTURE_RESPONSE_DISTANCE
-  } = currentScreen ?? {};
-  const directions = Array.isArray(gestureDirection) ? gestureDirection : [gestureDirection];
-  const nativeGesture = Gesture2.Native();
-  const onTouchesDown = useCallback(
-    (e) => {
-      "worklet";
-      const firstTouch = e.changedTouches[0];
-      initialTouch.value = { x: firstTouch.x, y: firstTouch.y };
-    },
-    [initialTouch]
-  );
-  const onTouchesMove = useCallback(
-    (e, manager) => {
-      "worklet";
-      const touch = e.changedTouches[0];
-      const deltaX = touch.x - initialTouch.value.x;
-      const deltaY = touch.y - initialTouch.value.y;
-      const isVerticalSwipe = Math.abs(deltaY) > Math.abs(deltaX);
-      const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY);
-      const isSwipingDown = isVerticalSwipe && deltaY > 0;
-      const isSwipingUp = isVerticalSwipe && deltaY < 0;
-      const isSwipingRight = isHorizontalSwipe && deltaX > 0;
-      const isSwipingLeft = isHorizontalSwipe && deltaX < 0;
-      const minMovement = 5;
-      const hasEnoughMovement = Math.abs(deltaX) > minMovement || Math.abs(deltaY) > minMovement;
-      if (!hasEnoughMovement) return;
-      if (isDragging.value) {
-        manager.activate();
-        return;
-      }
-      let shouldActivate = false;
-      for (const direction of directions) {
-        switch (direction) {
-          case "vertical":
-            if (isSwipingDown) {
-              shouldActivate = scrollProgress.value.y <= 0;
-            }
-            break;
-          case "vertical-inverted":
-            if (isSwipingUp) {
-              const maxScrollableY = scrollProgress.value.contentHeight - scrollProgress.value.layoutHeight;
-              shouldActivate = scrollProgress.value.y >= maxScrollableY;
-            }
-            break;
-          case "horizontal":
-            if (isSwipingRight) {
-              shouldActivate = scrollProgress.value.x <= 0;
-            }
-            break;
-          case "horizontal-inverted":
-            if (isSwipingLeft) {
-              const maxProgress = scrollProgress.value.contentWidth - scrollProgress.value.layoutWidth;
-              shouldActivate = scrollProgress.value.x >= maxProgress;
-            }
-            break;
-          case "bidirectional":
-            if (isSwipingDown) {
-              shouldActivate = scrollProgress.value.y <= 0;
-            } else if (isSwipingUp) {
-              shouldActivate = scrollProgress.value.y <= 0;
-            } else if (isSwipingRight || isSwipingLeft) {
-              shouldActivate = true;
-            }
-            break;
-        }
-        if (shouldActivate) break;
-      }
-      if ((shouldActivate || isDragging.value) && !isDismissing.value) {
-        manager.activate();
-      } else {
-        manager.fail();
-      }
-    },
-    [initialTouch, directions, scrollProgress, isDragging, isDismissing]
-  );
-  const onStart = useCallback(() => {
-    "worklet";
-    isDragging.value = 1;
-    isDismissing.value = 0;
-  }, [isDragging, isDismissing]);
-  const onUpdate = useCallback(
-    (event) => {
-      "worklet";
-      let gestureProgress = 0;
-      translateX.value = event.translationX;
-      translateY.value = event.translationY;
-      normalizedGestureX.value = interpolate(
-        event.translationX,
-        [-dimensions.width, dimensions.width],
-        [-1, 1],
-        "clamp"
-      );
-      normalizedGestureY.value = interpolate(
-        event.translationY,
-        [-dimensions.height, dimensions.height],
-        [-1, 1],
-        "clamp"
-      );
-      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;
-      }
-      progress.value = 1 - gestureProgress;
-    },
-    [
-      dimensions,
-      directions,
-      translateX,
-      translateY,
-      normalizedGestureX,
-      normalizedGestureY,
-      progress
-    ]
-  );
-  const onEnd = useCallback(
-    (event) => {
-      "worklet";
-      const { translationX, translationY, velocityX, velocityY } = event;
-      const dismissThreshold = 0.5;
-      if (directions.includes("bidirectional")) {
-        const finalX = Math.abs(
-          translationX + velocityX * gestureVelocityImpact
-        );
-        const finalY = Math.abs(
-          translationY + velocityY * gestureVelocityImpact
-        );
-        const finalDistance = Math.sqrt(finalX ** 2 + finalY ** 2);
-        isDismissing.value = Number(
-          finalDistance > dimensions.width * dismissThreshold
-        );
-      } else {
-        const allowedDown = directions.includes("vertical");
-        const allowedUp = directions.includes("vertical-inverted");
-        const allowedRight = directions.includes("horizontal");
-        const allowedLeft = directions.includes("horizontal-inverted");
-        if (allowedRight && translationX + velocityX * gestureVelocityImpact > dimensions.width * dismissThreshold) {
-          isDismissing.value = 1;
-        } else if (allowedLeft && -translationX - velocityX * gestureVelocityImpact > dimensions.width * dismissThreshold) {
-          isDismissing.value = 1;
-        } else if (allowedDown && translationY + velocityY * gestureVelocityImpact > dimensions.height * dismissThreshold) {
-          isDismissing.value = 1;
-        } else if (allowedUp && -translationY - velocityY * gestureVelocityImpact > dimensions.height * dismissThreshold) {
-          isDismissing.value = 1;
-        }
-      }
-      const finalProgress = isDismissing.value ? 0 : 1;
-      const spec = isDismissing.value ? transitionSpec?.close : transitionSpec?.open;
-      const onFinish = isDismissing.value ? (isFinished) => {
-        "worklet";
-        if (isFinished) runOnJS2(handleDismiss)(currentScreen?.id);
-      } : void 0;
-      progress.value = animate(finalProgress, spec, onFinish);
-      translateX.value = animate(0, spec);
-      translateY.value = animate(0, spec);
-      normalizedGestureX.value = animate(0, spec);
-      normalizedGestureY.value = animate(0, spec);
-      isDragging.value = 0;
-    },
-    [
-      dimensions,
-      directions,
-      translateX,
-      translateY,
-      normalizedGestureX,
-      normalizedGestureY,
-      progress,
-      handleDismiss,
-      currentScreen?.id,
-      transitionSpec?.close,
-      transitionSpec?.open,
-      gestureVelocityImpact,
-      isDragging,
-      isDismissing
-    ]
-  );
-  const panGesture = useMemo(
-    () => Gesture2.Pan().enabled(gestureEnabled).manualActivation(true).onTouchesDown(onTouchesDown).onTouchesMove(onTouchesMove).onStart(onStart).onUpdate(onUpdate).onEnd(onEnd).blocksExternalGesture(nativeGesture),
-    [
-      gestureEnabled,
-      nativeGesture,
-      onTouchesDown,
-      onTouchesMove,
-      onStart,
-      onUpdate,
-      onEnd
-    ]
-  );
-  applyGestureActivationCriteria({
-    gestureDirection,
-    gestureResponseDistance,
-    panGesture
-  });
-  return { panGesture, nativeGesture };
-};
-
-// src/components/transition-gesture-handler-provider.tsx
-import { jsx } from "react/jsx-runtime";
-var TransitionGestureHandlerProvider = ({
-  children
-}) => {
-  const scrollProgress = useSharedValue3({
-    x: 0,
-    y: 0,
-    contentHeight: 0,
-    contentWidth: 0,
-    layoutHeight: 0,
-    layoutWidth: 0
-  });
-  const { panGesture, nativeGesture } = useBuildGestures({
-    scrollProgress
-  });
-  const value = useMemo2(() => {
-    return {
-      panGesture,
-      scrollProgress,
-      nativeGesture
-    };
-  }, [panGesture, scrollProgress, nativeGesture]);
-  return /* @__PURE__ */ jsx(GestureContext.Provider, { value, children: /* @__PURE__ */ jsx(GestureDetector, { gesture: panGesture, children }) });
-};
-
-// src/hooks/use-screen-animation.tsx
-import { useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { useWindowDimensions as useWindowDimensions2 } from "react-native";
-import { useSharedValue as useSharedValue4 } from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-var useAnimationBuilder = () => {
-  const key = useKey();
-  const dimensions = useWindowDimensions2();
-  const insets = useSafeAreaInsets();
-  const progressFallback = useSharedValue4(0);
-  const gestureDraggingFallback = useSharedValue4(0);
-  const gestureXFallback = useSharedValue4(0);
-  const gestureYFallback = useSharedValue4(0);
-  const normalizedGestureXFallback = useSharedValue4(0);
-  const normalizedGestureYFallback = useSharedValue4(0);
-  const isDismissingFallback = useSharedValue4(0);
-  const currentScreen = ScreenStore.use(
-    useCallback2((state) => state.screens[key], [key])
-  );
-  const actualNextScreen = ScreenStore.use(
-    useCallback2(
-      (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;
-      },
-      [key]
-    )
-  );
-  const getAnimationValuesForScreen = useCallback2(
-    (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
-      }
-    }),
-    [
-      progressFallback,
-      gestureDraggingFallback,
-      gestureXFallback,
-      gestureYFallback,
-      normalizedGestureXFallback,
-      normalizedGestureYFallback,
-      isDismissingFallback
-    ]
-  );
-  return useMemo3(() => {
-    return {
-      current: getAnimationValuesForScreen(key),
-      next: actualNextScreen ? getAnimationValuesForScreen(actualNextScreen.id) : void 0,
-      layouts: { screen: dimensions },
-      insets,
-      closing: currentScreen?.closing || false,
-      screenStyleInterpolator: actualNextScreen?.screenStyleInterpolator || currentScreen?.screenStyleInterpolator || noopinterpolator
-    };
-  }, [
-    key,
-    currentScreen,
-    actualNextScreen,
-    dimensions,
-    insets,
-    getAnimationValuesForScreen
-  ]);
-};
-var _useScreenAnimation = () => {
-  return useAnimationBuilder();
-};
-var useScreenAnimation = () => {
-  const { screenStyleInterpolator: _, ...animationProps } = useAnimationBuilder();
-  return animationProps;
-};
-
-// src/hooks/use-skip-first-frame.tsx
-import { useEffect } from "react";
-import { useAnimatedStyle, useSharedValue as useSharedValue5 } from "react-native-reanimated";
-var useSkipFirstFrame = () => {
-  const opacity = useSharedValue5(0);
-  const style = useAnimatedStyle(() => {
-    "worklet";
-    return {
-      opacity: opacity.value
-    };
-  });
-  useEffect(() => {
-    requestAnimationFrame(() => {
-      opacity.value = 1;
-    });
-  }, [opacity]);
-  return { style };
-};
-
-// src/components/create-transition-aware-component.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function createTransitionAwareComponent(Wrapped) {
-  const AnimatedComponent = Animated.createAnimatedComponent(Wrapped);
-  const Inner = forwardRef(
-    (props, ref) => {
-      const { children, style, ...rest } = props;
-      const { screenStyleInterpolator, ...screenInterpolationProps } = _useScreenAnimation();
-      const screenContainerStyle = useAnimatedStyle2(() => {
-        "worklet";
-        return screenStyleInterpolator(screenInterpolationProps).contentStyle || {};
-      });
-      const overlayStyle = useAnimatedStyle2(() => {
-        "worklet";
-        return screenStyleInterpolator(screenInterpolationProps).overlayStyle || {};
-      });
-      const { style: flickerFixStyle } = useSkipFirstFrame();
-      return /* @__PURE__ */ jsx2(TransitionGestureHandlerProvider, { children: /* @__PURE__ */ jsxs(Animated.View, { style: [{ flex: 1 }, flickerFixStyle], children: [
-        /* @__PURE__ */ jsx2(
-          Animated.View,
-          {
-            style: [StyleSheet.absoluteFillObject, overlayStyle],
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          AnimatedComponent,
-          {
-            ...rest,
-            ref,
-            style: [
-              { flex: 1, position: "relative" },
-              screenContainerStyle,
-              style
-            ],
-            children
-          }
-        )
-      ] }) });
-    }
-  );
-  Inner.displayName = `Transition(${Wrapped.displayName || Wrapped.name || "Component"})`;
-  return memo(Inner);
-}
-
-// src/components/create-transition-aware-scrollable.tsx
-import { forwardRef as forwardRef2, memo as memo2 } from "react";
-import { View } from "react-native";
-import { GestureDetector as GestureDetector2 } from "react-native-gesture-handler";
-import Animated2 from "react-native-reanimated";
-
-// src/hooks/use-scroll-progress.tsx
-import { useCallback as useCallback3 } from "react";
-import { useAnimatedScrollHandler } from "react-native-reanimated";
-var useScrollProgress = (props) => {
-  const { scrollProgress } = useGestureContext();
-  const scrollHandler = useAnimatedScrollHandler({
-    onScroll: (event) => {
-      scrollProgress.modify((value) => {
-        "worklet";
-        return {
-          ...value,
-          x: event.contentOffset.x,
-          y: event.contentOffset.y,
-          layoutHeight: event.layoutMeasurement.height,
-          layoutWidth: event.layoutMeasurement.width,
-          contentHeight: event.contentSize.height,
-          contentWidth: event.contentSize.width
-        };
-      });
-    }
-  });
-  const onContentSizeChange = useCallback3(
-    (width, height) => {
-      props.onContentSizeChange?.(width, height);
-      scrollProgress.modify((value) => {
-        "worklet";
-        return {
-          ...value,
-          contentWidth: width,
-          contentHeight: height
-        };
-      });
-    },
-    [scrollProgress, props.onContentSizeChange]
-  );
-  return {
-    scrollHandler,
-    onContentSizeChange
-  };
-};
-
-// src/components/create-transition-aware-scrollable.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function createTransitionAwareScrollable(ScrollableComponent) {
-  const WithTransitionAwareness = createTransitionAwareComponent(View);
-  const AnimatedScrollableComponent = Animated2.createAnimatedComponent(ScrollableComponent);
-  const WithScrollAwareness = forwardRef2((props, ref) => {
-    const { nativeGesture } = useGestureContext();
-    const { scrollHandler, onContentSizeChange } = useScrollProgress({
-      onScroll: props.onScroll,
-      onContentSizeChange: props.onContentSizeChange
-    });
-    return /* @__PURE__ */ jsx3(GestureDetector2, { gesture: nativeGesture, children: /* @__PURE__ */ jsx3(
-      AnimatedScrollableComponent,
-      {
-        ...props,
-        ref,
-        onScroll: scrollHandler,
-        onContentSizeChange,
-        scrollEventThrottle: props.scrollEventThrottle || 16
-      }
-    ) });
-  });
-  const Wrapped = forwardRef2((props, ref) => {
-    const { isPlaceholder } = useGestureContext();
-    if (isPlaceholder) {
-      return /* @__PURE__ */ jsx3(WithTransitionAwareness, { children: /* @__PURE__ */ jsx3(WithScrollAwareness, { ...props, ref }) });
-    }
-    return /* @__PURE__ */ jsx3(WithScrollAwareness, { ...props, ref });
-  });
-  WithScrollAwareness.displayName = `Transition(${ScrollableComponent.displayName || ScrollableComponent.name || "Component"})`;
-  return memo2(Wrapped);
-}
-
-// src/configs/presets.ts
-var presets_exports = {};
-__export(presets_exports, {
-  DraggableCard: () => DraggableCard,
-  ElasticCard: () => ElasticCard,
-  SlideFromBottom: () => SlideFromBottom,
-  SlideFromTop: () => SlideFromTop,
-  ZoomIn: () => ZoomIn
-});
-import {
-  Extrapolation,
-  interpolate as interpolate2,
-  interpolateColor
-} from "react-native-reanimated";
-var SlideFromTop = (config = {}) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: "vertical-inverted",
-    screenStyleInterpolator: ({
-      current,
-      next,
-      layouts: {
-        screen: { height }
-      }
-    }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const y = interpolate2(progress, [0, 1, 2], [-height, 0, height]);
-      return {
-        contentStyle: {
-          transform: [{ translateY: y }]
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var ZoomIn = (config = {}) => {
-  return {
-    gestureEnabled: false,
-    screenStyleInterpolator: ({ current, next }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const scale = interpolate2(
-        progress,
-        [0, 1, 2],
-        [0.5, 1, 0.5],
-        Extrapolation.CLAMP
-      );
-      const opacity = interpolate2(
-        progress,
-        [0, 1, 2],
-        [0, 1, 0],
-        Extrapolation.CLAMP
-      );
-      return {
-        contentStyle: {
-          transform: [{ scale }],
-          opacity
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var SlideFromBottom = (config = {}) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: "vertical",
-    screenStyleInterpolator: ({
-      current,
-      next,
-      layouts: {
-        screen: { height }
-      }
-    }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const y = interpolate2(progress, [0, 1, 2], [height, 0, -height]);
-      return {
-        contentStyle: {
-          transform: [{ translateY: y }]
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var DraggableCard = (config = {}) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: ["horizontal", "vertical"],
-    screenStyleInterpolator: ({ current, next, layouts: { screen } }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const scale = interpolate2(progress, [0, 1, 2], [0, 1, 0.75]);
-      const translateY = interpolate2(
-        current.gesture.normalizedY.value,
-        [-1, 1],
-        [-screen.height * 0.5, screen.height * 0.5],
-        "clamp"
-      );
-      const translateX = interpolate2(
-        current.gesture.normalizedX.value,
-        [-1, 1],
-        [-screen.width * 0.5, screen.width * 0.5],
-        "clamp"
-      );
-      return {
-        contentStyle: {
-          transform: [{ scale }, { translateY }, { translateX }]
-        }
-      };
-    },
-    transitionSpec: {
-      open: DefaultSpec,
-      close: DefaultSpec
-    },
-    ...config
-  };
-};
-var ElasticCard = (config = { elasticFactor: 0.5 }) => {
-  return {
-    gestureEnabled: true,
-    gestureDirection: "bidirectional",
-    screenStyleInterpolator: ({ current, next, layouts: { screen } }) => {
-      "worklet";
-      const progress = current.progress.value + (next?.progress.value ?? 0);
-      const scale = interpolate2(progress, [0, 1, 2], [0, 1, 0.8]);
-      const maxElasticityX = screen.width * (config.elasticFactor ?? 0.5);
-      const maxElasticityY = screen.height * (config.elasticFactor ?? 0.5);
-      const translateX = interpolate2(
-        current.gesture.normalizedX.value,
-        [-1, 0, 1],
-        [-maxElasticityX, 0, maxElasticityX],
-        "clamp"
-      );
-      const translateY = interpolate2(
-        current.gesture.normalizedY.value,
-        [-1, 0, 1],
-        [-maxElasticityY, 0, maxElasticityY],
-        "clamp"
-      );
-      const overlayColor = interpolateColor(
-        current.progress.value,
-        [0, 1],
-        ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]
-      );
-      return {
-        contentStyle: {
-          transform: [{ scale }, { translateX }, { translateY }]
-        },
-        overlayStyle: {
-          backgroundColor: !next ? overlayColor : "rgba(0,0,0,0)"
-        }
-      };
-    },
-    ...config
-  };
-};
-
-// src/navigator/create-transitionable-stack-navigator.tsx
-import {
-  createNavigatorFactory,
-  StackRouter,
-  useNavigationBuilder
-} from "@react-navigation/native";
-import {
-  NativeStackView
-} from "@react-navigation/native-stack";
-import React, { Children, isValidElement, useMemo as useMemo4 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var DEFAULT_SCREEN_OPTIONS = {
-  presentation: "containedTransparentModal",
-  headerShown: false,
-  animation: "none"
-  /**
-   * EXPERIMENTAL:
-   When handling forward navigation, this would be the prop we would use to prevent the underlying screen from not being interactable.
-    - pointerEvents: "box-none",
-   */
-};
-var CONFLICTING_SCREEN_OPTIONS = {
-  gestureEnabled: false,
-  gestureDirection: "horizontal"
-};
-function TransitionableStackNavigator({
-  id,
-  initialRouteName,
-  children,
-  layout,
-  screenListeners,
-  screenOptions,
-  screenLayout,
-  UNSTABLE_router,
-  ...rest
-}) {
-  const screenProcessor = useMemo4(() => {
-    const childOptions = /* @__PURE__ */ new Map();
-    const modifiedChildren = Children.toArray(children).filter(isValidElement).map((child) => {
-      const resolvedOptions = typeof child.props.options === "function" ? child.props.options({
-        route: child.props.route,
-        navigation: child.props.navigation
-      }) : child.props.options || {};
-      childOptions.set(child.props.name, resolvedOptions);
-      const skipDefaultScreenOptions = resolvedOptions?.skipDefaultScreenOptions === true;
-      return React.cloneElement(child, {
-        ...child.props,
-        options: {
-          ...skipDefaultScreenOptions ? {} : DEFAULT_SCREEN_OPTIONS,
-          ...resolvedOptions,
-          ...CONFLICTING_SCREEN_OPTIONS
-        }
-      });
-    });
-    return {
-      children: modifiedChildren,
-      childOptions
-    };
-  }, [children]);
-  const screenListenersWithTransitions = useMemo4(() => {
-    return (props) => {
-      const resolvedNavigatorConfig = typeof screenOptions === "function" ? screenOptions({
-        navigation: props.navigation,
-        route: props.route,
-        theme: {}
-      }) : screenOptions;
-      const resolvedChildConfig = screenProcessor.childOptions.get(props.route.name);
-      const mergedConfig = {
-        ...resolvedNavigatorConfig,
-        ...resolvedChildConfig
-        //Child should override navigator config
-      };
-      const transitionListeners = createConfig({
-        navigation: props.navigation,
-        route: props.route,
-        screenStyleInterpolator: mergedConfig.screenStyleInterpolator,
-        transitionSpec: mergedConfig.transitionSpec,
-        gestureEnabled: mergedConfig.gestureEnabled,
-        gestureDirection: mergedConfig.gestureDirection,
-        gestureResponseDistance: typeof mergedConfig.gestureResponseDistance === "number" ? mergedConfig.gestureResponseDistance : void 0,
-        gestureVelocityImpact: mergedConfig.gestureVelocityImpact
-      });
-      const existingListeners = typeof screenListeners === "function" ? screenListeners(props) : screenListeners || {};
-      return {
-        ...existingListeners,
-        ...transitionListeners
-      };
-    };
-  }, [screenListeners, screenOptions, screenProcessor.childOptions]);
-  const buildingBlocks = {
-    id,
-    initialRouteName,
-    children: screenProcessor.children,
-    layout,
-    screenListeners: screenListenersWithTransitions,
-    screenOptions,
-    screenLayout,
-    UNSTABLE_router
-  };
-  const { state, describe, descriptors, navigation, NavigationContent } = useNavigationBuilder(StackRouter, buildingBlocks);
-  return /* @__PURE__ */ jsx4(NavigationContent, { children: /* @__PURE__ */ jsx4(NativeStackView, { ...rest, state, navigation, descriptors, describe }) });
-}
-function createTransitionableStackNavigator() {
-  return createNavigatorFactory(TransitionableStackNavigator)();
-}
-
-// src/index.ts
-var index_default = {
-  View: createTransitionAwareComponent(View2),
-  Pressable: createTransitionAwareComponent(Pressable),
-  ScrollView: createTransitionAwareScrollable(ScrollView),
-  FlatList: createTransitionAwareScrollable(FlatList),
-  defaultScreenOptions,
-  presets: presets_exports,
-  specs: specs_exports,
-  /**
-   * Create a transition aware component
-   */
-  createTransitionAwareComponent,
-  /**
-   * Create a transition aware scrollable component
-   */
-  createTransitionAwareScrollable,
-  /**
-   * Create a transitionable native stack navigator.
-   *
-   */
-  createTransitionableStackNavigator,
-  /**
-   * @deprecated Use {@link createTransitionableStackNavigator} instead.
-   */
-  createConfig,
-  /**
-   * @deprecated Use {@link createTransitionableStackNavigator} instead.
-   */
-  createScreenConfig
-  /**
-   * @deprecated Use {@link createTransitionableStackNavigator} instead.
-   */
-};
-export {
-  index_default as default,
-  useScreenAnimation
-};
-//# sourceMappingURL=index.mjs.map