react-native-screen-transitions 4.0.0 → 4.1.0-beta.0

package/src/providers/screen/animation/helpers/hydrate-transition-state/snap-points.ts

@@ -1,189 +0,0 @@
-import { EPSILON } from "../../../../../constants";
-import type { SnapBounds } from "./types";
-
-const getResolvedSnapPointCount = (
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-) => {
-	"worklet";
-	return snapPoints.length + (resolvedAutoSnap !== null ? 1 : 0);
-};
-
-const getAutoSnapPointIndex = (
-	snapPoints: number[],
-	resolvedAutoSnap: number,
-) => {
-	"worklet";
-	let index = 0;
-
-	while (index < snapPoints.length && snapPoints[index] <= resolvedAutoSnap) {
-		index++;
-	}
-
-	return index;
-};
-
-const getResolvedSnapPointAt = (
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-	autoSnapPointIndex: number,
-	index: number,
-) => {
-	"worklet";
-	if (resolvedAutoSnap === null) {
-		return snapPoints[index];
-	}
-
-	if (index < autoSnapPointIndex) {
-		return snapPoints[index];
-	}
-
-	if (index === autoSnapPointIndex) {
-		return resolvedAutoSnap;
-	}
-
-	return snapPoints[index - 1];
-};
-
-export const getResolvedSnapBounds = (
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-	canDismiss = true,
-): SnapBounds | null => {
-	"worklet";
-	const snapPointCount = getResolvedSnapPointCount(
-		snapPoints,
-		resolvedAutoSnap,
-	);
-
-	if (snapPointCount === 0) {
-		return null;
-	}
-
-	const autoSnapPointIndex =
-		resolvedAutoSnap === null
-			? -1
-			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
-	const firstSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		0,
-	);
-	const lastSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		snapPointCount - 1,
-	);
-
-	return {
-		min: canDismiss ? Math.min(0, firstSnapPoint) : firstSnapPoint,
-		max: lastSnapPoint,
-	};
-};
-
-export const computeAnimatedSnapIndex = (
-	progress: number,
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-): number => {
-	"worklet";
-	const snapPointCount = getResolvedSnapPointCount(
-		snapPoints,
-		resolvedAutoSnap,
-	);
-
-	if (snapPointCount === 0) return -1;
-
-	const autoSnapPointIndex =
-		resolvedAutoSnap === null
-			? -1
-			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
-	const firstSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		0,
-	);
-	const lastSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		snapPointCount - 1,
-	);
-
-	if (progress <= firstSnapPoint) return 0;
-	if (progress >= lastSnapPoint) return snapPointCount - 1;
-
-	for (let i = 0; i < snapPointCount - 1; i++) {
-		const currentSnapPoint = getResolvedSnapPointAt(
-			snapPoints,
-			resolvedAutoSnap,
-			autoSnapPointIndex,
-			i,
-		);
-		const nextSnapPoint = getResolvedSnapPointAt(
-			snapPoints,
-			resolvedAutoSnap,
-			autoSnapPointIndex,
-			i + 1,
-		);
-
-		if (progress <= nextSnapPoint) {
-			const t =
-				(progress - currentSnapPoint) / (nextSnapPoint - currentSnapPoint);
-			return i + t;
-		}
-	}
-	return snapPointCount - 1;
-};
-
-export const computeTargetSnapIndex = (
-	targetProgress: number,
-	snapPoints: number[],
-	resolvedAutoSnap: number | null,
-): number => {
-	"worklet";
-	const snapPointCount = getResolvedSnapPointCount(
-		snapPoints,
-		resolvedAutoSnap,
-	);
-
-	if (snapPointCount === 0) return -1;
-
-	const autoSnapPointIndex =
-		resolvedAutoSnap === null
-			? -1
-			: getAutoSnapPointIndex(snapPoints, resolvedAutoSnap);
-	const firstSnapPoint = getResolvedSnapPointAt(
-		snapPoints,
-		resolvedAutoSnap,
-		autoSnapPointIndex,
-		0,
-	);
-
-	if (targetProgress <= 0 && Math.abs(firstSnapPoint) > EPSILON) {
-		return -1;
-	}
-
-	let nearestIndex = 0;
-	let smallestDistance = Math.abs(targetProgress - firstSnapPoint);
-
-	for (let i = 1; i < snapPointCount; i++) {
-		const snapPoint = getResolvedSnapPointAt(
-			snapPoints,
-			resolvedAutoSnap,
-			autoSnapPointIndex,
-			i,
-		);
-		const distance = Math.abs(targetProgress - snapPoint);
-
-		if (distance < smallestDistance) {
-			smallestDistance = distance;
-			nearestIndex = i;
-		}
-	}
-
-	return nearestIndex;
-};

