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

package/src/providers/screen/animation/animation.provider.tsx

@@ -1,94 +0,0 @@
-import { type ReactNode, useMemo } from "react";
-import { createBoundsAccessor } from "../../../utils/bounds";
-import createProvider from "../../../utils/create-provider";
-import { useBlankStackStore } from "../../stack/blank-stack.provider";
-import { useDescriptorsStore } from "../descriptors";
-import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
-import { useScreenAnimationPipeline } from "./helpers/pipeline";
-import type { ScreenAnimationTransitionSource } from "./types";
-
-type Props = {
-	children: ReactNode;
-};
-
-export type ScreenAnimationContextValue = ReturnType<
-	typeof useScreenAnimationPipeline
-> & {
-	transitionSources: readonly ScreenAnimationTransitionSource[];
-	transitionOriginIndex: number;
-	transitionSourcesThroughSelf: readonly ScreenAnimationTransitionSource[];
-	transitionSourcesFromSelf: readonly ScreenAnimationTransitionSource[];
-};
-
-const EMPTY_TRANSITION_SOURCES: readonly ScreenAnimationTransitionSource[] = [];
-
-const createScreenAnimationProvider = createProvider("ScreenAnimation", {
-	global: true,
-})<Props, ScreenAnimationContextValue>;
-
-export const {
-	StoreProvider: ScreenAnimationStoreProvider,
-	ScreenAnimationProvider,
-	useOptionalScreenAnimationStore,
-	useScreenAnimationStore,
-}: ReturnType<
-	typeof createScreenAnimationProvider
-> = createScreenAnimationProvider((_props) => {
-	const currentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.currentScreenKey,
-	);
-	const isClosing = useBlankStackStore(
-		(store) => store.scenesByKey[currentScreenKey]?.activity === "closing",
-	);
-	const relationships = useCurrentScreenRelationships();
-	const pipeline = useScreenAnimationPipeline();
-
-	const screenAnimationSource = useMemo<ScreenAnimationTransitionSource>(
-		() => ({
-			screenInterpolatorProps: pipeline.screenInterpolatorProps,
-			screenInterpolatorPropsRevision: pipeline.screenInterpolatorPropsRevision,
-			boundsAccessor: createBoundsAccessor(() => {
-				"worklet";
-				return pipeline.screenInterpolatorProps.get();
-			}),
-		}),
-		[
-			pipeline.screenInterpolatorProps,
-			pipeline.screenInterpolatorPropsRevision,
-		],
-	);
-	const ancestorSources =
-		useOptionalScreenAnimationStore(
-			relationships.parentScreenKey,
-			(store) => store.transitionSourcesThroughSelf,
-		) ?? EMPTY_TRANSITION_SOURCES;
-	const descendantSources =
-		useOptionalScreenAnimationStore(
-			relationships.activeChildScreenKey,
-			(store) => store.transitionSourcesFromSelf,
-		) ?? EMPTY_TRANSITION_SOURCES;
-	const transitionSourcesThroughSelf = useMemo(
-		() => [...ancestorSources, screenAnimationSource],
-		[ancestorSources, screenAnimationSource],
-	);
-	const transitionSourcesFromSelf = useMemo(
-		() => [screenAnimationSource, ...descendantSources],
-		[screenAnimationSource, descendantSources],
-	);
-	const transitionSources = useMemo(
-		() => [...transitionSourcesThroughSelf, ...descendantSources],
-		[transitionSourcesThroughSelf, descendantSources],
-	);
-
-	return {
-		key: currentScreenKey,
-		unregisterOnCleanup: isClosing,
-		value: {
-			...pipeline,
-			transitionSources,
-			transitionOriginIndex: ancestorSources.length,
-			transitionSourcesThroughSelf,
-			transitionSourcesFromSelf,
-		},
-	};
-});

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

