react-native-screen-transitions 2.4.2-beta.2 → 3.0.0-beta.0

package/src/stores/animations.ts

@@ -1,45 +0,0 @@
-import { makeMutable, type SharedValue } from "react-native-reanimated";
-import type { ScreenKey } from "../types/native-stack.navigator";
-
-export type AnimationMap = {
-  progress: SharedValue<number>;
-  closing: SharedValue<number>;
-  animating: SharedValue<number>;
-};
-
-const store: Record<ScreenKey, AnimationMap> = {};
-
-const ensure = (key: ScreenKey) => {
-  let bag = store[key];
-  if (!bag) {
-    bag = {
-      progress: makeMutable(0),
-      closing: makeMutable(0),
-      animating: makeMutable(0),
-    };
-    store[key] = bag;
-  }
-  return bag;
-};
-
-export function getAnimation(
-  key: ScreenKey,
-  type: "progress" | "closing" | "animating"
-): SharedValue<number> {
-  return ensure(key)[type];
-}
-
-export function getAll(key: ScreenKey) {
-  return ensure(key);
-}
-
-function clear(routeKey: ScreenKey) {
-  "worklet";
-  delete store[routeKey];
-}
-
-export const Animations = {
-  getAnimation,
-  clear,
-  getAll,
-};

package/src/stores/bounds/index.ts

@@ -1,125 +0,0 @@
-import {
-  type MeasuredDimensions,
-  makeMutable,
-  type StyleProps,
-} from "react-native-reanimated";
-import type { ScreenTransitionState } from "../../types/animation";
-import type { ScreenKey } from "../../types/native-stack.navigator";
-import type { Any } from "../../types/utils";
-import { pairKey, resolveActiveBound } from "./_utils";
-
-type BoundsDict = Record<
-  string,
-  Record<string, { bounds: MeasuredDimensions; styles: StyleProps }>
->;
-
-const registry = makeMutable<BoundsDict>({});
-const pairCache = makeMutable<Record<string, string>>({});
-const lastActiveByRoute = makeMutable<Record<string, string>>({});
-
-function setBounds(
-  screenId: string,
-  boundId: string,
-  bounds: MeasuredDimensions | null = null,
-  styles: StyleProps = {}
-) {
-  "worklet";
-  registry.modify((state: Any) => {
-    "worklet";
-    if (!state[screenId]) {
-      state[screenId] = {};
-    }
-    state[screenId][boundId] = { bounds, styles };
-
-    return state;
-  });
-}
-
-function getBounds(screenId: string) {
-  "worklet";
-  return registry.value[screenId] ?? {};
-}
-
-function setRouteActive(routeKey: string, boundId: string) {
-  "worklet";
-  lastActiveByRoute.modify((state: Any) => {
-    "worklet";
-    state[routeKey] = boundId;
-    return state;
-  });
-}
-
-function getRouteActive(routeKey: string) {
-  "worklet";
-  return lastActiveByRoute.value[routeKey] ?? null;
-}
-
-function setPairCache(fromKey: string, toKey: string, boundId: string) {
-  "worklet";
-  const key = pairKey(fromKey, toKey);
-  if (!key) return;
-  pairCache.modify((state: Any) => {
-    "worklet";
-    state[key] = boundId;
-    return state;
-  });
-}
-
-function getPairCache(fromKey: string, toKey: string) {
-  "worklet";
-  const key = pairKey(fromKey, toKey);
-  if (!key) return null;
-  return pairCache.value[key] ?? null;
-}
-
-function clear(routeKey: ScreenKey) {
-  "worklet";
-  registry.modify((state) => {
-    "worklet";
-    delete state[routeKey];
-    return state;
-  });
-  lastActiveByRoute.modify((state) => {
-    "worklet";
-    if (state[routeKey]) delete state[routeKey];
-    return state;
-  });
-
-  pairCache.modify((state) => {
-    "worklet";
-    const keys = Object.keys(state);
-    for (let i = 0; i < keys.length; i++) {
-      const k = keys[i];
-      const [from, to] = k.split("|");
-      if (from === routeKey || to === routeKey) {
-        delete state[k];
-      }
-    }
-    return state;
-  });
-}
-
-function getActiveBound(
-  current: ScreenTransitionState,
-  next: ScreenTransitionState | undefined,
-  previous: ScreenTransitionState | undefined
-) {
-  "worklet";
-  return resolveActiveBound({
-    current,
-    next,
-    previous,
-    getPairCache,
-    setPairCache,
-    getRouteActive,
-  });
-}
-
-export const Bounds = {
-  setBounds,
-  getBounds,
-  setRouteActive,
-  getRouteActive,
-  clear,
-  getActiveBound,
-};

