react-native-screen-transitions 2.4.0 → 2.4.2-beta.0

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

@@ -0,0 +1,271 @@
+import type {
+  DefaultNavigatorOptions,
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  ParamListBase,
+  Route,
+  RouteProp,
+  StackActionHelpers,
+  StackNavigationState,
+  StackRouterOptions,
+  Theme,
+} from "@react-navigation/native";
+import type { StyleProp, ViewStyle } from "react-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"];
+  /**
+   * Style object for the scene content.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * 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/bounds.ts

@@ -14,76 +14,12 @@ import type { ScreenPhase } from "./core";
  */
 export type BoundsMethod = "transform" | "size" | "content";
 
-export type BoundsBuilder = {
-	/**
-	 * Include gesture offsets (x/y) in the computed transform for all methods.
-	 * This syncs the focused screen’s gesture deltas with the previous screen’s bound
-	 * to give the shared look while interacting.
-	 */
-	gestures: (options?: { x?: number; y?: number }) => BoundsBuilder;
-
-	/**
-	 * Animate to the full screen bounds as the destination.
-	 * Useful when the next screen does not define a bound for the same id.
-	 */
-	toFullscreen: () => BoundsBuilder;
-
-	/**
-	 * Compute using absolute window coordinates (pageX/pageY).
-	 * No relative delta math—good when elements are unconstrained by parent layout.
-	 */
-	absolute: () => BoundsBuilder;
-
-	/**
-	 * Compute using relative deltas between start/end bounds (dx/dy, scale).
-	 * This makes the math bound-relative; great when elements are within layout constraints.
-	 */
-	relative: () => BoundsBuilder;
-
-	/**
-	 * Select transform method: translate + scaleX/scaleY (no width/height size).
-	 * Note: x/y translation is applied for all methods when applicable.
-	 */
-	transform: () => BoundsBuilder;
-
-	/**
-	 * Select size method: translate + width/height interpolation (no scaleX/scaleY).
-	 */
-	size: () => BoundsBuilder;
-
-	/**
-	 * Select content method: screen-level transform to align destination content
-	 * so its bound matches the source at progress start. This modifies where the
-	 * bound sits within the screen rather than the bound’s own local transform.
-	 */
-	content: () => BoundsBuilder;
-
-	/**
-	 * Select content scale mode: "aspectFill" (fill), "aspectFit" (fit), or "auto" (default).
-	 */
-	contentFill: () => BoundsBuilder;
-
-	/**
-	 * Select content scale mode: "aspectFill" (fill), "aspectFit" (fit), or "auto" (default).
-	 */
-	contentFit: () => BoundsBuilder;
-
-	/**
-	 * Build the final animated style.
-	 * If a method is not explicitly selected via transform/resize/content,
-	 * the provided argument will be used; defaults to "transform".
-	 */
-	build: (method?: BoundsMethod) => StyleProps;
-};
-
 export type BoundEntry = {
 	bounds: MeasuredDimensions;
 	styles: StyleProps;
 };
 
 export type BoundsAccessor = {
-	(id: string): BoundsBuilder;
-	(): BoundsBuilder;
 	<T extends BoundsBuilderOptions>(options: T): BoundsReturnType<T>;
 	get: (id?: string, phase?: ScreenPhase) => BoundEntry;
 };

package/src/types/{navigator.ts → native-stack.navigator.ts}