@@ -1,96 +0,0 @@
-import { useMemo } from "react";
-import type {
-	ScreenInterpolationProps,
-	ScreenTransitionTarget,
-} from "../../../../../types/animation.types";
-import type { ScreenAnimationContextValue } from "../../animation.provider";
-import type { ScreenAnimationTransitionSource } from "../../types";
-
-type TransitionSourceIndex = number;
-
-export type TransitionAccessorSource = ScreenAnimationTransitionSource;
-
-type TransitionAccessorStore = Pick<
-	ScreenAnimationContextValue,
-	"transitionSources" | "transitionOriginIndex"
->;
-
-const resolveTargetIndex = (
-	target: ScreenTransitionTarget | undefined,
-	currentIndex: TransitionSourceIndex,
-	sourceCount: number,
-): TransitionSourceIndex => {
-	"worklet";
-	if (sourceCount <= 0) return -1;
-
-	if (
-		target !== undefined &&
-		(typeof target !== "object" || target === null || !("depth" in target))
-	) {
-		return -1;
-	}
-
-	const depth = target?.depth ?? 0;
-	if (!Number.isInteger(depth)) return -1;
-
-	const resolvedIndex = currentIndex + depth;
-	return resolvedIndex >= 0 && resolvedIndex < sourceCount ? resolvedIndex : -1;
-};
-
-export const createTransitionAccessor = (
-	sources: readonly TransitionAccessorSource[],
-	originIndex = 0,
-) => {
-	"worklet";
-
-	const buildScope = (
-		sourceIndex: TransitionSourceIndex,
-		currentSources: readonly TransitionAccessorSource[],
-	): ScreenInterpolationProps | null => {
-		"worklet";
-		const source = currentSources[sourceIndex];
-		if (!source) return null;
-
-		source.screenInterpolatorPropsRevision.get();
-		const frame = source.screenInterpolatorProps.get();
-
-		return {
-			...frame,
-			bounds: source.boundsAccessor,
-			transition: (target?: ScreenTransitionTarget) => {
-				"worklet";
-				const targetIndex = resolveTargetIndex(
-					target,
-					sourceIndex,
-					currentSources.length,
-				);
-
-				if (targetIndex === -1) {
-					return null;
-				}
-
-				return buildScope(targetIndex, currentSources);
-			},
-		};
-	};
-
-	return (target?: ScreenTransitionTarget): ScreenInterpolationProps | null => {
-		"worklet";
-		const targetIndex = resolveTargetIndex(target, originIndex, sources.length);
-		if (targetIndex === -1) {
-			return null;
-		}
-
-		return buildScope(targetIndex, sources);
-	};
-};
-
-export const useBuildTransitionAccessor = ({
-	transitionSources,
-	transitionOriginIndex,
-}: TransitionAccessorStore) => {
-	return useMemo(
-		() => createTransitionAccessor(transitionSources, transitionOriginIndex),
-		[transitionSources, transitionOriginIndex],
-	);
-};

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

@@ -1,27 +0,0 @@
-import type {
-	ScreenTransitionConfig,
-	ScreenTransitionOptions,
-} from "../../../../types";
-import { resolveSheetScrollGestureBehavior } from "../../../../utils/resolve-screen-transition-options";
-
-export const buildScreenTransitionOptions = (
-	options: ScreenTransitionConfig,
-): ScreenTransitionOptions => {
-	return {
-		navigationMaskEnabled: options.navigationMaskEnabled,
-		gestureEnabled: options.gestureEnabled,
-		gestureTracking: options.gestureTracking,
-		gestureDirection: options.gestureDirection,
-		gestureSensitivity: options.gestureSensitivity,
-		gestureVelocityImpact: options.gestureVelocityImpact,
-		gestureSnapVelocityImpact: options.gestureSnapVelocityImpact,
-		gestureReleaseVelocityScale: options.gestureReleaseVelocityScale,
-		gestureSnapLocked: options.gestureSnapLocked,
-		sheetSnapBehavior: options.sheetSnapBehavior,
-		sheetScrollGestureBehavior:
-			options.sheetScrollGestureBehavior !== undefined
-				? resolveSheetScrollGestureBehavior(options)
-				: undefined,
-		backdropBehavior: options.backdropBehavior,
-	};
-};