package/src/stores/gestures.ts

@@ -1,60 +0,0 @@
-import { makeMutable, type SharedValue } from "react-native-reanimated";
-import type { GestureDirection } from "../types/gesture";
-import type { ScreenKey } from "../types/native-stack.navigator";
-
-export type GestureKey =
-  | "x"
-  | "y"
-  | "normalizedX"
-  | "normalizedY"
-  | "isDismissing"
-  | "isDragging";
-
-export type GestureMap = {
-  x: SharedValue<number>;
-  y: SharedValue<number>;
-  normalizedX: SharedValue<number>;
-  normalizedY: SharedValue<number>;
-  isDismissing: SharedValue<number>;
-  isDragging: SharedValue<number>;
-  direction: SharedValue<Omit<GestureDirection, "bidirectional"> | null>;
-};
-
-const store: Record<ScreenKey, GestureMap> = {};
-
-function ensure(routeKey: ScreenKey): GestureMap {
-  let bag = store[routeKey];
-  if (!bag) {
-    bag = {
-      x: makeMutable(0),
-      y: makeMutable(0),
-      normalizedX: makeMutable(0),
-      normalizedY: makeMutable(0),
-      isDismissing: makeMutable(0),
-      isDragging: makeMutable(0),
-      direction: makeMutable<Omit<GestureDirection, "bidirectional"> | null>(
-        null
-      ),
-    };
-    store[routeKey] = bag;
-  }
-  return bag;
-}
-
-function getGesture(routeKey: ScreenKey, gestureKey: GestureKey) {
-  return ensure(routeKey)[gestureKey];
-}
-
-function getRouteGestures(routeKey: ScreenKey) {
-  return ensure(routeKey);
-}
-
-function clear(routeKey: ScreenKey) {
-  delete store[routeKey];
-}
-
-export const Gestures = {
-  getGesture,
-  getRouteGestures,
-  clear,
-};

package/src/stores/utils/reset-stores-for-screen.ts

@@ -1,13 +0,0 @@
-import type { NativeStackDescriptor } from "../../types/native-stack.navigator";
-import { Animations } from "../animations";
-import { Bounds } from "../bounds";
-import { Gestures } from "../gestures";
-
-/**
- * Reset all stores for a given screen
- */
-export const resetStoresForScreen = (current: NativeStackDescriptor) => {
-  Animations.clear(current.route.key);
-  Gestures.clear(current.route.key);
-  Bounds.clear(current.route.key);
-};

package/src/types/animation.ts