package/src/providers/screen/animation/helpers/hydrate-transition-state/types.ts

@@ -1,37 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { GestureStoreMap } from "../../../../../stores/gesture.store";
-import type {
-	ScreenTransitionOptions,
-	ScreenTransitionState,
-} from "../../../../../types/animation.types";
-import type { ScrollMetadataState } from "../../../../../types/gesture.types";
-import type { Layout } from "../../../../../types/screen.types";
-import type { BaseStackRoute } from "../../../../../types/stack.types";
-
-export type BuiltState = {
-	transitionProgress: SharedValue<number>;
-	visualProgress: SharedValue<number>;
-	willAnimate: SharedValue<number>;
-	closing: SharedValue<number>;
-	progressAnimating: SharedValue<number>;
-	progressSettled: SharedValue<number>;
-	entering: SharedValue<number>;
-	gesture: GestureStoreMap;
-	route: BaseStackRoute;
-	meta?: Record<string, unknown>;
-	options: ScreenTransitionOptions;
-	optionsSlot: ScreenTransitionOptions;
-	targetProgress: SharedValue<number>;
-	resolvedAutoSnapPoint: SharedValue<number>;
-	measuredContentLayout: SharedValue<Layout | null>;
-	scrollMetadata: SharedValue<ScrollMetadataState | null>;
-	contentLayoutSlot: Layout;
-	hasAutoSnapPoint: boolean;
-	sortedNumericSnapPoints: number[];
-	unwrapped: ScreenTransitionState;
-};
-
-export type SnapBounds = {
-	min: number;
-	max: number;
-};

package/src/providers/screen/animation/helpers/pipeline.ts