package/src/providers/screen/animation/helpers/has-transitions-enabled.ts

@@ -1,14 +0,0 @@
-import type { ScreenTransitionConfig } from "../../../../types";
-
-/**
- * Helper for compatibility with NativeStack. Native stack integration requires
- * the `enableTransitions` prop for creating custom animations, however, blank
- * stack animations are always on.
- */
-export const hasTransitionsEnabled = (
-	options: ScreenTransitionConfig | undefined,
-	alwaysOn: boolean,
-) => {
-	if (alwaysOn) return true;
-	return !!(options as any)?.enableTransitions;
-};

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

@@ -1,192 +0,0 @@
-import { clamp } from "react-native-reanimated";
-import { DEFAULT_GESTURE_DIRECTION, EPSILON } from "../../../../../constants";
-import type {
-	GestureDirectionOption,
-	GestureValues,
-} from "../../../../../types/gesture.types";
-import type { SheetSnapBehavior } from "../../../../../types/screen.types";
-import {
-	getPanActivationDirections,
-	getPanSnapAxisConfigForDirection,
-	getPanSnapAxisDirections,
-	getPinchGestureDirections,
-	getSnapPinchDirectionConfig,
-	isResolvedPanGestureDirection,
-} from "../../../gestures/shared/directions";
-import { resolveStepSnapProgress } from "../../../gestures/shared/snap-points";
-import type { SnapBounds } from "./types";
-
-type PanProgressDelta = {
-	x: number;
-	y: number;
-};
-
-const resolvePanGestureAffectedProgress = (
-	transitionProgress: number,
-	gesture: GestureValues,
-	progressDelta: PanProgressDelta,
-	gestureDirection: GestureDirectionOption,
-	hasSnapPoints: boolean,
-	snapBounds: SnapBounds | null,
-	snapPoints: number[],
-	sheetSnapBehavior: SheetSnapBehavior,
-) => {
-	"worklet";
-
-	if (hasSnapPoints) {
-		const activeGesture =
-			gesture.initiator === "none" ? null : gesture.initiator;
-		const activeAxis = isResolvedPanGestureDirection(activeGesture)
-			? getPanSnapAxisConfigForDirection(
-					getPanSnapAxisDirections(gestureDirection),
-					activeGesture,
-				)
-			: null;
-
-		if (!activeAxis || !snapBounds) {
-			return transitionProgress;
-		}
-
-		const axisValue =
-			activeAxis.axis === "horizontal" ? progressDelta.x : progressDelta.y;
-		const signedProgressDelta = activeAxis.config.progressSign * axisValue;
-		if (sheetSnapBehavior === "step") {
-			return resolveStepSnapProgress({
-				baseline: transitionProgress,
-				normalizedDelta: signedProgressDelta,
-				snapPoints,
-			});
-		}
-
-		return clamp(
-			transitionProgress + signedProgressDelta,
-			snapBounds.min,
-			snapBounds.max,
-		);
-	}
-
-	const directions = getPanActivationDirections({
-		gestureDirection,
-		hasSnapPoints: false,
-	});
-	let progressOffset = 0;
-
-	if (directions.horizontal && progressDelta.x > 0) {
-		progressOffset = Math.max(progressOffset, progressDelta.x);
-	}
-
-	if (directions.horizontalInverted && progressDelta.x < 0) {
-		progressOffset = Math.max(progressOffset, -progressDelta.x);
-	}
-
-	if (directions.vertical && progressDelta.y > 0) {
-		progressOffset = Math.max(progressOffset, progressDelta.y);
-	}
-
-	if (directions.verticalInverted && progressDelta.y < 0) {
-		progressOffset = Math.max(progressOffset, -progressDelta.y);
-	}
-
-	return clamp(transitionProgress - progressOffset, 0, transitionProgress);
-};
-
-const resolvePinchGestureAffectedProgress = (
-	transitionProgress: number,
-	gesture: GestureValues,
-	gestureDirection: GestureDirectionOption,
-	hasSnapPoints: boolean,
-	snapBounds: SnapBounds | null,
-	snapPoints: number[],
-	sheetSnapBehavior: SheetSnapBehavior,
-) => {
-	"worklet";
-	const pinchDirection =
-		gesture.normScale < 0
-			? "pinch-in"
-			: gesture.normScale > 0
-				? "pinch-out"
-				: null;
-
-	if (!pinchDirection) {
-		return transitionProgress;
-	}
-
-	if (hasSnapPoints) {
-		const snapDirections = getSnapPinchDirectionConfig(gestureDirection);
-		if (!snapDirections || !snapBounds) {
-			return transitionProgress;
-		}
-
-		const progressDelta =
-			snapDirections.collapse === pinchDirection
-				? -Math.abs(gesture.normScale)
-				: Math.abs(gesture.normScale);
-		if (sheetSnapBehavior === "step") {
-			return resolveStepSnapProgress({
-				baseline: transitionProgress,
-				normalizedDelta: progressDelta,
-				snapPoints,
-			});
-		}
-
-		return clamp(
-			transitionProgress + progressDelta,
-			snapBounds.min,
-			snapBounds.max,
-		);
-	}
-
-	const pinchDirections = getPinchGestureDirections(gestureDirection);
-	if (!pinchDirections.includes(pinchDirection)) {
-		return transitionProgress;
-	}
-
-	return clamp(
-		transitionProgress - Math.abs(gesture.normScale),
-		0,
-		transitionProgress,
-	);
-};
-
-export const resolveGestureAffectedProgress = (
-	transitionProgress: number,
-	gesture: GestureValues,
-	panProgressDelta: PanProgressDelta,
-	gestureDirection: GestureDirectionOption | undefined,
-	snapBounds: SnapBounds | null,
-	snapPoints: number[] = [],
-	sheetSnapBehavior: SheetSnapBehavior = "continuous",
-) => {
-	"worklet";
-	const resolvedGestureDirection =
-		gestureDirection ?? DEFAULT_GESTURE_DIRECTION;
-
-	const hasSnapPoints = snapBounds !== null;
-
-	if (
-		gesture.initiator === "pinch-in" ||
-		gesture.initiator === "pinch-out" ||
-		Math.abs(gesture.normScale) > EPSILON
-	) {
-		return resolvePinchGestureAffectedProgress(
-			transitionProgress,
-			gesture,
-			resolvedGestureDirection,
-			hasSnapPoints,
-			snapBounds,
-			snapPoints,
-			sheetSnapBehavior,
-		);
-	}
-
-	return resolvePanGestureAffectedProgress(
-		transitionProgress,
-		gesture,
-		panProgressDelta,
-		resolvedGestureDirection,
-		hasSnapPoints,
-		snapBounds,
-		snapPoints,
-		sheetSnapBehavior,
-	);
-};

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