@@ -1,81 +0,0 @@
-import type { ParamListBase, RouteProp } from "@react-navigation/native";
-import type {
-	StyleProps,
-	WithSpringConfig,
-	WithTimingConfig,
-} from "react-native-reanimated";
-import type { EdgeInsets } from "react-native-safe-area-context";
-import type { BoundEntry, BoundsAccessor } from "./bounds";
-import type { GestureValues } from "./gesture";
-import type { Layout } from "./native-stack.navigator";
-
-export type ScreenTransitionState = {
-	progress: number;
-	closing: number;
-	animating: number;
-	gesture: GestureValues;
-	bounds: Record<string, BoundEntry>;
-	route: RouteProp<ParamListBase>;
-};
-
-export interface ScreenInterpolationProps {
-	/** Values for the screen that came before the current one in the navigation stack. */
-	previous: ScreenTransitionState | undefined;
-	/** Values for the current screen being interpolated. */
-	current: ScreenTransitionState;
-	/** Values for the screen that comes after the current one in the navigation stack. */
-	next: ScreenTransitionState | undefined;
-	/** Layout measurements for the screen. */
-	layouts: {
-		/** The `width` and `height` of the screen container. */
-		screen: Layout;
-	};
-	/** The safe area insets for the screen. */
-	insets: EdgeInsets;
-	/** The ID of the currently active shared bound (e.g., 'a' when Transition.Pressable has sharedBoundTag='a'). */
-	activeBoundId: string;
-	/** Whether the current screen is the focused (topmost) screen in the stack. */
-	focused: boolean;
-	/** Combined progress of current and next screen transitions, ranging from 0-2. */
-	progress: number;
-	/** Function that provides access to bounds builders for creating shared element transitions. */
-	bounds: BoundsAccessor;
-	/** The screen state that is currently driving the transition (either current or next, whichever is focused). */
-	active: ScreenTransitionState;
-	/** Whether the active screen is currently transitioning (either being dragged or animating). */
-	isActiveTransitioning: boolean;
-	/** Whether the active screen is in the process of being dismissed/closed. */
-	isDismissing: boolean;
-}
-
-export type ScreenStyleInterpolator = (
-	props: ScreenInterpolationProps,
-) => TransitionInterpolatedStyle;
-
-export type TransitionInterpolatedStyle = {
-	/**
-	 * Animated style for the main screen view. Styles are only applied when Transition.View is present.
-	 */
-	contentStyle?: StyleProps;
-	/**
-	 * Animated style for a semi-transparent overlay. Styles are only applied when Transition.View is present.
-	 */
-	overlayStyle?: StyleProps;
-	/**
-	 * Define your own custom styles by using an id as the key: [id]: StyleProps
-	 */
-	[id: string]: StyleProps | undefined;
-};
-
-/**
- * A Reanimated animation configuration object.
- */
-export type AnimationConfig = WithSpringConfig | WithTimingConfig;
-
-/**
- * Defines separate animation configurations for opening and closing a screen.
- */
-export interface TransitionSpec {
-	open?: AnimationConfig;
-	close?: AnimationConfig;
-}

package/src/types/blank-stack.navigator.ts