@@ -1,356 +0,0 @@
-import { useMemo } from "react";
-import { useWindowDimensions } from "react-native";
-import {
-	type DerivedValue,
-	type SharedValue,
-	useDerivedValue,
-	useSharedValue,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import {
-	createScreenTransitionState,
-	DEFAULT_SCREEN_TRANSITION_STATE,
-} from "../../../../constants";
-import { AnimationStore } from "../../../../stores/animation.store";
-import type {
-	ScreenInterpolationProps,
-	ScreenStyleInterpolator,
-	ScreenTransitionState,
-} from "../../../../types/animation.types";
-import { useBlankStackStore } from "../../../stack/blank-stack.provider";
-import { useStackCoreStore } from "../../../stack/core.provider";
-import { type BaseDescriptor, useDescriptorsStore } from "../../descriptors";
-import { buildScreenTransitionOptions } from "./build-screen-transition-options";
-import { updateDerivations } from "./derivations";
-import { hasTransitionsEnabled } from "./has-transitions-enabled";
-import { hydrateTransitionState } from "./hydrate-transition-state";
-import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
-import { readStackProgress, type StackProgressEntry } from "./stack-progress";
-import { useBuildTransitionState } from "./use-build-transition-state";
-import { toPlainRoute, toPlainValue } from "./worklet";
-
-export type ScreenInterpolatorFrame = Omit<
-	ScreenInterpolationProps,
-	"bounds" | "transition"
->;
-
-interface ScreenAnimationPipeline {
-	screenInterpolatorProps: SharedValue<ScreenInterpolatorFrame>;
-	screenInterpolatorPropsRevision: DerivedValue<number>;
-	selectedInterpolatorOptions: SharedValue<SelectedInterpolatorOptions>;
-	nextInterpolator: ScreenStyleInterpolator | undefined;
-	currentInterpolator: ScreenStyleInterpolator | undefined;
-}
-
-const getInitialSettledProgress = (descriptor: BaseDescriptor) => {
-	const { snapPoints, initialSnapIndex = 0 } = descriptor.options;
-
-	if (!snapPoints?.length) {
-		return 1;
-	}
-
-	const clampedIndex = Math.min(
-		Math.max(0, initialSnapIndex),
-		snapPoints.length - 1,
-	);
-	const snapPoint = snapPoints[clampedIndex];
-
-	return typeof snapPoint === "number" ? snapPoint : 0;
-};
-
-const applyInitialProgress = ({
-	state,
-	dimensions,
-	progress,
-	entering = 0,
-	closing = 0,
-	animating = 0,
-	willAnimate = 0,
-	settled = entering || closing || animating ? 0 : 1,
-}: {
-	state: ScreenTransitionState;
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	progress: number;
-	entering?: number;
-	closing?: number;
-	animating?: number;
-	willAnimate?: number;
-	settled?: number;
-}) => {
-	state.progress = progress;
-	state.transitionProgress = progress;
-	state.entering = entering;
-	state.closing = closing;
-	state.animating = animating;
-	state.willAnimate = willAnimate;
-	state.settled = settled;
-	state.layouts.screen = dimensions;
-
-	return state;
-};
-
-const createInitialTransitionState = ({
-	descriptor,
-	dimensions,
-	progress,
-	entering,
-	animating,
-	willAnimate,
-	settled,
-}: {
-	descriptor: BaseDescriptor;
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	progress: number;
-	entering?: number;
-	animating?: number;
-	willAnimate?: number;
-	settled?: number;
-}) => {
-	const meta = descriptor.options.meta
-		? (toPlainValue(descriptor.options.meta) as Record<string, unknown>)
-		: undefined;
-	const state = createScreenTransitionState(
-		toPlainRoute(descriptor.route),
-		meta,
-		buildScreenTransitionOptions(descriptor.options),
-	);
-
-	return applyInitialProgress({
-		state,
-		dimensions,
-		progress,
-		entering,
-		animating,
-		willAnimate,
-		settled,
-	});
-};
-
-const createInitialInterpolatorProps = ({
-	dimensions,
-	insets,
-	currentDescriptor,
-	nextDescriptor,
-	prevDescriptor,
-}: {
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	insets: ScreenInterpolatorFrame["insets"];
-	currentDescriptor: BaseDescriptor;
-	nextDescriptor?: BaseDescriptor;
-	prevDescriptor?: BaseDescriptor;
-}): ScreenInterpolatorFrame => {
-	const hasIncomingNext = !!nextDescriptor;
-	const isFocusedEntering = !!prevDescriptor && !nextDescriptor;
-	const shouldAnimateInitialMount =
-		!prevDescriptor &&
-		!nextDescriptor &&
-		!!currentDescriptor.options.experimental_animateOnInitialMount;
-	const currentProgress =
-		hasIncomingNext || (!isFocusedEntering && !shouldAnimateInitialMount)
-			? getInitialSettledProgress(currentDescriptor)
-			: 0;
-	const currentEntering =
-		isFocusedEntering || shouldAnimateInitialMount ? 1 : 0;
-	const current = createInitialTransitionState({
-		descriptor: currentDescriptor,
-		dimensions,
-		progress: currentProgress,
-		entering: currentEntering,
-		animating: currentEntering,
-		willAnimate: 0,
-	});
-	const previous = prevDescriptor
-		? createInitialTransitionState({
-				descriptor: prevDescriptor,
-				dimensions,
-				progress: getInitialSettledProgress(prevDescriptor),
-			})
-		: undefined;
-	const next = nextDescriptor
-		? createInitialTransitionState({
-				descriptor: nextDescriptor,
-				dimensions,
-				progress: 0,
-				entering: 1,
-				animating: 1,
-				willAnimate: 0,
-				settled: 0,
-			})
-		: undefined;
-	const frame: ScreenInterpolatorFrame = {
-		layouts: current.layouts,
-		insets,
-		previous,
-		current,
-		next,
-		progress: 0,
-		transitionProgress: 0,
-		stackProgress: 0,
-		focused: true,
-		active: current,
-		inactive: undefined,
-	};
-
-	updateDerivations(frame);
-	frame.stackProgress = frame.progress;
-
-	return frame;
-};
-
-type BuiltTransitionState = NonNullable<
-	ReturnType<typeof useBuildTransitionState>
->;
-
-const hydrateInterpolatorFrame = <TFrame extends ScreenInterpolatorFrame>({
-	frame,
-	dimensions,
-	insets,
-	currentAnimation,
-	nextAnimation,
-	prevAnimation,
-	nextHasTransitions,
-	interpolatorOptions,
-	stackProgressEntries,
-	currentRouteKey,
-}: {
-	frame: TFrame;
-	dimensions: ScreenInterpolatorFrame["layouts"]["screen"];
-	insets: ScreenInterpolatorFrame["insets"];
-	currentAnimation: BuiltTransitionState | undefined;
-	nextAnimation: BuiltTransitionState | undefined;
-	prevAnimation: BuiltTransitionState | undefined;
-	nextHasTransitions: boolean;
-	interpolatorOptions: SelectedInterpolatorOptions;
-	stackProgressEntries: readonly StackProgressEntry[];
-	currentRouteKey: string;
-}): TFrame => {
-	"worklet";
-	const shouldApplyOptionsToCurrent = interpolatorOptions.owner === "current";
-	const shouldApplyOptionsToNext =
-		interpolatorOptions.owner === "next" &&
-		!!nextAnimation &&
-		nextHasTransitions;
-	frame.previous = prevAnimation
-		? hydrateTransitionState(prevAnimation, dimensions)
-		: undefined;
-
-	frame.current = currentAnimation
-		? hydrateTransitionState(
-				currentAnimation,
-				dimensions,
-				shouldApplyOptionsToCurrent ? interpolatorOptions.options : undefined,
-			)
-		: DEFAULT_SCREEN_TRANSITION_STATE;
-
-	frame.next =
-		nextAnimation && nextHasTransitions
-			? hydrateTransitionState(
-					nextAnimation,
-					dimensions,
-					shouldApplyOptionsToNext ? interpolatorOptions.options : undefined,
-				)
-			: undefined;
-
-	frame.layouts = frame.current.layouts;
-	frame.insets = insets;
-
-	updateDerivations(frame);
-
-	frame.stackProgress = readStackProgress(
-		stackProgressEntries,
-		currentRouteKey,
-		frame.progress,
-	);
-
-	return frame;
-};
-
-export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
-	const transitionsAlwaysOn = useStackCoreStore(
-		(store) => store.flags.TRANSITIONS_ALWAYS_ON,
-	);
-	const routeKeys = useBlankStackStore((store) => store.routeKeys);
-	const dimensions = useWindowDimensions();
-	const insets = useSafeAreaInsets();
-	const stackProgressEntries = useMemo(
-		() =>
-			routeKeys.map((routeKey) => ({
-				routeKey,
-				visualProgress: AnimationStore.getValue(routeKey, "visualProgress"),
-			})),
-		[routeKeys],
-	);
-
-	const currDescriptor = useDescriptorsStore((store) => store.current);
-	const nextDescriptor = useDescriptorsStore((store) => store.next);
-	const prevDescriptor = useDescriptorsStore((store) => store.previous);
-	const currentAnimation = useBuildTransitionState(currDescriptor);
-	const nextAnimation = useBuildTransitionState(nextDescriptor);
-	const prevAnimation = useBuildTransitionState(prevDescriptor);
-	const currentRouteKey = currDescriptor.route.key;
-
-	const nextRouteKey = nextDescriptor?.route?.key;
-	const nextHasTransitions =
-		!!nextRouteKey &&
-		hasTransitionsEnabled(nextDescriptor?.options, transitionsAlwaysOn);
-
-	const initialInterpolatorProps = useMemo(
-		() =>
-			createInitialInterpolatorProps({
-				dimensions,
-				insets,
-				currentDescriptor: currDescriptor,
-				nextDescriptor,
-				prevDescriptor,
-			}),
-		[dimensions, insets, currDescriptor, nextDescriptor, prevDescriptor],
-	);
-
-	const screenInterpolatorProps = useSharedValue(initialInterpolatorProps);
-	const selectedInterpolatorOptions =
-		useSharedValue<SelectedInterpolatorOptions>({
-			owner: "current",
-		});
-
-	const propsRevisionState = useSharedValue({ value: 0 });
-	const screenInterpolatorPropsRevision = useDerivedValue<number>(() => {
-		"worklet";
-		screenInterpolatorProps.modify((frame) => {
-			"worklet";
-			const interpolatorOptions = selectedInterpolatorOptions.get();
-			return hydrateInterpolatorFrame({
-				frame,
-				dimensions,
-				insets,
-				currentAnimation,
-				nextAnimation,
-				prevAnimation,
-				nextHasTransitions,
-				interpolatorOptions,
-				stackProgressEntries,
-				currentRouteKey,
-			});
-		}, false);
-
-		// `screenInterpolatorProps` is mutated in place. Consumers read this
-		// revision first so Reanimated subscribes to the hydrated frame.
-		propsRevisionState.modify((revision) => {
-			"worklet";
-			revision.value += 1;
-			return revision;
-		}, false);
-
-		return propsRevisionState.get().value;
-	});
-
-	const nextInterpolator = nextDescriptor?.options.screenStyleInterpolator;
-	const currentInterpolator = currDescriptor.options.screenStyleInterpolator;
-
-	return {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-	};
-}

