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

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

@@ -1,10 +1,4 @@
-import {
-	type ReactNode,
-	useCallback,
-	useContext,
-	useLayoutEffect,
-	useMemo,
-} from "react";
+import { type ReactNode, useCallback, useLayoutEffect, useMemo } from "react";
 import { useSharedValue } from "react-native-reanimated";
 import { createBoundsAccessor } from "../../../utils/bounds";
 import createProvider from "../../../utils/create-provider";
@@ -34,178 +28,181 @@ export type ScreenAnimationContextResult = {
 	value: ScreenAnimationContextValue;
 };
 
-export const {
-	ScreenAnimationProvider,
-	ScreenAnimationContext,
-	useScreenAnimationContext,
-} = createProvider("ScreenAnimation", {
-	guarded: true,
-})<Props, ScreenAnimationContextValue>((): ScreenAnimationContextResult => {
-	const parentContext = useContext(ScreenAnimationContext);
-	const parentScreenInterpolatorProps = parentContext?.screenInterpolatorProps;
-	const parentScreenInterpolatorPropsRevision =
-		parentContext?.screenInterpolatorPropsRevision;
-	const parentAncestorScreenAnimationSources =
-		parentContext?.ancestorScreenAnimationSources;
-	const parentRegisterDescendantScreenAnimationSource =
-		parentContext?.registerDescendantScreenAnimationSource;
-	const parentAncestorDescendantScreenAnimationRegistrars =
-		parentContext?.ancestorDescendantScreenAnimationRegistrars;
-
-	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-	} = useScreenAnimationPipeline();
-
-	const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
-		() => ({
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-		}),
-		[screenInterpolatorProps, screenInterpolatorPropsRevision],
-	);
-
-	const selfScreenAnimationTransitionSource =
-		useMemo<ScreenAnimationTransitionSource>(
-			() => ({
-				...selfScreenAnimationSource,
-				boundsAccessor: createBoundsAccessor(() => {
-					"worklet";
-					return selfScreenAnimationSource.screenInterpolatorProps.get();
+export const { ScreenAnimationProvider, useScreenAnimationStore } =
+	createProvider("ScreenAnimation", {
+		guarded: true,
+	})<Props, ScreenAnimationContextValue>(
+		(_props, { useParentStore }): ScreenAnimationContextResult => {
+			const parentContext = useParentStore();
+			const parentScreenInterpolatorProps =
+				parentContext?.screenInterpolatorProps;
+			const parentScreenInterpolatorPropsRevision =
+				parentContext?.screenInterpolatorPropsRevision;
+			const parentAncestorScreenAnimationSources =
+				parentContext?.ancestorScreenAnimationSources;
+			const parentRegisterDescendantScreenAnimationSource =
+				parentContext?.registerDescendantScreenAnimationSource;
+			const parentAncestorDescendantScreenAnimationRegistrars =
+				parentContext?.ancestorDescendantScreenAnimationRegistrars;
+
+			const {
+				screenInterpolatorProps,
+				screenInterpolatorPropsRevision,
+				selectedInterpolatorOptions,
+				nextInterpolator,
+				currentInterpolator,
+			} = useScreenAnimationPipeline();
+
+			const selfScreenAnimationSource = useMemo<ScreenAnimationSource>(
+				() => ({
+					screenInterpolatorProps,
+					screenInterpolatorPropsRevision,
 				}),
-			}),
-			[selfScreenAnimationSource],
-		);
-
-	const descendantScreenAnimationSources = useSharedValue<
-		ScreenAnimationDescendantSources["value"]
-	>([]);
-
-	const registerDescendantScreenAnimationSource =
-		useCallback<RegisterScreenAnimationDescendant>(
-			(source, depth) => {
-				descendantScreenAnimationSources.modify(
-					<T extends ScreenAnimationDescendantSources["value"]>(
-						currentSources: T,
-					): T => {
-						"worklet";
-						const existingIndex = currentSources.findIndex(
-							(currentSource) => currentSource.source === source,
+				[screenInterpolatorProps, screenInterpolatorPropsRevision],
+			);
+
+			const selfScreenAnimationTransitionSource =
+				useMemo<ScreenAnimationTransitionSource>(
+					() => ({
+						...selfScreenAnimationSource,
+						boundsAccessor: createBoundsAccessor(() => {
+							"worklet";
+							return selfScreenAnimationSource.screenInterpolatorProps.get();
+						}),
+					}),
+					[selfScreenAnimationSource],
+				);
+
+			const descendantScreenAnimationSources = useSharedValue<
+				ScreenAnimationDescendantSources["value"]
+			>([]);
+
+			const registerDescendantScreenAnimationSource =
+				useCallback<RegisterScreenAnimationDescendant>(
+					(source, depth) => {
+						descendantScreenAnimationSources.modify(
+							<T extends ScreenAnimationDescendantSources["value"]>(
+								currentSources: T,
+							): T => {
+								"worklet";
+								const existingIndex = currentSources.findIndex(
+									(currentSource) => currentSource.source === source,
+								);
+
+								if (
+									existingIndex !== -1 &&
+									currentSources[existingIndex]?.depth === depth
+								) {
+									return currentSources;
+								}
+
+								const nextSources =
+									existingIndex === -1
+										? [...currentSources, { source, depth }]
+										: currentSources.map((currentSource, index) =>
+												index === existingIndex
+													? { source, depth }
+													: currentSource,
+											);
+
+								return nextSources.sort((a, b) => a.depth - b.depth) as T;
+							},
 						);
 
-						if (
-							existingIndex !== -1 &&
-							currentSources[existingIndex]?.depth === depth
-						) {
-							return currentSources;
-						}
-
-						const nextSources =
-							existingIndex === -1
-								? [...currentSources, { source, depth }]
-								: currentSources.map((currentSource, index) =>
-										index === existingIndex ? { source, depth } : currentSource,
-									);
-
-						return nextSources.sort((a, b) => a.depth - b.depth) as T;
+						return () => {
+							descendantScreenAnimationSources.modify(
+								<T extends ScreenAnimationDescendantSources["value"]>(
+									currentSources: T,
+								): T => {
+									"worklet";
+									return currentSources.filter(
+										(currentSource) => currentSource.source !== source,
+									) as T;
+								},
+							);
+						};
+					},
+					[descendantScreenAnimationSources],
+				);
+
+			const ancestorScreenAnimationSources = useMemo(() => {
+				if (
+					!parentScreenInterpolatorProps ||
+					!parentScreenInterpolatorPropsRevision ||
+					!parentAncestorScreenAnimationSources
+				) {
+					return [];
+				}
+
+				return [
+					{
+						screenInterpolatorProps: parentScreenInterpolatorProps,
+						screenInterpolatorPropsRevision:
+							parentScreenInterpolatorPropsRevision,
+					},
+					...parentAncestorScreenAnimationSources,
+				];
+			}, [
+				parentScreenInterpolatorProps,
+				parentScreenInterpolatorPropsRevision,
+				parentAncestorScreenAnimationSources,
+			]);
+
+			const ancestorDescendantScreenAnimationRegistrars = useMemo(() => {
+				if (!parentRegisterDescendantScreenAnimationSource) {
+					return [];
+				}
+
+				// Each provider exposes its own descendant registrar and forwards ancestor
+				// registrars, letting a mounted child register with every ancestor scope.
+				return [
+					{
+						register: parentRegisterDescendantScreenAnimationSource,
+						depth: 1,
 					},
+					...(parentAncestorDescendantScreenAnimationRegistrars ?? []).map(
+						(registrar) => ({
+							register: registrar.register,
+							depth: registrar.depth + 1,
+						}),
+					),
+				];
+			}, [
+				parentRegisterDescendantScreenAnimationSource,
+				parentAncestorDescendantScreenAnimationRegistrars,
+			]);
+
+			useLayoutEffect(() => {
+				const cleanups = ancestorDescendantScreenAnimationRegistrars.map(
+					(registrar) =>
+						registrar.register(
+							selfScreenAnimationTransitionSource,
+							registrar.depth,
+						),
 				);
 
 				return () => {
-					descendantScreenAnimationSources.modify(
-						<T extends ScreenAnimationDescendantSources["value"]>(
-							currentSources: T,
-						): T => {
-							"worklet";
-							return currentSources.filter(
-								(currentSource) => currentSource.source !== source,
-							) as T;
-						},
-					);
+					for (const cleanup of cleanups) {
+						cleanup();
+					}
 				};
-			},
-			[descendantScreenAnimationSources],
-		);
-
-	const ancestorScreenAnimationSources = useMemo(() => {
-		if (
-			!parentScreenInterpolatorProps ||
-			!parentScreenInterpolatorPropsRevision ||
-			!parentAncestorScreenAnimationSources
-		) {
-			return [];
-		}
-
-		return [
-			{
-				screenInterpolatorProps: parentScreenInterpolatorProps,
-				screenInterpolatorPropsRevision: parentScreenInterpolatorPropsRevision,
-			},
-			...parentAncestorScreenAnimationSources,
-		];
-	}, [
-		parentScreenInterpolatorProps,
-		parentScreenInterpolatorPropsRevision,
-		parentAncestorScreenAnimationSources,
-	]);
-
-	const ancestorDescendantScreenAnimationRegistrars = useMemo(() => {
-		if (!parentRegisterDescendantScreenAnimationSource) {
-			return [];
-		}
-
-		// Each provider exposes its own descendant registrar and forwards ancestor
-		// registrars, letting a mounted child register with every ancestor scope.
-		return [
-			{
-				register: parentRegisterDescendantScreenAnimationSource,
-				depth: 1,
-			},
-			...(parentAncestorDescendantScreenAnimationRegistrars ?? []).map(
-				(registrar) => ({
-					register: registrar.register,
-					depth: registrar.depth + 1,
-				}),
-			),
-		];
-	}, [
-		parentRegisterDescendantScreenAnimationSource,
-		parentAncestorDescendantScreenAnimationRegistrars,
-	]);
-
-	useLayoutEffect(() => {
-		const cleanups = ancestorDescendantScreenAnimationRegistrars.map(
-			(registrar) =>
-				registrar.register(
-					selfScreenAnimationTransitionSource,
-					registrar.depth,
-				),
-		);
-
-		return () => {
-			for (const cleanup of cleanups) {
-				cleanup();
-			}
-		};
-	}, [
-		ancestorDescendantScreenAnimationRegistrars,
-		selfScreenAnimationTransitionSource,
-	]);
-
-	return {
-		value: {
-			screenInterpolatorProps,
-			screenInterpolatorPropsRevision,
-			selectedInterpolatorOptions,
-			nextInterpolator,
-			currentInterpolator,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-			registerDescendantScreenAnimationSource,
-			ancestorDescendantScreenAnimationRegistrars,
+			}, [
+				ancestorDescendantScreenAnimationRegistrars,
+				selfScreenAnimationTransitionSource,
+			]);
+
+			return {
+				value: {
+					screenInterpolatorProps,
+					screenInterpolatorPropsRevision,
+					selectedInterpolatorOptions,
+					nextInterpolator,
+					currentInterpolator,
+					ancestorScreenAnimationSources,
+					descendantScreenAnimationSources,
+					registerDescendantScreenAnimationSource,
+					ancestorDescendantScreenAnimationRegistrars,
+				},
+			};
 		},
-	};
-});
+	);

package/src/providers/screen/animation/helpers/accessors/use-build-bounds-accessor.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from "react";
 import { createBoundsAccessor } from "../../../../../utils/bounds";
-import { useScreenAnimationContext } from "../../animation.provider";
+import { useScreenAnimationStore } from "../../animation.provider";
 
 export const useBuildBoundsAccessor = () => {
-	const { screenInterpolatorProps } = useScreenAnimationContext();
+	const screenInterpolatorProps = useScreenAnimationStore(
+		(store) => store.screenInterpolatorProps,
+	);
 	return useMemo(() => {
 		return createBoundsAccessor(() => {
 			"worklet";

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

@@ -4,7 +4,7 @@ import type {
 	ScreenTransitionTarget,
 } from "../../../../../types/animation.types";
 import { createBoundsAccessor } from "../../../../../utils/bounds";
-import { useScreenAnimationContext } from "../../animation.provider";
+import { useScreenAnimationStore } from "../../animation.provider";
 import type {
 	ScreenAnimationDescendantSources,
 	ScreenAnimationSource,
@@ -124,7 +124,7 @@ export const useBuildTransitionAccessor = () => {
 		screenInterpolatorPropsRevision,
 		ancestorScreenAnimationSources,
 		descendantScreenAnimationSources,
-	} = useScreenAnimationContext();
+	} = useScreenAnimationStore();
 
 	return useMemo(() => {
 		const selfSource = {

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

@@ -1,4 +1,3 @@
-import { EPSILON } from "../../../../../constants";
 import type {
 	ScreenTransitionOptions,
 	TransitionInterpolatorOptions,
@@ -92,6 +91,7 @@ export const hydrateTransitionState = (
 	out.gesture.dragging = s.gesture.dragging.get();
 	out.gesture.settling = s.gesture.settling.get();
 	out.gesture.active = s.gesture.active.get();
+	out.gesture.initiator = out.gesture.active ?? "none";
 	out.gesture.direction = s.gesture.direction.get();
 	const handoff = out.gesture.handoff;
 	const useHandoffSnapshot = out.gesture.dismissing;
@@ -166,7 +166,7 @@ export const hydrateTransitionState = (
 			x: s.gesture.internal.progressDeltaX.get(),
 			y: s.gesture.internal.progressDeltaY.get(),
 		},
-		effectiveOptions?.gestureDirection ?? s.options.gestureDirection,
+		options.gestureDirection,
 		getResolvedSnapBounds(
 			s.sortedNumericSnapPoints,
 			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
@@ -174,35 +174,18 @@ export const hydrateTransitionState = (
 		),
 	);
 
-	// Unsure where else to place this if im being honest.
-	// I think for here is fine
 	if (s.visualProgress.get() !== out.progress) {
 		s.visualProgress.set(out.progress);
 	}
 
-	const hasResidualGestureValues =
-		Math.abs(out.gesture.normX) > EPSILON ||
-		Math.abs(out.gesture.normY) > EPSILON ||
-		Math.abs(out.gesture.normScale) > EPSILON ||
-		Math.abs(out.gesture.rotation) > EPSILON;
-
-	const isGestureActive =
-		out.gesture.dragging ||
-		out.gesture.settling ||
-		(!out.gesture.dismissing && hasResidualGestureValues)
-			? 1
-			: 0;
-
-	const isProgressAnimating = s.progressAnimating.get();
-
-	out.animating = isProgressAnimating || isGestureActive ? 1 : 0;
+	out.animating = s.progressAnimating.get();
 
 	out.gesture.normalizedX = out.gesture.normX;
 	out.gesture.normalizedY = out.gesture.normY;
 	out.gesture.isDismissing = out.gesture.dismissing;
 	out.gesture.isDragging = out.gesture.dragging;
 
-	out.settled = s.progressSettled.get() && !isGestureActive ? 1 : 0;
+	out.settled = s.progressSettled.get();
 	out.logicallySettled = out.settled;
 
 	out.meta = s.meta;

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

@@ -18,7 +18,7 @@ import type {
 	ScreenTransitionState,
 } from "../../../../types/animation.types";
 
-import { type BaseDescriptor, useDescriptors } from "../../descriptors";
+import { type BaseDescriptor, useDescriptorsStore } from "../../descriptors";
 import { buildScreenTransitionOptions } from "./build-screen-transition-options";
 import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
@@ -157,7 +157,7 @@ const createInitialInterpolatorProps = ({
 		progress: currentProgress,
 		entering: currentEntering,
 		animating: currentEntering,
-		willAnimate: currentEntering,
+		willAnimate: 0,
 	});
 	const previous = prevDescriptor
 		? createInitialTransitionState({
@@ -173,7 +173,7 @@ const createInitialInterpolatorProps = ({
 				progress: 0,
 				entering: 1,
 				animating: 1,
-				willAnimate: 1,
+				willAnimate: 0,
 				settled: 0,
 			})
 		: undefined;
@@ -280,11 +280,9 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 	const dimensions = useWindowDimensions();
 	const insets = useSafeAreaInsets();
 
-	const {
-		current: currDescriptor,
-		next: nextDescriptor,
-		previous: prevDescriptor,
-	} = useDescriptors();
+	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);
@@ -314,10 +312,8 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 		});
 
 	const propsRevisionState = useSharedValue({ value: 0 });
-
 	const screenInterpolatorPropsRevision = useDerivedValue<number>(() => {
 		"worklet";
-
 		screenInterpolatorProps.modify((frame) => {
 			"worklet";
 			const interpolatorOptions = selectedInterpolatorOptions.get();

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

@@ -1,6 +1,6 @@
 export {
 	ScreenAnimationProvider,
-	useScreenAnimationContext,
+	useScreenAnimationStore,
 } from "./animation.provider";
 export {
 	type ScreenAnimationTarget,

package/src/providers/screen/animation/use-screen-animation.tsx

@@ -3,7 +3,7 @@ import type {
 	ScreenInterpolationProps,
 	ScreenTransitionTarget,
 } from "../../../types/animation.types";
-import { useScreenAnimationContext } from "./animation.provider";
+import { useScreenAnimationStore } from "./animation.provider";
 import { useBuildTransitionAccessor } from "./helpers/accessors/use-build-transition-accessor";
 import { readScreenAnimationRevisions } from "./helpers/read-screen-animation-revisions";
 import type {
@@ -37,7 +37,7 @@ export function useScreenAnimation(
 		screenInterpolatorPropsRevision,
 		ancestorScreenAnimationSources,
 		descendantScreenAnimationSources,
-	} = useScreenAnimationContext();
+	} = useScreenAnimationStore();
 	const transition = useBuildTransitionAccessor();
 	const transitionTarget = normalizeScreenAnimationTarget(
 		target,