react-native-screen-transitions 4.0.0-alpha.1 → 4.0.0-alpha.3

package/src/providers/screen/gestures/pinch/activation/use-pinch-activation.ts

@@ -3,7 +3,7 @@ import type {
 	GestureStateManager,
 	GestureTouchEvent,
 } from "react-native-gesture-handler";
-import type { SharedValue } from "react-native-reanimated";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePinchRuntime } from "../../shared/runtime";
@@ -34,6 +34,48 @@ export const updateAbsolutePinchFocalPoint = (
 	}
 };
 
+export const updatePinchRotation = (
+	event: GestureTouchEvent,
+	gestures: GestureStoreMap,
+	lastAngle: SharedValue<number>,
+	accumulatedRotation: SharedValue<number>,
+	captureOrigin: boolean,
+) => {
+	"worklet";
+	const firstTouch = event.allTouches[0];
+	const secondTouch = event.allTouches[1];
+
+	if (!firstTouch || !secondTouch) {
+		return;
+	}
+
+	const angle = Math.atan2(
+		secondTouch.absoluteY - firstTouch.absoluteY,
+		secondTouch.absoluteX - firstTouch.absoluteX,
+	);
+
+	if (captureOrigin) {
+		lastAngle.set(angle);
+		accumulatedRotation.set(0);
+		gestures.rotation.set(0);
+		gestures.raw.rotation.set(0);
+		return;
+	}
+
+	let angleDelta = angle - lastAngle.get();
+	if (angleDelta > Math.PI) {
+		angleDelta -= 2 * Math.PI;
+	} else if (angleDelta < -Math.PI) {
+		angleDelta += 2 * Math.PI;
+	}
+
+	const rotation = accumulatedRotation.get() + angleDelta;
+	lastAngle.set(angle);
+	accumulatedRotation.set(rotation);
+	gestures.rotation.set(rotation);
+	gestures.raw.rotation.set(rotation);
+};
+
 interface UsePinchActivationProps {
 	runtime: SharedValue<PinchGestureRuntime>;
 	screenOptions: ScreenOptionsContextValue;
@@ -45,6 +87,9 @@ export const usePinchActivation = ({
 	screenOptions,
 	gestureCompositionOwner,
 }: UsePinchActivationProps) => {
+	const lastAngle = useSharedValue(0);
+	const accumulatedRotation = useSharedValue(0);
+
 	const onTouchesDown = useCallback(
 		(
 			event: GestureTouchEvent,
@@ -68,6 +113,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					true,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					true,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -79,7 +131,13 @@ export const usePinchActivation = ({
 				stateManager?.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	const onTouchesMove = useCallback(
@@ -102,6 +160,13 @@ export const usePinchActivation = ({
 					latestRuntime.stores.gestures,
 					false,
 				);
+				updatePinchRotation(
+					event,
+					latestRuntime.stores.gestures,
+					lastAngle,
+					accumulatedRotation,
+					false,
+				);
 				if (gestureCompositionOwner.get() === null) {
 					gestureCompositionOwner.set("pinch");
 				}
@@ -113,7 +178,13 @@ export const usePinchActivation = ({
 				stateManager.fail();
 			}
 		},
-		[runtime, screenOptions, gestureCompositionOwner],
+		[
+			runtime,
+			screenOptions,
+			gestureCompositionOwner,
+			lastAngle,
+			accumulatedRotation,
+		],
 	);
 
 	return useMemo(

package/src/providers/screen/gestures/pinch/behavior/pinch-lifecycle.ts

@@ -1,8 +1,8 @@
 import { clamp } from "react-native-reanimated";
 import { scheduleOnRN } from "react-native-worklets";
-import { EPSILON, FALSE, TRUE } from "../../../../../constants";
+import { EPSILON, TRUE } from "../../../../../constants";
+import { emitMotionStart } from "../../../../../stores/animation.store";
 import { animateToProgress } from "../../../../../utils/animation/animate-to-progress";
-import { emit } from "../../../../../utils/animation/emit";
 import { normalizePinchScale } from "../../shared/physics";
 import { snapshotGestureHandoff } from "../../shared/snapshot";
 import { clearTransformTrackingValues } from "../../shared/values";
@@ -20,15 +20,7 @@ export const startPinchBase = (runtime: PinchGestureRuntime) => {
 		stores: { gestures, animations },
 	} = runtime;
 
-	const wasSettling = gestures.settling.get();
-	const hasResidualGesture =
-		Math.abs(gestures.normScale.get()) > EPSILON ||
-		Math.abs(gestures.rotation.get()) > EPSILON;
-
-	if (!wasSettling || !hasResidualGesture) {
-		emit(animations.willAnimate, TRUE, FALSE);
-	}
-
+	emitMotionStart(animations);
 	gestures.dragging.set(TRUE);
 	gestures.dismissing.set(0);
 	gestures.settling.set(0);
@@ -83,6 +75,9 @@ export const finalizePinchRelease = (
 		system.targetProgress.set(release.commitProgress);
 	}
 
+	const progressAlreadyAtTarget =
+		Math.abs(animations.transitionProgress.get() - release.target) <= EPSILON;
+
 	if (release.shouldDismiss) {
 		snapshotGestureHandoff(gestures, {
 			velocity: release.handoffVelocity,
@@ -92,6 +87,7 @@ export const finalizePinchRelease = (
 	resetPinchGestureValues({
 		spec: release.resetSpec,
 		gestures,
+		animations,
 		shouldDismiss: release.shouldDismiss,
 		resetValuesImmediately: release.resetValuesImmediately,
 	});
@@ -100,6 +96,11 @@ export const finalizePinchRelease = (
 		scheduleOnRN(requestDismiss);
 	}
 
+	if (!release.shouldDismiss && progressAlreadyAtTarget) {
+		system.targetProgress.set(release.target);
+		return;
+	}
+
 	animateToProgress({
 		target: release.target,
 		onAnimationFinish: release.shouldDismiss ? dismissScreen : undefined,
@@ -108,6 +109,7 @@ export const finalizePinchRelease = (
 		markEntering: false,
 		animations,
 		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
 		initialVelocity: release.initialVelocity,
 	});
 };

package/src/providers/screen/gestures/pinch/behavior/pinch-release.ts

@@ -95,7 +95,7 @@ export const resolvePinchRelease = (
 	const {
 		participation,
 		policy,
-		stores: { animations },
+		stores: { animations, system },
 	} = runtime;
 	const normalizedScale = clamp(normalizePinchScale(event.scale), -1, 1);
 	const currentProgress = animations.transitionProgress.get();
@@ -106,9 +106,7 @@ export const resolvePinchRelease = (
 			policy.pinchInEnabled,
 			policy.pinchOutEnabled,
 		);
-	const target = shouldDismiss
-		? 0
-		: runtime.stores.gestures.internal.progressBaseline.get();
+	const target = shouldDismiss ? 0 : system.targetProgress.get();
 	const progressVelocity = getPinchReleaseHandoffVelocity(event.velocity);
 	const handoffVelocity = getPinchReleaseHandoffVelocity(
 		event.velocity,

package/src/providers/screen/gestures/pinch/behavior/pinch-reset.ts

@@ -1,4 +1,5 @@
 import { FALSE, TRUE } from "../../../../../constants";
+import type { AnimationStoreMap } from "../../../../../stores/animation.store";
 import type { GestureStoreMap } from "../../../../../stores/gesture.store";
 import type { AnimationConfig } from "../../../../../types/animation.types";
 import { animateMany } from "../../shared/reset";
@@ -11,6 +12,7 @@ import {
 interface ResetPinchGestureValuesProps {
 	spec?: AnimationConfig;
 	gestures: GestureStoreMap;
+	animations?: AnimationStoreMap;
 	shouldDismiss: boolean;
 	resetValuesImmediately?: boolean;
 }
@@ -18,6 +20,7 @@ interface ResetPinchGestureValuesProps {
 export const resetPinchGestureValues = ({
 	spec,
 	gestures,
+	animations,
 	shouldDismiss,
 	resetValuesImmediately = false,
 }: ResetPinchGestureValuesProps) => {
@@ -32,8 +35,15 @@ export const resetPinchGestureValues = ({
 		gestures.active.set(null);
 		gestures.direction.set(null);
 		gestures.settling.set(FALSE);
+		animations?.progressAnimating.set(FALSE);
+		animations?.progressSettled.set(TRUE);
 	};
 
+	if (animations && !shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
 	clearRawTransformValues(gestures);
 
 	gestures.dragging.set(FALSE);

package/src/providers/screen/gestures/pinch/use-build-pinch-gesture.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import { Gesture } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import { useScreenOptionsContext } from "../../options";
+import { useScreenOptionsStore } from "../../options";
 import { useStableRuntimeConfig } from "../hooks/use-stable-runtime-config";
 import type {
 	GestureCompositionOwner,
@@ -21,7 +21,7 @@ export const useBuildPinchGesture = ({
 	gestureCompositionOwner,
 }: UseBuildPinchGestureProps): PinchGesture => {
 	const { participation, pinch: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
+	const screenOptions = useScreenOptionsStore();
 
 	const runtime = useStableRuntimeConfig({
 		participation,

package/src/providers/screen/gestures/scroll-coordination/scroll-metadata-owner.tsx

@@ -16,19 +16,19 @@ const DEFAULT_SCROLL_METADATA_OWNER_CONTEXT: ScrollMetadataOwnerContextValue = {
 
 const {
 	ScrollMetadataOwnerProvider,
-	useScrollMetadataOwnerContext: useMaybeScrollMetadataOwnerContext,
+	useScrollMetadataOwnerStore: useMaybeScrollMetadataOwnerStore,
 } = createProvider("ScrollMetadataOwner", { guarded: false })<
 	ScrollMetadataOwnerProviderProps,
 	ScrollMetadataOwnerContextValue
 >(({ children, value }) => ({ children, value }));
 
-export const useScrollMetadataOwnerContext = () =>
-	useMaybeScrollMetadataOwnerContext() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
+export const useScrollMetadataOwnerStore = () =>
+	useMaybeScrollMetadataOwnerStore() ?? DEFAULT_SCROLL_METADATA_OWNER_CONTEXT;
 
 export const useScrollMetadataOwnerProviderValue = (
 	axis: ScrollGestureAxis,
 ) => {
-	const parent = useScrollMetadataOwnerContext();
+	const parent = useScrollMetadataOwnerStore();
 
 	return useMemo(() => {
 		if (parent[axis]) return parent;

package/src/providers/screen/gestures/scroll-coordination/use-scroll-gesture-coordination.ts

@@ -10,7 +10,7 @@ import { useSharedValueState } from "../../../../hooks/reanimated/use-shared-val
 import useStableCallback from "../../../../hooks/use-stable-callback";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { ScrollStore } from "../../../../stores/scroll.store";
-import { useGestureContext } from "../gestures.provider";
+import { useGestureStore } from "../gestures.provider";
 import type {
 	ScrollGestureAxis,
 	ScrollGestureAxisState,
@@ -18,8 +18,8 @@ import type {
 	ScrollMetadataState,
 } from "../types";
 import {
-	useScrollMetadataOwnerContext,
 	useScrollMetadataOwnerProviderValue,
+	useScrollMetadataOwnerStore,
 } from "./scroll-metadata-owner";
 import {
 	clearScrollMetadataAxisState,
@@ -88,10 +88,10 @@ const clearScrollMetadataAxis = (
 export const useScrollGestureCoordination = (
 	props: ScrollGestureCoordinationProps,
 ) => {
-	const context = useGestureContext();
+	const context = useGestureStore();
 	const scrollDirection = props.direction ?? "vertical";
 
-	const metadataOwnerContext = useScrollMetadataOwnerContext();
+	const metadataOwnerContext = useScrollMetadataOwnerStore();
 	const metadataOwnerProviderValue =
 		useScrollMetadataOwnerProviderValue(scrollDirection);
 	const isFirstMetadataWriterInTree = !metadataOwnerContext[scrollDirection];

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

@@ -4,7 +4,6 @@ import type {
 	GestureUpdateEvent,
 	PanGestureHandlerEventPayload,
 	PinchGestureHandlerEventPayload,
-	RotationGestureHandlerEventPayload,
 } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import type { AnimationStoreMap } from "../../../stores/animation.store";
@@ -33,7 +32,6 @@ import type { EffectiveSnapPointsResult } from "./shared/snap-points";
 
 export type PanGesture = ReturnType<typeof Gesture.Pan>;
 export type PinchGesture = ReturnType<typeof Gesture.Pinch>;
-export type RotationGesture = ReturnType<typeof Gesture.Rotation>;
 export type ComposedGesture = ReturnType<typeof Gesture.Simultaneous>;
 
 export type PanGestureEvent =
@@ -44,10 +42,6 @@ export type PinchGestureEvent =
 	| GestureUpdateEvent<PinchGestureHandlerEventPayload>
 	| GestureStateChangeEvent<PinchGestureHandlerEventPayload>;
 
-export type RotationGestureEvent =
-	| GestureUpdateEvent<RotationGestureHandlerEventPayload>
-	| GestureStateChangeEvent<RotationGestureHandlerEventPayload>;
-
 /** Gesture that owns navigation release for the current simultaneous composition. */
 export type GestureCompositionOwner = "pan" | "pinch" | null;
 
@@ -82,7 +76,6 @@ export interface GestureContextType {
 	detectorGesture: ComposedGesture;
 	panGesture: PanGesture;
 	pinchGesture: PinchGesture;
-	rotationGesture: RotationGesture;
 	scrollState: SharedValue<ScrollGestureState | null>;
 	gestureContext: GestureContextType | null;
 	claimedDirections: ClaimedDirections;
@@ -156,8 +149,6 @@ export type PanGestureRuntime = GestureRuntime<PanGesturePolicy>;
 
 export type PinchGestureRuntime = GestureRuntime<PinchGesturePolicy>;
 
-export type RotationGestureRuntime = GestureRuntime<PinchGesturePolicy>;
-
 export interface GestureDimensions {
 	width: number;
 	height: number;
@@ -221,8 +212,3 @@ export interface PinchBehavior {
 	onUpdate: (event: PinchGestureEvent) => void;
 	onEnd: (event: PinchGestureEvent) => void;
 }
-
-export interface RotationBehavior {
-	onStart: () => void;
-	onUpdate: (event: RotationGestureEvent) => void;
-}

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

@@ -1,6 +1,6 @@
 export { syncScreenOptionsOverrides } from "./helpers";
 export {
 	ScreenOptionsProvider,
-	useScreenOptionsContext,
+	useScreenOptionsStore,
 } from "./options.provider";
 export type { ScreenOptionsContextValue, ScreenOptionsSnapshot } from "./types";

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

@@ -1,7 +1,7 @@
 import { useLayoutEffect, useMemo } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import createProvider from "../../../utils/create-provider";
-import { useDescriptors } from "../descriptors";
+import { useDescriptorsStore } from "../descriptors";
 import { resolveBaseScreenOptions, syncScreenOptionsBase } from "./helpers";
 import type {
 	ScreenOptionsContextValue,
@@ -9,35 +9,31 @@ import type {
 	ScreenOptionsState,
 } from "./types";
 
-export const { ScreenOptionsProvider, useScreenOptionsContext } =
-	createProvider("ScreenOptions")<
-		ScreenOptionsProviderProps,
-		ScreenOptionsContextValue
-	>(() => {
-		const {
-			current: { options },
-		} = useDescriptors();
+export const { ScreenOptionsProvider, useScreenOptionsStore } = createProvider(
+	"ScreenOptions",
+)<ScreenOptionsProviderProps, ScreenOptionsContextValue>(() => {
+	const options = useDescriptorsStore((store) => store.options);
 
-		const baseScreenOptions = useMemo(
-			() => resolveBaseScreenOptions(options),
-			[options],
-		);
+	const baseScreenOptions = useMemo(
+		() => resolveBaseScreenOptions(options),
+		[options],
+	);
 
-		const initialScreenOptions = useMemo<ScreenOptionsState>(
-			() => ({
-				...baseScreenOptions,
-				baseOptions: baseScreenOptions,
-			}),
-			[baseScreenOptions],
-		);
+	const initialScreenOptions = useMemo<ScreenOptionsState>(
+		() => ({
+			...baseScreenOptions,
+			baseOptions: baseScreenOptions,
+		}),
+		[baseScreenOptions],
+	);
 
-		const value = useSharedValue(initialScreenOptions);
+	const value = useSharedValue(initialScreenOptions);
 
-		useLayoutEffect(() => {
-			syncScreenOptionsBase(value, baseScreenOptions);
-		}, [value, baseScreenOptions]);
+	useLayoutEffect(() => {
+		syncScreenOptionsBase(value, baseScreenOptions);
+	}, [value, baseScreenOptions]);
 
-		return {
-			value,
-		};
-	});
+	return {
+		value,
+	};
+});

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

@@ -9,8 +9,9 @@ import { ScreenSlotProvider } from "./styles";
 
 type Props<TDescriptor extends BaseDescriptor> = {
 	previous?: TDescriptor;
-	current: TDescriptor;
+	current?: TDescriptor;
 	next?: TDescriptor;
+	routeKey?: string;
 	children: React.ReactNode;
 };
 
@@ -18,10 +19,16 @@ export function ScreenComposer<TDescriptor extends BaseDescriptor>({
 	previous,
 	current,
 	next,
+	routeKey,
 	children,
 }: Props<TDescriptor>) {
 	return (
-		<DescriptorsProvider previous={previous} current={current} next={next}>
+		<DescriptorsProvider
+			previous={previous}
+			current={current}
+			next={next}
+			routeKey={routeKey}
+		>
 			<ScreenLifecycle>
 				<ScreenOptionsProvider>
 					<ScreenGestureProvider>

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

@@ -64,7 +64,7 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 	pointerEvents: "auto",
 };
 
-const LOCAL_ONLY_STYLE_SLOT_IDS = {
+const RESERVED_STYLE_SLOT_IDS = {
 	content: true,
 	backdrop: true,
 	surface: true,
@@ -72,11 +72,13 @@ const LOCAL_ONLY_STYLE_SLOT_IDS = {
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]: true,
 } as const;
 
-export const shouldSlotInherit = (slotId: string) => {
+export const isReservedStyleSlot = (slotId: string) => {
 	"worklet";
 	// biome-ignore lint/suspicious/noPrototypeBuiltins: <proj issue>
-	return !Object.prototype.hasOwnProperty.call(
-		LOCAL_ONLY_STYLE_SLOT_IDS,
-		slotId,
-	);
+	return Object.prototype.hasOwnProperty.call(RESERVED_STYLE_SLOT_IDS, slotId);
+};
+
+export const shouldSlotInherit = (slotId: string) => {
+	"worklet";
+	return !isReservedStyleSlot(slotId);
 };

package/src/providers/screen/styles/helpers/resolve-interpolator-style-handoff.ts

@@ -0,0 +1,138 @@
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	NormalizedTransitionSlotStyle,
+} from "../../../../types/animation.types";
+import type { LocalStyleLayers } from "./resolve-slot-styles";
+
+const mergeBuckets = (
+	frozen: Record<string, unknown> | undefined,
+	live: Record<string, unknown> | undefined,
+	composeTransforms: boolean,
+) => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	if (!live) {
+		return frozen;
+	}
+
+	const merged: Record<string, unknown> = { ...frozen };
+
+	for (const key in live) {
+		const liveValue = live[key];
+
+		if (liveValue === undefined || liveValue === null) {
+			continue;
+		}
+
+		const frozenValue = frozen[key];
+
+		if (
+			composeTransforms &&
+			key === "transform" &&
+			Array.isArray(frozenValue) &&
+			Array.isArray(liveValue)
+		) {
+			merged[key] = [...frozenValue, ...liveValue];
+			continue;
+		}
+
+		merged[key] = liveValue;
+	}
+
+	return merged;
+};
+
+const mergeSlots = (
+	frozen: NormalizedTransitionSlotStyle | undefined,
+	live: NormalizedTransitionSlotStyle,
+): NormalizedTransitionSlotStyle => {
+	"worklet";
+
+	if (!frozen) {
+		return live;
+	}
+
+	const merged: NormalizedTransitionSlotStyle = {};
+	const style = mergeBuckets(
+		frozen.style as Record<string, unknown> | undefined,
+		live.style as Record<string, unknown> | undefined,
+		true,
+	);
+
+	if (style) {
+		merged.style = style;
+	}
+
+	if (frozen.props || live.props) {
+		merged.props = mergeBuckets(frozen.props, live.props, false);
+	}
+
+	const boundsLocalTransform =
+		live.boundsLocalTransform ?? frozen.boundsLocalTransform;
+
+	if (boundsLocalTransform) {
+		merged.boundsLocalTransform = boundsLocalTransform;
+	}
+
+	return merged;
+};
+
+const composeFrozenAndLiveStyles = (
+	frozen: NormalizedTransitionInterpolatedStyle,
+	live: NormalizedTransitionInterpolatedStyle,
+) => {
+	"worklet";
+	const composed: NormalizedTransitionInterpolatedStyle = { ...frozen };
+
+	for (const slotId in live) {
+		const liveSlot = live[slotId];
+
+		if (liveSlot) {
+			composed[slotId] = mergeSlots(frozen[slotId], liveSlot);
+		}
+	}
+
+	return composed;
+};
+
+export const resolveInterpolatorStyleHandoff = ({
+	currentOwnsInterpolator,
+	currentStylesMap,
+	nextStylesMap,
+	frozenCurrentStylesMap,
+}: {
+	currentOwnsInterpolator: boolean;
+	currentStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	nextStylesMap: NormalizedTransitionInterpolatedStyle | undefined;
+	frozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
+}): {
+	localStylesMaps: LocalStyleLayers;
+	nextFrozenCurrentStylesMap: NormalizedTransitionInterpolatedStyle;
+} => {
+	"worklet";
+
+	if (currentOwnsInterpolator) {
+		return {
+			localStylesMaps: currentStylesMap ? [currentStylesMap] : [],
+			nextFrozenCurrentStylesMap: currentStylesMap ?? frozenCurrentStylesMap,
+		};
+	}
+
+	if (!nextStylesMap) {
+		return {
+			localStylesMaps: frozenCurrentStylesMap ? [frozenCurrentStylesMap] : [],
+			nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
+		};
+	}
+
+	return {
+		localStylesMaps: [
+			composeFrozenAndLiveStyles(frozenCurrentStylesMap, nextStylesMap),
+		],
+		nextFrozenCurrentStylesMap: frozenCurrentStylesMap,
+	};
+};