@@ -25,6 +25,11 @@ import type {
 import type { ScreenStyleInterpolator, TransitionSpec } from "./animation";
 import type { GestureActivationArea, GestureDirection } from "./gesture";
 
+export type Layout = {
+	width: number;
+	height: number;
+};
+
 export type NativeStackNavigationEventMap = {
 	/**
 	 * Event which fires when a transition animation starts.

package/src/types/utils.ts

@@ -1,3 +1,4 @@
+// biome-ignore lint/suspicious/noExplicitAny: <>
 export type Any = any;
 
 export type Complete<T> = { [K in keyof T]-?: Exclude<T[K], undefined> };

package/src/utils/animation/derivations.ts

@@ -1,25 +1,18 @@
-import type { ScaledSize } from "react-native";
 import { Bounds } from "../../stores/bounds";
 import type { ScreenTransitionState } from "../../types/animation";
-import { createBounds } from "../bounds";
 
 interface DerivationsParams {
 	current: ScreenTransitionState;
 	next?: ScreenTransitionState;
 	previous?: ScreenTransitionState;
-	dimensions: ScaledSize;
 }
 
 /**
  * Additional values to help make defining animations easier.
  */
-export const derivations = ({
-	current,
-	next,
-	previous,
-	dimensions,
-}: DerivationsParams) => {
+export const derivations = ({ current, next, previous }: DerivationsParams) => {
 	"worklet";
+
 	// The combined progress
 	const progress = current.progress + (next?.progress ?? 0);
 
@@ -30,26 +23,16 @@ export const derivations = ({
 	const isActiveTransitioning = !!(
 		active.gesture.isDragging || active.animating
 	);
+
 	const isDismissing = !!(active.gesture.isDismissing || active.closing);
 
 	// The active bound id
 	const activeBoundId = Bounds.getActiveBound(current, next, previous);
 
-	// bounds api
-	const bounds = createBounds({
-		activeBoundId,
-		current,
-		previous,
-		next,
-		progress,
-		dimensions,
-	});
-
 	return {
 		progress,
 		focused,
 		activeBoundId,
-		bounds,
 		active,
 		isActiveTransitioning,
 		isDismissing,

package/src/utils/bounds/_types/builder.ts

@@ -1,30 +1,30 @@
-import type { ScaledSize } from "react-native";
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import type { ScreenTransitionState } from "../../../types/animation";
 import type { BoundsMethod } from "../../../types/bounds";
+import type { Layout } from "../../../types/native-stack.navigator";
 
 /**
  * Params passed to the builder initializer. No method required here.
  */
 export type BoundsBuilderInitParams = {
-	id: string | null;
-	previous?: ScreenTransitionState;
-	current: ScreenTransitionState;
-	next?: ScreenTransitionState;
-	progress: number;
-	dimensions: ScaledSize;
+  id: string | null;
+  previous?: ScreenTransitionState;
+  current: ScreenTransitionState;
+  next?: ScreenTransitionState;
+  progress: number;
+  dimensions: Layout;
 };
 
 export type BoundsAnchor =
-	| "topLeading"
-	| "top"
-	| "topTrailing"
-	| "leading"
-	| "center"
-	| "trailing"
-	| "bottomLeading"
-	| "bottom"
-	| "bottomTrailing";
+  | "topLeading"
+  | "top"
+  | "topTrailing"
+  | "leading"
+  | "center"
+  | "trailing"
+  | "bottomLeading"
+  | "bottom"
+  | "bottomTrailing";
 
 export type BoundsScaleMode = "match" | "none" | "uniform";
 
@@ -35,117 +35,117 @@ export type BoundsSpace = "relative" | "absolute";
 export type BoundsComputeParams = BoundsBuilderInitParams;
 
 export type RawSizeAbsoluteReturn = {
-	width: number;
-	height: number;
-	translateX: number;
-	translateY: number;
+  width: number;
+  height: number;
+  translateX: number;
+  translateY: number;
 };
 
 export type RawSizeRelativeReturn = {
-	translateX: number;
-	translateY: number;
-	width: number;
-	height: number;
+  translateX: number;
+  translateY: number;
+  width: number;
+  height: number;
 };
 
 export type RawTransformAbsoluteReturn = {
-	translateX: number;
-	translateY: number;
-	scaleX: number;
-	scaleY: number;
+  translateX: number;
+  translateY: number;
+  scaleX: number;
+  scaleY: number;
 };
 
 export type RawTransformRelativeReturn = {
-	translateX: number;
-	translateY: number;
-	scaleX: number;
-	scaleY: number;
+  translateX: number;
+  translateY: number;
+  scaleX: number;
+  scaleY: number;
 };
 
 export type RawContentReturn = {
-	translateX: number;
-	translateY: number;
-	scale: number;
+  translateX: number;
+  translateY: number;
+  scale: number;
 };
 
 // Conditional return type based on options
 export type BoundsReturnType<T extends BoundsBuilderOptions> =
-	T["raw"] extends true
-		? T["method"] extends "size"
-			? T["space"] extends "absolute"
-				? RawSizeAbsoluteReturn
-				: RawSizeRelativeReturn
-			: T["method"] extends "content"
-				? RawContentReturn
-				: T["space"] extends "absolute"
-					? RawTransformAbsoluteReturn
-					: RawTransformRelativeReturn
-		: StyleProps;
+  T["raw"] extends true
+    ? T["method"] extends "size"
+      ? T["space"] extends "absolute"
+        ? RawSizeAbsoluteReturn
+        : RawSizeRelativeReturn
+      : T["method"] extends "content"
+      ? RawContentReturn
+      : T["space"] extends "absolute"
+      ? RawTransformAbsoluteReturn
+      : RawTransformRelativeReturn
+    : StyleProps;
 
 export type BoundsBuilderOptions = {
-	/**
-	 * @deprecated Use `content.scaleMode` instead.
-	 */
-	toFullscreen?: boolean;
-	/**
-	 * @deprecated Use `content.anchor` instead.
-	 */
-	absolute?: boolean;
-	/**
-	 * @deprecated Use `content.anchor` instead.
-	 */
-	relative?: boolean;
-	/**
-	 * @deprecated Use `scaleMode` instead.
-	 */
-	contentScaleMode?: "aspectFill" | "aspectFit" | "auto";
-
-	/**
-	 * The ID of the bound to compute bounds for. If not provided, uses the active bound ID.
-	 */
-	id?: string;
-
-	/**
-	 * The method to use to compute the bounds.
-	 *
-	 * - "transform": translates and scales (scaleX/scaleY), no width/height size
-	 * - "size": translates and sizes (width/height), no scaleX/scaleY
-	 * - "content": screen-level content transform that aligns the destination screen
-	 *   so the target bound matches the source at progress start
-	 * @default "transform"
-	 */
-	method?: BoundsMethod;
-
-	/**
-	 * The space to use to compute the bounds.
-	 *
-	 * - "relative": the bounds are computed with relative deltas, constrained by parent layout
-	 * - "absolute": the bounds are computed with absolute coordinates, unconstrained by parent layout
-	 * @default "relative"
-	 */
-	space?: BoundsSpace;
-	/**
-	 * Whether the bound should target the screen or the bound.
-	 * @default "bound"
-	 */
-	target?: BoundsTarget;
-	/**
-	 * The gesture offsets to apply to the bounds.
-	 */
-	gestures?: { x?: number; y?: number };
-	/**
-	 * How the bounds should be scaled between each other.
-	 * @default "match"
-	 */
-	scaleMode?: BoundsScaleMode;
-	/**
-	 * Where the bounds should be anchored between each other.
-	 * @default "center"
-	 */
-	anchor?: BoundsAnchor;
-	/**
-	 * If true, the raw values will be returned instead of the computed values.
-	 * @default false
-	 */
-	raw?: boolean;
+  /**
+   * @deprecated Use `content.scaleMode` instead.
+   */
+  toFullscreen?: boolean;
+  /**
+   * @deprecated Use `content.anchor` instead.
+   */
+  absolute?: boolean;
+  /**
+   * @deprecated Use `content.anchor` instead.
+   */
+  relative?: boolean;
+  /**
+   * @deprecated Use `scaleMode` instead.
+   */
+  contentScaleMode?: "aspectFill" | "aspectFit" | "auto";
+
+  /**
+   * The ID of the bound to compute bounds for. If not provided, uses the active bound ID.
+   */
+  id?: string;
+
+  /**
+   * The method to use to compute the bounds.
+   *
+   * - "transform": translates and scales (scaleX/scaleY), no width/height size
+   * - "size": translates and sizes (width/height), no scaleX/scaleY
+   * - "content": screen-level content transform that aligns the destination screen
+   *   so the target bound matches the source at progress start
+   * @default "transform"
+   */
+  method?: BoundsMethod;
+
+  /**
+   * The space to use to compute the bounds.
+   *
+   * - "relative": the bounds are computed with relative deltas, constrained by parent layout
+   * - "absolute": the bounds are computed with absolute coordinates, unconstrained by parent layout
+   * @default "relative"
+   */
+  space?: BoundsSpace;
+  /**
+   * Whether the bound should target the screen or the bound.
+   * @default "bound"
+   */
+  target?: BoundsTarget;
+  /**
+   * The gesture offsets to apply to the bounds.
+   */
+  gestures?: { x?: number; y?: number };
+  /**
+   * How the bounds should be scaled between each other.
+   * @default "match"
+   */
+  scaleMode?: BoundsScaleMode;
+  /**
+   * Where the bounds should be anchored between each other.
+   * @default "center"
+   */
+  anchor?: BoundsAnchor;
+  /**
+   * If true, the raw values will be returned instead of the computed values.
+   * @default false
+   */
+  raw?: boolean;
 };