@@ -1,266 +0,0 @@
-import type {
-  DefaultNavigatorOptions,
-  Descriptor,
-  NavigationHelpers,
-  NavigationProp,
-  ParamListBase,
-  Route,
-  RouteProp,
-  StackActionHelpers,
-  StackNavigationState,
-  StackRouterOptions,
-  Theme,
-} from "@react-navigation/native";
-import type { DerivedValue } from "react-native-reanimated";
-import type { EdgeInsets } from "react-native-safe-area-context";
-import type { ScreenProps } from "react-native-screens";
-import type {
-  ScreenInterpolationProps,
-  ScreenStyleInterpolator,
-  TransitionSpec,
-} from "./animation";
-import type { GestureActivationArea, GestureDirection } from "./gesture";
-
-export type BlankStackNavigationEventMap = {
-  /**
-   * Event which fires when a transition animation starts.
-   */
-  transitionStart: { data: { closing: boolean } };
-  /**
-   * Event which fires when a transition animation ends.
-   */
-  transitionEnd: { data: { closing: boolean } };
-  /**
-   * Event which fires when a swipe back is canceled on iOS.
-   */
-  gestureCancel: { data: undefined };
-  /**
-   * Event which fires when screen is in sheet presentation & it's detent changes.
-   *
-   * In payload it caries two fields:
-   *
-   * * `index` - current detent index in the `sheetAllowedDetents` array,
-   * * `stable` - on Android `false` value means that the user is dragging the sheet or it is settling; on iOS it is always `true`.
-   */
-  sheetDetentChange: { data: { index: number; stable: boolean } };
-};
-
-export type BlankStackNavigationProp<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string,
-  NavigatorID extends string | undefined = undefined
-> = NavigationProp<
-  ParamList,
-  RouteName,
-  NavigatorID,
-  StackNavigationState<ParamList>,
-  BlankStackNavigationOptions,
-  BlankStackNavigationEventMap
-> &
-  StackActionHelpers<ParamList>;
-
-export type BlankStackScreenProps<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = string,
-  NavigatorID extends string | undefined = undefined
-> = {
-  navigation: BlankStackNavigationProp<ParamList, RouteName, NavigatorID>;
-  route: RouteProp<ParamList, RouteName>;
-};
-
-export type BlankStackOptionsArgs<
-  ParamList extends ParamListBase,
-  RouteName extends keyof ParamList = keyof ParamList,
-  NavigatorID extends string | undefined = undefined
-> = BlankStackScreenProps<ParamList, RouteName, NavigatorID> & {
-  theme: Theme;
-};
-
-export type BlankStackNavigationHelpers = NavigationHelpers<
-  ParamListBase,
-  BlankStackNavigationEventMap
->;
-
-export type BlankStackScene = {
-  route: Route<string>;
-  descriptor: BlankStackDescriptor;
-};
-
-// We want it to be an empty object because navigator does not have any additional props
-export type BlankStackNavigationConfig = {};
-
-export type BlankStackHeaderProps = {
-  /**
-   * Options for the back button.
-   */
-  back?: {
-    /**
-     * Title of the previous screen.
-     */
-    title: string;
-  };
-  /**
-   * Route object for the current screen.
-   */
-  route: Route<string>;
-  /**
-   * Navigation prop for the header.
-   */
-  navigation: BlankStackNavigationProp<ParamListBase>;
-  /**
-   * Safe area insets for the screen.
-   */
-  insets: EdgeInsets;
-  /**
-   * Animation for the screen.
-   */
-  animation: DerivedValue<ScreenInterpolationProps>;
-  /**
-   * Index of the active route
-   */
-  focusedIndex: number;
-};
-
-export type BlankStackScreenTransitionConfig = {
-  /**
-   * The user-provided function to calculate styles based on animation progress.
-   */
-  screenStyleInterpolator?: ScreenStyleInterpolator;
-  /**
-   * The Reanimated animation config for opening and closing transitions.
-   */
-  transitionSpec?: TransitionSpec;
-  /**
-   * Whether the gesture is enabled.
-   */
-  gestureEnabled?: boolean;
-  /**
-   * The direction of the swipe gesture used to dismiss the screen.
-   */
-  gestureDirection?: GestureDirection | GestureDirection[];
-  /**
-   * How much the gesture's final velocity impacts the dismiss decision.
-   */
-  gestureVelocityImpact?: number;
-  /**
-   * Whether to detach the previous screen from the view hierarchy to save memory.
-   * Set it to `false` if you need the previous screen to be seen through the active screen.
-   * Only applicable if `detachInactiveScreens` isn't set to `false`.
-   * Defaults to `false` for the last screen for modals, otherwise `true`.
-   */
-  detachPreviousScreen?: boolean;
-  /**
-   * Distance threshold for gesture recognition throughout the screen.
-   */
-  gestureResponseDistance?: number;
-  /**
-   * Whether the gesture drives the progress.
-   */
-  gestureDrivesProgress?: boolean;
-  /**
-   * The area of the screen where the gesture is activated.
-   */
-  gestureActivationArea?: GestureActivationArea;
-};
-
-export type BlankStackNavigationOptions = BlankStackScreenTransitionConfig & {
-  /**
-   * Function that given `HeaderProps` returns a React Element to display as a header.
-   */
-  header?: (props: BlankStackHeaderProps) => React.ReactNode;
-  /**
-   * Layout: How the header is positioned
-   * - 'float': Single persistent header above all screens (like iOS)
-   * - 'screen': Per-screen header that transitions with content
-   * @default 'screen'
-   */
-  headerMode?: "float" | "screen";
-  /**
-   * Whether to show the header. The header is shown by default.
-   * Setting this to `false` hides the header.
-   */
-  headerShown?: boolean;
-
-  /**
-   * Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
-   *
-   * @platform ios
-   */
-  autoHideHomeIndicator?: boolean;
-  /**
-   * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
-   *
-   * @platform ios
-   */
-  keyboardHandlingEnabled?: boolean;
-  /**
-   * Sets the visibility of the navigation bar. Defaults to `false`.
-   *
-   * @platform android
-   */
-  navigationBarHidden?: boolean;
-  /**
-   * Sets the status bar animation (similar to the `StatusBar` component).
-   * On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar.
-   * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-   *
-   * Defaults to `fade` on iOS and `none` on Android.
-   *
-   * Only supported on Android and iOS.
-   *
-   * @platform android, ios
-   */
-  statusBarAnimation?: ScreenProps["statusBarAnimation"];
-  /**
-   * Whether the status bar should be hidden on this screen.
-   * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
-   *
-   * Only supported on Android and iOS.
-   *
-   * @platform android, ios
-   */
-  statusBarHidden?: boolean;
-  /**
-   * Sets the status bar color (similar to the `StatusBar` component).
-   * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
-   * `auto` and `inverted` are supported only on iOS. On Android, they will fallback to `light`.
-   *
-   * Defaults to `auto` on iOS and `light` on Android.
-   *
-   * Only supported on Android and iOS.
-   *
-   * @platform android, ios
-   */
-  statusBarStyle?: ScreenProps["statusBarStyle"];
-  /**
-   * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
-   * Defaults to `true` when `enableFreeze()` is run at the top of the application.
-   * Requires `react-native-screens` version >=3.16.0.
-   *
-   * Only supported on iOS and Android.
-   */
-  freezeOnBlur?: boolean;
-};
-
-export type BlankStackNavigatorProps = DefaultNavigatorOptions<
-  ParamListBase,
-  string | undefined,
-  StackNavigationState<ParamListBase>,
-  BlankStackNavigationOptions,
-  BlankStackNavigationEventMap,
-  BlankStackNavigationProp<ParamListBase>
-> &
-  StackRouterOptions &
-  BlankStackNavigationConfig;
-
-export type BlankStackDescriptor = Descriptor<
-  BlankStackNavigationOptions,
-  BlankStackNavigationProp<ParamListBase>,
-  RouteProp<ParamListBase>
->;
-
-export type BlankStackDescriptorMap = {
-  [key: string]: BlankStackDescriptor;
-};
-
-export type ScreenKey = string;