@@ -1,229 +0,0 @@
-import type {
-	ScreenTransitionOptions,
-	TransitionInterpolatorOptions,
-} from "../../../../../types/animation.types";
-import type { Layout } from "../../../../../types/screen.types";
-import { resolveGestureAffectedProgress } from "./gesture-progress";
-import {
-	computeAnimatedSnapIndex,
-	computeTargetSnapIndex,
-	getResolvedSnapBounds,
-} from "./snap-points";
-import type { BuiltState } from "./types";
-
-const mergeTransitionOptions = (
-	base: ScreenTransitionOptions,
-	effective: TransitionInterpolatorOptions | undefined,
-	slot: ScreenTransitionOptions,
-): ScreenTransitionOptions => {
-	"worklet";
-	if (!effective) {
-		return base;
-	}
-
-	slot.navigationMaskEnabled = base.navigationMaskEnabled;
-	slot.gestureEnabled = effective.gestureEnabled ?? base.gestureEnabled;
-	slot.gestureTracking = base.gestureTracking;
-	slot.gestureDirection = effective.gestureDirection ?? base.gestureDirection;
-	slot.gestureSensitivity =
-		effective.gestureSensitivity ?? base.gestureSensitivity;
-	slot.gestureVelocityImpact =
-		effective.gestureVelocityImpact ?? base.gestureVelocityImpact;
-	slot.gestureSnapVelocityImpact =
-		effective.gestureSnapVelocityImpact ?? base.gestureSnapVelocityImpact;
-	slot.gestureReleaseVelocityScale =
-		effective.gestureReleaseVelocityScale ?? base.gestureReleaseVelocityScale;
-	slot.gestureSnapLocked =
-		effective.gestureSnapLocked ?? base.gestureSnapLocked;
-	slot.sheetSnapBehavior =
-		effective.sheetSnapBehavior ?? base.sheetSnapBehavior;
-	slot.sheetScrollGestureBehavior =
-		effective.sheetScrollGestureBehavior ?? base.sheetScrollGestureBehavior;
-	slot.backdropBehavior = effective.backdropBehavior ?? base.backdropBehavior;
-
-	return slot;
-};
-
-export const hydrateTransitionState = (
-	s: BuiltState,
-	dimensions: Layout,
-	effectiveOptions?: TransitionInterpolatorOptions,
-) => {
-	"worklet";
-	const out = s.unwrapped;
-	const transitionProgress = s.transitionProgress.get();
-	const options = mergeTransitionOptions(
-		s.options,
-		effectiveOptions,
-		s.optionsSlot,
-	);
-	const canDismiss = options.gestureEnabled !== false;
-	const resolvedSnapPoints = [...s.sortedNumericSnapPoints];
-	const resolvedAutoSnapPoint = s.hasAutoSnapPoint
-		? s.resolvedAutoSnapPoint.get()
-		: null;
-	if (resolvedAutoSnapPoint !== null) {
-		resolvedSnapPoints.push(resolvedAutoSnapPoint);
-	}
-	if (canDismiss) {
-		resolvedSnapPoints.push(0);
-	}
-	resolvedSnapPoints.sort((a, b) => a - b);
-	for (let index = resolvedSnapPoints.length - 1; index > 0; index--) {
-		if (resolvedSnapPoints[index] === resolvedSnapPoints[index - 1]) {
-			resolvedSnapPoints.splice(index, 1);
-		}
-	}
-	out.transitionProgress = transitionProgress;
-	out.willAnimate = s.willAnimate.get();
-	out.closing = s.closing.get();
-	out.entering = s.entering.get();
-	out.gesture.x = s.gesture.x.get();
-	out.gesture.y = s.gesture.y.get();
-	out.gesture.normX = s.gesture.normX.get();
-	out.gesture.normY = s.gesture.normY.get();
-	out.gesture.velocity = s.gesture.velocity.get();
-	out.gesture.scale = s.gesture.scale.get();
-	out.gesture.normScale = s.gesture.normScale.get();
-	out.gesture.focalX = s.gesture.focalX.get();
-	out.gesture.focalY = s.gesture.focalY.get();
-	out.gesture.pinchOriginX = s.gesture.pinchOriginX.get();
-	out.gesture.pinchOriginY = s.gesture.pinchOriginY.get();
-	out.gesture.rotation = s.gesture.rotation.get();
-	out.gesture.raw.x = s.gesture.raw.x.get();
-	out.gesture.raw.y = s.gesture.raw.y.get();
-	out.gesture.raw.normX = s.gesture.raw.normX.get();
-	out.gesture.raw.normY = s.gesture.raw.normY.get();
-	out.gesture.raw.scale = s.gesture.raw.scale.get();
-	out.gesture.raw.normScale = s.gesture.raw.normScale.get();
-	out.gesture.raw.rotation = s.gesture.raw.rotation.get();
-	out.gesture.dismissing = s.gesture.dismissing.get();
-	out.gesture.dragging = s.gesture.dragging.get();
-	out.gesture.settling = s.gesture.settling.get();
-	out.gesture.initiator = s.gesture.initiator.get() ?? "none";
-	const handoff = out.gesture.handoff;
-	const useHandoffSnapshot = out.gesture.dismissing;
-
-	handoff.x = useHandoffSnapshot
-		? s.gesture.internal.snapshot.x.get()
-		: out.gesture.x;
-	handoff.y = useHandoffSnapshot
-		? s.gesture.internal.snapshot.y.get()
-		: out.gesture.y;
-	handoff.normX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.normX.get()
-		: out.gesture.normX;
-	handoff.normY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.normY.get()
-		: out.gesture.normY;
-	handoff.velocity = useHandoffSnapshot
-		? s.gesture.internal.snapshot.velocity.get()
-		: out.gesture.velocity;
-	handoff.scale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.scale.get()
-		: out.gesture.scale;
-	handoff.normScale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.normScale.get()
-		: out.gesture.normScale;
-	handoff.focalX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.focalX.get()
-		: out.gesture.focalX;
-	handoff.focalY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.focalY.get()
-		: out.gesture.focalY;
-	handoff.pinchOriginX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.pinchOriginX.get()
-		: out.gesture.pinchOriginX;
-	handoff.pinchOriginY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.pinchOriginY.get()
-		: out.gesture.pinchOriginY;
-	handoff.rotation = useHandoffSnapshot
-		? s.gesture.internal.snapshot.rotation.get()
-		: out.gesture.rotation;
-	handoff.raw.x = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.x.get()
-		: out.gesture.raw.x;
-	handoff.raw.y = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.y.get()
-		: out.gesture.raw.y;
-	handoff.raw.normX = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.normX.get()
-		: out.gesture.raw.normX;
-	handoff.raw.normY = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.normY.get()
-		: out.gesture.raw.normY;
-	handoff.raw.scale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.scale.get()
-		: out.gesture.raw.scale;
-	handoff.raw.normScale = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.normScale.get()
-		: out.gesture.raw.normScale;
-	handoff.raw.rotation = useHandoffSnapshot
-		? s.gesture.internal.snapshot.raw.rotation.get()
-		: out.gesture.raw.rotation;
-	handoff.active = useHandoffSnapshot
-		? s.gesture.internal.snapshot.active.get()
-		: s.gesture.initiator.get();
-	out.progress = resolveGestureAffectedProgress(
-		transitionProgress,
-		out.gesture,
-		{
-			x: s.gesture.internal.progressDeltaX.get(),
-			y: s.gesture.internal.progressDeltaY.get(),
-		},
-		options.gestureDirection,
-		getResolvedSnapBounds(
-			s.sortedNumericSnapPoints,
-			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
-			canDismiss,
-		),
-		resolvedSnapPoints,
-		options.sheetSnapBehavior,
-	);
-
-	if (s.visualProgress.get() !== out.progress) {
-		s.visualProgress.set(out.progress);
-	}
-
-	out.animating = s.progressAnimating.get();
-
-	out.settled = s.progressSettled.get();
-
-	out.meta = s.meta;
-	out.options = options;
-	out.route = s.route;
-	out.layouts.screen.width = dimensions.width;
-	out.layouts.screen.height = dimensions.height;
-
-	const content = s.measuredContentLayout.get();
-
-	if (content) {
-		s.contentLayoutSlot.width = content.width;
-		s.contentLayoutSlot.height = content.height;
-		out.layouts.content = s.contentLayoutSlot;
-	} else {
-		out.layouts.content = undefined;
-	}
-
-	out.layouts.scroll = s.scrollMetadata.get() ?? undefined;
-
-	const autoSnapPoint = s.resolvedAutoSnapPoint.get();
-	const resolvedAutoSnap =
-		s.hasAutoSnapPoint && autoSnapPoint > 0 ? autoSnapPoint : null;
-
-	out.animatedSnapIndex = computeAnimatedSnapIndex(
-		out.progress,
-		s.sortedNumericSnapPoints,
-		resolvedAutoSnap,
-	);
-
-	const targetProgress = s.targetProgress.get();
-
-	out.snapIndex = computeTargetSnapIndex(
-		targetProgress,
-		s.sortedNumericSnapPoints,
-		resolvedAutoSnap,
-	);
-
-	return out;
-};