package/src/providers/screen/animation/helpers/read-screen-animation-revisions.ts

@@ -1,15 +0,0 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { ScreenAnimationTransitionSource } from "../types";
-
-type ScreenInterpolatorExternalDeps = Pick<SharedValue<unknown>, "get">[];
-
-export const readScreenAnimationRevisions = (
-	sources: readonly ScreenAnimationTransitionSource[],
-	externalRevisions: ScreenInterpolatorExternalDeps = [],
-) => {
-	"worklet";
-	for (const source of sources) {
-		source.screenInterpolatorPropsRevision.get();
-	}
-	for (const revision of externalRevisions) revision.get();
-};

package/src/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -1,94 +0,0 @@
-import { useMemo } from "react";
-import type { SharedValue } from "react-native-reanimated";
-import { createScreenTransitionState } from "../../../../constants";
-import { AnimationStore } from "../../../../stores/animation.store";
-import {
-	GestureStore,
-	type GestureStoreMap,
-} from "../../../../stores/gesture.store";
-import { ScrollStore } from "../../../../stores/scroll.store";
-import { SystemStore } from "../../../../stores/system.store";
-import type {
-	BaseStackRoute,
-	Layout,
-	ScreenTransitionState,
-	ScrollMetadataState,
-} from "../../../../types";
-import type { ScreenTransitionOptions } from "../../../../types/animation.types";
-import type { BaseDescriptor } from "../../descriptors";
-import { buildScreenTransitionOptions } from "./build-screen-transition-options";
-import { toPlainRoute, toPlainValue } from "./worklet";
-
-type BuiltState = {
-	transitionProgress: SharedValue<number>;
-	visualProgress: SharedValue<number>;
-	willAnimate: SharedValue<number>;
-	closing: SharedValue<number>;
-	progressAnimating: SharedValue<number>;
-	progressSettled: SharedValue<number>;
-	entering: SharedValue<number>;
-	gesture: GestureStoreMap;
-	route: BaseStackRoute;
-	meta?: Record<string, unknown>;
-	options: ScreenTransitionOptions;
-	optionsSlot: ScreenTransitionOptions;
-	targetProgress: SharedValue<number>;
-	resolvedAutoSnapPoint: SharedValue<number>;
-	measuredContentLayout: SharedValue<Layout | null>;
-	scrollMetadata: SharedValue<ScrollMetadataState | null>;
-	contentLayoutSlot: Layout;
-	hasAutoSnapPoint: boolean;
-	sortedNumericSnapPoints: number[];
-	unwrapped: ScreenTransitionState;
-};
-
-export const useBuildTransitionState = (
-	descriptor: BaseDescriptor | undefined,
-): BuiltState | undefined => {
-	const key = descriptor?.route?.key;
-	const meta = descriptor?.options?.meta;
-	const route = descriptor?.route;
-	const snapPoints = descriptor?.options?.snapPoints;
-
-	return useMemo(() => {
-		if (!key || !route) return undefined;
-
-		const plainRoute = toPlainRoute(route);
-		const plainMeta = meta
-			? (toPlainValue(meta) as Record<string, unknown>)
-			: undefined;
-
-		const sortedNumericSnapPoints = (snapPoints ?? [])
-			.filter((p): p is number => typeof p === "number")
-			.sort((a, b) => a - b);
-
-		const transitionOptions = buildScreenTransitionOptions(descriptor.options);
-
-		return {
-			transitionProgress: AnimationStore.getValue(key, "transitionProgress"),
-			visualProgress: AnimationStore.getValue(key, "visualProgress"),
-			willAnimate: AnimationStore.getValue(key, "willAnimate"),
-			closing: AnimationStore.getValue(key, "closing"),
-			entering: AnimationStore.getValue(key, "entering"),
-			progressAnimating: AnimationStore.getValue(key, "progressAnimating"),
-			progressSettled: AnimationStore.getValue(key, "progressSettled"),
-			targetProgress: SystemStore.getValue(key, "targetProgress"),
-			resolvedAutoSnapPoint: SystemStore.getValue(key, "resolvedAutoSnapPoint"),
-			measuredContentLayout: SystemStore.getValue(key, "measuredContentLayout"),
-			scrollMetadata: ScrollStore.getValue(key, "metadata"),
-			contentLayoutSlot: { width: 0, height: 0 },
-			hasAutoSnapPoint: snapPoints?.includes("auto") ?? false,
-			sortedNumericSnapPoints,
-			gesture: GestureStore.getBag(key),
-			route: plainRoute,
-			meta: plainMeta,
-			options: transitionOptions,
-			optionsSlot: {},
-			unwrapped: createScreenTransitionState(
-				plainRoute,
-				plainMeta,
-				transitionOptions,
-			),
-		};
-	}, [key, meta, route, snapPoints, descriptor?.options]);
-};