react-native-screen-transitions 4.0.0-alpha.7 → 4.0.0-alpha.9

package/src/providers/screen/gestures/shared/snap-points.ts

@@ -204,6 +204,18 @@ export const resolveRuntimeGestureSnapPoints = (
 	});
 };
 
+export const resolveRuntimeGestureSnapTargets = (
+	runtime: GestureRuntime<GesturePolicy>,
+): number[] => {
+	"worklet";
+	const { resolvedSnapPoints } = resolveRuntimeGestureSnapPoints(runtime);
+	const targets = runtime.participation.canDismiss
+		? [0, ...resolvedSnapPoints]
+		: resolvedSnapPoints;
+
+	return Array.from(new Set(targets)).sort((a, b) => a - b);
+};
+
 const findNearestSnapPoint = (
 	progress: number,
 	snapPoints: number[],
@@ -226,6 +238,81 @@ const findNearestSnapPoint = (
 	return nearest;
 };
 
+const findNearestSnapPointIndex = (
+	progress: number,
+	snapPoints: number[],
+): number => {
+	"worklet";
+	let nearestIndex = 0;
+	let smallestDistance = Math.abs(progress - (snapPoints[0] ?? progress));
+
+	for (let i = 1; i < snapPoints.length; i++) {
+		const distance = Math.abs(progress - snapPoints[i]);
+		if (distance < smallestDistance) {
+			smallestDistance = distance;
+			nearestIndex = i;
+		}
+	}
+
+	return nearestIndex;
+};
+
+interface ResolveStepSnapProps {
+	baseline: number;
+	direction: number;
+	snapPoints: number[];
+}
+
+export const resolveStepSnapTargets = ({
+	baseline,
+	direction,
+	snapPoints,
+}: ResolveStepSnapProps): number[] => {
+	"worklet";
+	if (snapPoints.length === 0) {
+		return [baseline];
+	}
+
+	const baselineIndex = findNearestSnapPointIndex(baseline, snapPoints);
+	const start = snapPoints[baselineIndex] ?? baseline;
+	const adjacentIndex = baselineIndex + Math.sign(direction);
+	const adjacent = snapPoints[adjacentIndex];
+
+	if (direction === 0 || adjacent === undefined) {
+		return [start];
+	}
+
+	return direction < 0 ? [adjacent, start] : [start, adjacent];
+};
+
+export const resolveStepSnapProgress = ({
+	baseline,
+	normalizedDelta,
+	snapPoints,
+}: Omit<ResolveStepSnapProps, "direction"> & {
+	normalizedDelta: number;
+}): number => {
+	"worklet";
+	const targets = resolveStepSnapTargets({
+		baseline,
+		direction: normalizedDelta,
+		snapPoints,
+	});
+	const target = normalizedDelta < 0 ? targets[0] : targets[targets.length - 1];
+	const localProgress = Math.min(1, Math.abs(normalizedDelta));
+
+	return baseline + (target - baseline) * localProgress;
+};
+
+export const getStepSnapProgressVelocityScale = (targets: number[]): number => {
+	"worklet";
+	if (targets.length < 2) {
+		return 0;
+	}
+
+	return Math.abs(targets[targets.length - 1] - targets[0]);
+};
+
 export const primeRuntimeSnapPoint = (
 	runtime: GestureRuntime<GesturePolicy>,
 ) => {

package/src/providers/screen/gestures/shared/snapshot.ts

@@ -30,6 +30,5 @@ export const snapshotGestureHandoff = (
 	snapshot.raw.scale.set(gestures.raw.scale.get());
 	snapshot.raw.normScale.set(gestures.raw.normScale.get());
 	snapshot.raw.rotation.set(gestures.raw.rotation.get());
-	snapshot.active.set(gestures.active.get());
-	snapshot.direction.set(gestures.direction.get());
+	snapshot.active.set(gestures.initiator.get());
 };

package/src/providers/screen/gestures/types.ts

@@ -71,22 +71,23 @@ export const NO_DIRECTION_CLAIMS: DirectionClaimMap = {
 	"horizontal-inverted": null,
 };
 
-export interface GestureContextType {
+export interface ScreenGestureSource {
 	routeKey: string;
 	detectorGesture: ComposedGesture;
 	panGesture: PanGesture;
 	pinchGesture: PinchGesture;
 	scrollState: SharedValue<ScrollGestureState | null>;
-	gestureContext: GestureContextType | null;
 	claimedDirections: ClaimedDirections;
 	childDirectionClaims: SharedValue<DirectionClaimMap>;
 }
 
+export interface GestureContextType extends ScreenGestureSource {
+	ancestorGestures: readonly ScreenGestureSource[];
+}
+
 export interface ScreenGestureParticipation {
 	/** Whether this route is the first route in its stack. First routes never track gestures. */
 	isFirstKey: boolean;
-	/** Whether React Navigation currently blocks removal of this route. */
-	isRemovePrevented: boolean;
 	/** Whether this route can dismiss to progress 0 from a gesture release. */
 	canDismiss: boolean;
 	/** Whether recognizers can activate to expose gesture values to interpolators. */
@@ -113,10 +114,10 @@ export interface PanGesturePolicy {
 	gestureReleaseVelocityScale: number;
 	gestureActivationArea: ResolvedGestureActivationArea;
 	gestureSnapLocked: boolean;
+	sheetSnapBehavior: NonNullable<ScreenTransitionConfig["sheetSnapBehavior"]>;
 	sheetScrollGestureBehavior: NonNullable<
 		ScreenTransitionConfig["sheetScrollGestureBehavior"]
 	>;
-	gestureResponseDistance: ScreenTransitionConfig["gestureResponseDistance"];
 	transitionSpec: TransitionSpec | undefined;
 }
 
@@ -129,6 +130,7 @@ export interface PinchGesturePolicy {
 	gestureSensitivity: NonNullable<ScreenTransitionConfig["gestureSensitivity"]>;
 	gestureSnapVelocityImpact: number;
 	gestureSnapLocked: boolean;
+	sheetSnapBehavior: NonNullable<ScreenTransitionConfig["sheetSnapBehavior"]>;
 	gestureReleaseVelocityScale: number;
 	transitionSpec: TransitionSpec | undefined;
 }

package/src/providers/screen/options/helpers.ts

@@ -1,5 +1,4 @@
 import {
-	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
 	DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 	DEFAULT_GESTURE_SENSITIVITY,
@@ -8,10 +7,9 @@ import {
 	DEFAULT_GESTURE_TRACKING,
 	DEFAULT_GESTURE_VELOCITY_IMPACT,
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
+	DEFAULT_SHEET_SNAP_BEHAVIOR,
 } from "../../../constants";
 import type {
-	ActivationArea,
-	GestureActivationArea,
 	GestureDirection,
 	GestureDirectionActivationArea,
 	GestureDirectionEntry,
@@ -122,31 +120,6 @@ const resolveGestureDirectionOption = (
 	return fallback;
 };
 
-const isActivationArea = (value: unknown): value is ActivationArea => {
-	"worklet";
-	return value === "edge" || value === "screen";
-};
-
-const resolveGestureActivationAreaOption = (
-	value: unknown,
-	fallback: RequiredScreenOption<"gestureActivationArea">,
-): RequiredScreenOption<"gestureActivationArea"> => {
-	"worklet";
-	if (isActivationArea(value)) {
-		return value;
-	}
-	if (typeof value === "object" && value !== null && !Array.isArray(value)) {
-		const area = value as Record<string, unknown>;
-		const isValid =
-			(area.left === undefined || isActivationArea(area.left)) &&
-			(area.right === undefined || isActivationArea(area.right)) &&
-			(area.top === undefined || isActivationArea(area.top)) &&
-			(area.bottom === undefined || isActivationArea(area.bottom));
-		return isValid ? (area as GestureActivationArea) : fallback;
-	}
-	return fallback;
-};
-
 const resolveSheetScrollGestureBehaviorOption = (
 	value: unknown,
 	fallback: RequiredScreenOption<"sheetScrollGestureBehavior">,
@@ -157,6 +130,14 @@ const resolveSheetScrollGestureBehaviorOption = (
 		: fallback;
 };
 
+const resolveSheetSnapBehaviorOption = (
+	value: unknown,
+	fallback: RequiredScreenOption<"sheetSnapBehavior">,
+): RequiredScreenOption<"sheetSnapBehavior"> => {
+	"worklet";
+	return value === "continuous" || value === "step" ? value : fallback;
+};
+
 const resolveGestureTrackingOption = (
 	value: unknown,
 	fallback: RequiredScreenOption<"gestureTracking">,
@@ -180,30 +161,6 @@ const resolveBackdropBehaviorOption = (
 		: fallback;
 };
 
-const areGestureActivationAreasEqual = (
-	left: RequiredScreenOption<"gestureActivationArea">,
-	right: RequiredScreenOption<"gestureActivationArea">,
-) => {
-	"worklet";
-	if (left === right) return true;
-
-	if (
-		typeof left !== "object" ||
-		left === null ||
-		typeof right !== "object" ||
-		right === null
-	) {
-		return false;
-	}
-
-	return (
-		left.left === right.left &&
-		left.right === right.right &&
-		left.top === right.top &&
-		left.bottom === right.bottom
-	);
-};
-
 const areGestureDirectionEntriesEqual = (
 	left: GestureDirectionEntry,
 	right: GestureDirectionEntry,
@@ -256,12 +213,8 @@ const areScreenOptionsEqual = (
 		left.gestureVelocityImpact === right.gestureVelocityImpact &&
 		left.gestureSnapVelocityImpact === right.gestureSnapVelocityImpact &&
 		left.gestureReleaseVelocityScale === right.gestureReleaseVelocityScale &&
-		left.gestureResponseDistance === right.gestureResponseDistance &&
-		areGestureActivationAreasEqual(
-			left.gestureActivationArea,
-			right.gestureActivationArea,
-		) &&
 		left.gestureSnapLocked === right.gestureSnapLocked &&
+		left.sheetSnapBehavior === right.sheetSnapBehavior &&
 		left.sheetScrollGestureBehavior === right.sheetScrollGestureBehavior &&
 		left.backdropBehavior === right.backdropBehavior &&
 		left.transitionSpec === right.transitionSpec &&
@@ -302,18 +255,14 @@ export const resolveBaseScreenOptions = (
 			options.gestureReleaseVelocityScale,
 			DEFAULT_GESTURE_RELEASE_VELOCITY_SCALE,
 		),
-		gestureResponseDistance: resolveNumberOption(
-			options.gestureResponseDistance,
-			undefined,
-		),
-		gestureActivationArea: resolveGestureActivationAreaOption(
-			options.gestureActivationArea,
-			DEFAULT_GESTURE_ACTIVATION_AREA,
-		),
 		gestureSnapLocked: resolveBooleanOption(
 			options.gestureSnapLocked,
 			DEFAULT_GESTURE_SNAP_LOCKED,
 		),
+		sheetSnapBehavior: resolveSheetSnapBehaviorOption(
+			options.sheetSnapBehavior,
+			DEFAULT_SHEET_SNAP_BEHAVIOR,
+		),
 		sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
 			resolveSheetScrollGestureBehavior(options),
 			DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
@@ -376,18 +325,14 @@ export const syncScreenOptionsOverrides = (
 			options?.gestureReleaseVelocityScale,
 			base.gestureReleaseVelocityScale,
 		),
-		gestureResponseDistance: resolveNumberOption(
-			options?.gestureResponseDistance,
-			base.gestureResponseDistance,
-		),
-		gestureActivationArea: resolveGestureActivationAreaOption(
-			options?.gestureActivationArea,
-			base.gestureActivationArea,
-		),
 		gestureSnapLocked: resolveBooleanOption(
 			options?.gestureSnapLocked,
 			base.gestureSnapLocked,
 		),
+		sheetSnapBehavior: resolveSheetSnapBehaviorOption(
+			options?.sheetSnapBehavior,
+			base.sheetSnapBehavior,
+		),
 		sheetScrollGestureBehavior: resolveSheetScrollGestureBehaviorOption(
 			options?.sheetScrollGestureBehavior,
 			base.sheetScrollGestureBehavior,

package/src/providers/screen/options/types.ts

@@ -17,9 +17,8 @@ export type ScreenOptionsSnapshot = {
 	gestureVelocityImpact: RequiredScreenOption<"gestureVelocityImpact">;
 	gestureSnapVelocityImpact: RequiredScreenOption<"gestureSnapVelocityImpact">;
 	gestureReleaseVelocityScale: RequiredScreenOption<"gestureReleaseVelocityScale">;
-	gestureResponseDistance: OptionalScreenOption<"gestureResponseDistance">;
-	gestureActivationArea: RequiredScreenOption<"gestureActivationArea">;
 	gestureSnapLocked: RequiredScreenOption<"gestureSnapLocked">;
+	sheetSnapBehavior: RequiredScreenOption<"sheetSnapBehavior">;
 	sheetScrollGestureBehavior: RequiredScreenOption<"sheetScrollGestureBehavior">;
 	backdropBehavior: OptionalScreenOption<"backdropBehavior">;
 	transitionSpec: OptionalScreenOption<"transitionSpec">;

package/src/providers/screen/screen-composer.tsx

@@ -7,21 +7,21 @@ import { ScreenGestureProvider } from "./gestures";
 import { ScreenOptionsProvider } from "./options";
 import { ScreenSlotProvider } from "./styles";
 
-type Props<TDescriptor extends BaseDescriptor> = {
-	previous?: TDescriptor;
-	current?: TDescriptor;
-	next?: TDescriptor;
+type Props = {
+	previous?: BaseDescriptor;
+	current?: BaseDescriptor;
+	next?: BaseDescriptor;
 	routeKey?: string;
 	children: React.ReactNode;
 };
 
-export function ScreenComposer<TDescriptor extends BaseDescriptor>({
+export function ScreenComposer({
 	previous,
 	current,
 	next,
 	routeKey,
 	children,
-}: Props<TDescriptor>) {
+}: Props) {
 	return (
 		<DescriptorsProvider
 			previous={previous}

package/src/providers/screen/styles/constants.ts

@@ -65,9 +65,9 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 };
 
 const RESERVED_STYLE_SLOT_IDS = {
+	overlay: true,
 	content: true,
 	backdrop: true,
-	surface: true,
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]: true,
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
 } as const;

package/src/providers/screen/styles/helpers/select-interpolator-frame.ts

@@ -2,13 +2,7 @@ import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
 
 export type SelectedInterpolatorFrame = Pick<
 	ScreenInterpolatorFrame,
-	| "progress"
-	| "transitionProgress"
-	| "next"
-	| "focused"
-	| "active"
-	| "inactive"
-	| "logicallySettled"
+	"progress" | "transitionProgress" | "next" | "focused" | "active" | "inactive"
 >;
 
 export const selectInterpolatorFrame = (
@@ -25,7 +19,6 @@ export const selectInterpolatorFrame = (
 			focused: frame.focused,
 			active: frame.active,
 			inactive: frame.inactive,
-			logicallySettled: frame.logicallySettled,
 		};
 	}
 
@@ -36,6 +29,5 @@ export const selectInterpolatorFrame = (
 		focused: true,
 		active: frame.current,
 		inactive: frame.previous,
-		logicallySettled: frame.current.settled,
 	};
 };

package/src/providers/screen/styles/helpers/transition-visual-state.ts

@@ -42,3 +42,29 @@ export const hasCloseTransitionFinished = ({
 	"worklet";
 	return !!closing && animationProgress === 0;
 };
+
+export const isScreenInterpolatorReady = ({
+	hasInterpolator,
+	opening,
+	closing,
+	pendingLifecycleStartBlockCount,
+	animationProgress,
+}: {
+	hasInterpolator: boolean;
+	opening: boolean;
+	closing: number;
+	pendingLifecycleStartBlockCount: number;
+	animationProgress: number;
+}) => {
+	"worklet";
+
+	return (
+		hasInterpolator &&
+		!isOpenTransitionBlocked({
+			opening,
+			pendingLifecycleStartBlockCount,
+			animationProgress,
+		}) &&
+		!hasCloseTransitionFinished({ closing, animationProgress })
+	);
+};

package/src/providers/screen/styles/helpers/visibility-block-ownership.ts

@@ -0,0 +1,16 @@
+type VisibilityBlockOwnershipParams = {
+	localBlocked: boolean;
+	ancestorBlocked: boolean;
+};
+
+export const resolveVisibilityBlockOwnership = ({
+	localBlocked,
+	ancestorBlocked,
+}: VisibilityBlockOwnershipParams) => {
+	"worklet";
+
+	return {
+		appliesOffset: localBlocked && !ancestorBlocked,
+		effectiveBlocked: localBlocked || ancestorBlocked,
+	};
+};

package/src/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -1,14 +1,33 @@
 import { useMemo } from "react";
 import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import { useNavigationRoute } from "../../../navigation/navigation-host.provider";
 import {
 	composeSlotStyleWithLocalTransform,
 	getLocalTransformForSlotComposition,
 } from "../helpers/compose-slot-style";
-import { useScreenSlots } from "../slot.provider";
+import { useOptionalScreenSlotStore } from "../slot.provider";
+
+const useCurrentScreenSlotsMap = () => {
+	const routeKey = useNavigationRoute().key;
+	const localSlotsMap = useOptionalScreenSlotStore(
+		(store) => store?.slotsMap ?? null,
+	);
+	const keyedSlotsMap = useOptionalScreenSlotStore(
+		localSlotsMap ? null : routeKey,
+		(store) => store.slotsMap,
+	);
+	const slotsMap = localSlotsMap ?? keyedSlotsMap;
+
+	if (!slotsMap) {
+		throw new Error(`ScreenSlotStore is unavailable for route "${routeKey}"`);
+	}
+
+	return slotsMap;
+};
 
 export const useSlotStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const slot = slotId ? slotsMap.get()[slotId] : undefined;
@@ -26,7 +45,7 @@ export const useComposedSlotStyles = (
 	slotId: string | undefined,
 	style: unknown,
 ) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 	const localTransform = useMemo(
 		() => getLocalTransformForSlotComposition(style),
 		[style],
@@ -50,7 +69,7 @@ export const useComposedSlotStyles = (
  * target takes the full associated style. Yields `NO_STYLES` when neither is set.
  */
 export const useSlotStackingStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -66,7 +85,7 @@ export const useSlotStackingStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotLayoutStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -103,7 +122,7 @@ export const useSlotLayoutStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotProps = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedProps(() => {
 		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;

package/src/providers/screen/styles/hooks/use-interpolated-style-maps.tsx

@@ -40,6 +40,7 @@ import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options"
 import {
 	hasCloseTransitionFinished,
 	isOpenTransitionBlocked,
+	isScreenInterpolatorReady,
 } from "../helpers/transition-visual-state";
 import { resolveInitialDestinationStyleGate } from "../helpers/visibility-gate";
 
@@ -144,17 +145,54 @@ export const useInterpolatedStylesMap = ({
 		(s) => s.derivations.destinationPairKey,
 	);
 	const screenOptions = useScreenOptionsStore();
+	const screenInterpolatorProps = useScreenAnimationStore(
+		(store) => store.screenInterpolatorProps,
+	);
+	const selectedInterpolatorOptions = useScreenAnimationStore(
+		(store) => store.selectedInterpolatorOptions,
+	);
+	const nextInterpolator = useScreenAnimationStore(
+		(store) => store.nextInterpolator,
+	);
+	const currentInterpolator = useScreenAnimationStore(
+		(store) => store.currentInterpolator,
+	);
+	const transitionSources = useScreenAnimationStore(
+		(store) => store.transitionSources,
+	);
+	const transitionOriginIndex = useScreenAnimationStore(
+		(store) => store.transitionOriginIndex,
+	);
+	const transition = useBuildTransitionAccessor({
+		transitionSources,
+		transitionOriginIndex,
+	});
+	const hasCurrentInterpolator = !!currentInterpolator;
+	const { closing: currentClosing, entering: currentEntering } =
+		AnimationStore.getBag(currentScreenKey);
 	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-	const transition = useBuildTransitionAccessor();
-	const nextInterpolatorReady = useSharedValue(0);
+		animationProgress: currentAnimationProgress,
+		pendingLifecycleRequestKind: currentPendingLifecycleRequestKind,
+		pendingLifecycleStartBlockCount: currentPendingLifecycleStartBlockCount,
+	} = SystemStore.getBag(currentScreenKey);
+	const interpolatorReady = useDerivedValue<number>(() => {
+		"worklet";
+		const isPendingOpen =
+			currentPendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const opening = isPendingOpen || !!currentEntering.get();
+
+		return isScreenInterpolatorReady({
+			hasInterpolator: hasCurrentInterpolator,
+			opening,
+			closing: currentClosing.get(),
+			pendingLifecycleStartBlockCount:
+				currentPendingLifecycleStartBlockCount.get(),
+			animationProgress: currentAnimationProgress.get(),
+		})
+			? 1
+			: 0;
+	});
 
 	// In some cases, a user may want to use external shared values to drive animations in the interpoaltor.
 	// We can now support this by collecting those shared values and reading them here to trigger an update.
@@ -199,12 +237,7 @@ export const useInterpolatedStylesMap = ({
 
 	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
-		readScreenAnimationRevisions(
-			screenInterpolatorPropsRevision,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-			interpolatorSharedValues,
-		);
+		readScreenAnimationRevisions(transitionSources, interpolatorSharedValues);
 		const props = screenInterpolatorProps.get();
 
 		const { current, next } = props;
@@ -249,10 +282,6 @@ export const useInterpolatedStylesMap = ({
 			!nextInterpolator ||
 			isOpeningBlocked ||
 			hasCloseFinished;
-		const nextReady = currentOwnsInterpolator ? 0 : 1;
-
-		nextInterpolatorReady.set(nextReady);
-
 		const interpolatorOptionsOwner = currentOwnsInterpolator
 			? "current"
 			: "next";
@@ -328,7 +357,7 @@ export const useInterpolatedStylesMap = ({
 	});
 
 	return {
+		interpolatorReady,
 		localStylesMaps,
-		nextInterpolatorReady,
 	};
 };