package/src/types/core.ts

@@ -1,50 +0,0 @@
-import type { AnimatedProps } from "react-native-reanimated";
-import type { TransitionSpec } from "./animation";
-
-export type ScreenPhase = "previous" | "current" | "next";
-
-export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
-	/**
-	 * Connects this component to custom animated styles defined in screenStyleInterpolator.
-	 *
-	 * When you return custom styles from your interpolator with a matching key,
-	 * those styles will be applied to this component during transitions.
-	 *
-	 * @example
-	 * // In your component:
-	 * <Transition.View styleId="hero-image">
-	 *   <Image source={...} />
-	 * </Transition.View>
-	 *
-	 * // In your screenStyleInterpolator:
-	 * return {
-	 *   'hero-image': {
-	 *     opacity: interpolate(progress, [0, 1], [0, 1]),
-	 *     transform: [{ scale: interpolate(progress, [0, 1], [0.8, 1]) }]
-	 *   }
-	 * }
-	 */
-	styleId?: string;
-
-	/**
-	 * Marks this component for measurement to enable shared element transitions.
-	 * Components with the same tag across different screens will animate between each other.
-	 *
-	 * @example
-	 * // Screen A:
-	 * <Transition.View sharedBoundTag="profile-avatar">
-	 *   <Avatar size="small" />
-	 * </Transition.View>
-	 *
-	 * // Screen B:
-	 * <Transition.View sharedBoundTag="profile-avatar">
-	 *   <Avatar size="large" />
-	 * </Transition.View>
-	 */
-	sharedBoundTag?: string;
-};
-
-export type TransitionConfig = {
-	open: TransitionSpec;
-	close: TransitionSpec;
-};