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

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

@@ -1,5 +1,7 @@
 import type { ReactNode } from "react";
 import { useMemo } from "react";
+import { useScreenTransitionsAdapterOptionalContext } from "../../../adapters/with-screen-transitions/context";
+import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import type { BaseStackDescriptor } from "../../../types/stack.types";
 import createProvider from "../../../utils/create-provider";
 import type { DescriptorDerivations } from "./helpers/derive-descriptor-derivations";
@@ -25,87 +27,96 @@ export type DescriptorDerivationsContextValue = DescriptorDerivations;
 
 interface DescriptorStoreValue<
 	TDescriptor extends BaseDescriptor = BaseDescriptor,
-> {
+> extends DescriptorsContextValue<TDescriptor> {
 	descriptors: DescriptorsContextValue<TDescriptor>;
 	derivations: DescriptorDerivationsContextValue;
+	options: TDescriptor["options"];
 }
 
-interface DescriptorsProviderProps<TDescriptor extends BaseDescriptor> {
+type DescriptorsProviderProps = {
 	children: ReactNode;
-	previous?: TDescriptor;
-	current: TDescriptor;
-	next?: TDescriptor;
-}
-
-const {
-	DescriptorsProvider: InternalDescriptorsProvider,
-	useDescriptorsStore,
-} = createProvider("Descriptors", { guarded: true })<
-	DescriptorsProviderProps<BaseDescriptor>,
-	DescriptorStoreValue<BaseDescriptor>
->(({ previous, current, next, children }) => {
-	const descriptors = useMemo(
-		() => ({ previous, current, next }),
-		[previous, current, next],
-	);
-
-	const { ancestorKeys, ancestorDestinationPairKey } = useMemo(
-		() => getAncestorKeyState(current),
-		[current],
-	);
-
-	const derivations = useMemo(
-		() =>
-			deriveDescriptorDerivations({
-				previous,
-				current,
-				next,
-				ancestorKeys,
-				ancestorDestinationPairKey,
-			}),
-		[previous, current, next, ancestorKeys, ancestorDestinationPairKey],
-	);
+	previous?: BaseDescriptor;
+	current?: BaseDescriptor;
+	next?: BaseDescriptor;
+	routeKey?: string;
+};
 
-	const value = useMemo(
-		() => ({
-			descriptors,
-			derivations,
-		}),
-		[descriptors, derivations],
-	);
+export const { DescriptorsProvider, useDescriptorsStore } = createProvider(
+	"Descriptors",
+	{ guarded: true },
+)<DescriptorsProviderProps, DescriptorStoreValue<BaseDescriptor>>(
+	({ previous, current, next, routeKey, children }) => {
+		const blankStackCurrent = useBlankStackStore((store) =>
+			routeKey ? store?.scenesByKey[routeKey]?.descriptor : undefined,
+		);
+		const blankStackPrevious = useBlankStackStore((store) =>
+			routeKey ? store?.scenesByKey[routeKey]?.previousDescriptor : undefined,
+		);
+		const blankStackNext = useBlankStackStore((store) =>
+			routeKey ? store?.scenesByKey[routeKey]?.nextDescriptor : undefined,
+		);
+		const adapterContext = useScreenTransitionsAdapterOptionalContext();
+		const adapterScene = routeKey
+			? (adapterContext?.scenesByKey?.[routeKey] ??
+				adapterContext?.scenes[
+					adapterContext.routeIndexByKey.get(routeKey) ?? -1
+				])
+			: undefined;
 
-	return {
-		value,
-		children,
-	};
-});
+		const resolvedCurrent =
+			current ?? blankStackCurrent ?? adapterScene?.descriptor;
+		const resolvedPrevious =
+			previous ?? blankStackPrevious ?? adapterScene?.previousDescriptor;
+		const resolvedNext = next ?? blankStackNext ?? adapterScene?.nextDescriptor;
 
-export function DescriptorsProvider<TDescriptor extends BaseDescriptor>({
-	children,
-	previous,
-	current,
-	next,
-}: DescriptorsProviderProps<TDescriptor>) {
-	const providerProps = {
-		previous,
-		current,
-		next,
-		children,
-	};
+		if (!resolvedCurrent) {
+			throw new Error(
+				`Descriptors scene "${routeKey ?? "unknown"}" was not found.`,
+			);
+		}
 
-	return <InternalDescriptorsProvider {...providerProps} />;
-}
+		const descriptors = useMemo(
+			() => ({
+				previous: resolvedPrevious,
+				current: resolvedCurrent,
+				next: resolvedNext,
+			}),
+			[resolvedPrevious, resolvedCurrent, resolvedNext],
+		);
 
-export function useDescriptors<
-	TDescriptor extends BaseDescriptor = BaseDescriptor,
->() {
-	return useDescriptorsStore(
-		(store) => store.descriptors,
-	) as DescriptorsContextValue<TDescriptor>;
-}
+		const { ancestorKeys, ancestorDestinationPairKey } = useMemo(
+			() => getAncestorKeyState(resolvedCurrent),
+			[resolvedCurrent],
+		);
 
-export function useDescriptorDerivations(): DescriptorDerivationsContextValue {
-	return useDescriptorsStore((store) => store.derivations);
-}
+		const derivations = useMemo(
+			() =>
+				deriveDescriptorDerivations({
+					previous: resolvedPrevious,
+					current: resolvedCurrent,
+					next: resolvedNext,
+					ancestorKeys,
+					ancestorDestinationPairKey,
+				}),
+			[
+				resolvedPrevious,
+				resolvedCurrent,
+				resolvedNext,
+				ancestorKeys,
+				ancestorDestinationPairKey,
+			],
+		);
 
-export { useDescriptorsStore };
+		return {
+			value: {
+				previous: resolvedPrevious,
+				current: resolvedCurrent,
+				next: resolvedNext,
+				descriptors,
+				derivations,
+				options: resolvedCurrent.options,
+			},
+			children,
+		};
+	},
+);

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

@@ -1,7 +1,5 @@
 export {
 	type BaseDescriptor,
 	DescriptorsProvider,
-	useDescriptorDerivations,
-	useDescriptors,
 	useDescriptorsStore,
 } from "./descriptors.provider";

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

@@ -3,12 +3,11 @@ import { Gesture } from "react-native-gesture-handler";
 import { useSharedValue } from "react-native-reanimated";
 import { ScrollStore } from "../../../stores/scroll.store";
 import createProvider from "../../../utils/create-provider";
-import { useDescriptorDerivations } from "../descriptors";
+import { useDescriptorsStore } from "../descriptors";
 import { useScreenGestureConfig } from "./hooks/use-screen-gesture-config";
 import { useWalkUpAndRegisterShadowingClaims } from "./ownership/use-walk-up-and-register-shadowing-claims";
 import { useBuildPanGesture } from "./pan/use-build-pan-gesture";
 import { useBuildPinchGesture } from "./pinch/use-build-pinch-gesture";
-import { useBuildRotationGesture } from "./rotation/use-build-rotation-gesture";
 import {
 	type DirectionClaimMap,
 	type GestureCompositionOwner,
@@ -20,81 +19,83 @@ interface ScreenGestureProviderProps {
 	children: React.ReactNode;
 }
 
-export const {
-	ScreenGestureProvider,
-	useScreenGestureContext: useGestureContext,
-} = createProvider("ScreenGesture", { guarded: false })<
-	ScreenGestureProviderProps,
-	GestureContextType
->(({ children }): { value: GestureContextType; children: React.ReactNode } => {
-	const gestureContext = useGestureContext();
-	const gestureConfig = useScreenGestureConfig();
-	const { currentScreenKey } = useDescriptorDerivations();
+export const { ScreenGestureProvider, useScreenGestureStore: useGestureStore } =
+	createProvider("ScreenGesture", { guarded: false })<
+		ScreenGestureProviderProps,
+		GestureContextType
+	>(
+		(
+			{ children },
+			{ useParentStore },
+		): { value: GestureContextType; children: React.ReactNode } => {
+			const gestureContext = useParentStore();
+			const gestureConfig = useScreenGestureConfig();
+			const currentScreenKey = useDescriptorsStore(
+				(store) => store.derivations.currentScreenKey,
+			);
 
-	const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
+			const scrollState = ScrollStore.getValue(
+				currentScreenKey,
+				"coordination",
+			);
 
-	// Ancestors read this before activating. If a nested screen claims the same
-	// direction, it writes here so the ancestor can fail and let it take priority.
-	const childDirectionClaims =
-		useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
+			// Ancestors read this before activating. If a nested screen claims the same
+			// direction, it writes here so the ancestor can fail and let it take priority.
+			const childDirectionClaims =
+				useSharedValue<DirectionClaimMap>(NO_DIRECTION_CLAIMS);
 
-	// The first gesture to activate owns navigation release. Other gestures may
-	// still join as companion trackers during the same simultaneous composition.
-	const gestureCompositionOwner = useSharedValue<GestureCompositionOwner>(null);
+			// The first gesture to activate owns navigation release. Other gestures may
+			// still join as companion trackers during the same simultaneous composition.
+			const gestureCompositionOwner =
+				useSharedValue<GestureCompositionOwner>(null);
 
-	const panGesture = useBuildPanGesture({
-		scrollState,
-		gestureConfig,
-		childDirectionClaims,
-		gestureCompositionOwner,
-	});
+			const panGesture = useBuildPanGesture({
+				scrollState,
+				gestureConfig,
+				childDirectionClaims,
+				gestureCompositionOwner,
+			});
 
-	const pinchGesture = useBuildPinchGesture({
-		gestureConfig,
-		gestureCompositionOwner,
-	});
+			const pinchGesture = useBuildPinchGesture({
+				gestureConfig,
+				gestureCompositionOwner,
+			});
 
-	const rotationGesture = useBuildRotationGesture({
-		gestureConfig,
-		gestureCompositionOwner,
-	});
+			const detectorGesture = useMemo(
+				() => Gesture.Simultaneous(panGesture, pinchGesture),
+				[panGesture, pinchGesture],
+			);
 
-	const detectorGesture = useMemo(
-		() => Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
-		[panGesture, pinchGesture, rotationGesture],
-	);
+			const value = useMemo<GestureContextType>(
+				() => ({
+					routeKey: currentScreenKey,
+					detectorGesture,
+					panGesture,
+					pinchGesture,
+					scrollState,
+					gestureContext,
+					claimedDirections: gestureConfig.participation.claimedDirections,
+					childDirectionClaims,
+				}),
+				[
+					currentScreenKey,
+					detectorGesture,
+					panGesture,
+					pinchGesture,
+					scrollState,
+					gestureContext,
+					gestureConfig.participation.claimedDirections,
+					childDirectionClaims,
+				],
+			);
 
-	const value = useMemo<GestureContextType>(
-		() => ({
-			routeKey: currentScreenKey,
-			detectorGesture,
-			panGesture,
-			pinchGesture,
-			rotationGesture,
-			scrollState,
-			gestureContext,
-			claimedDirections: gestureConfig.participation.claimedDirections,
-			childDirectionClaims,
-		}),
-		[
-			currentScreenKey,
-			detectorGesture,
-			panGesture,
-			pinchGesture,
-			rotationGesture,
-			scrollState,
-			gestureContext,
-			gestureConfig.participation.claimedDirections,
-			childDirectionClaims,
-		],
-	);
+			useWalkUpAndRegisterShadowingClaims(
+				gestureConfig.participation.claimedDirections,
+			);
 
-	useWalkUpAndRegisterShadowingClaims(
-		gestureConfig.participation.claimedDirections,
+			return {
+				value,
+				children,
+			};
+		},
 	);
-
-	return {
-		value,
-		children,
-	};
-});

package/src/providers/screen/gestures/hooks/use-screen-gesture-config.ts

@@ -1,16 +1,15 @@
 import { useMemo } from "react";
-import { useDescriptorDerivations, useDescriptors } from "../../descriptors";
-import { useGestureContext } from "../gestures.provider";
+import { useDescriptorsStore } from "../../descriptors";
+import { useGestureStore } from "../gestures.provider";
 import { resolveScreenGestureConfig } from "../shared/policy";
 import type { ScreenGestureConfig } from "../types";
 
 export function useScreenGestureConfig(): ScreenGestureConfig {
-	const gestureContext = useGestureContext();
-	const {
-		current: { options },
-	} = useDescriptors();
-
-	const { isFirstKey } = useDescriptorDerivations();
+	const gestureContext = useGestureStore();
+	const options = useDescriptorsStore((store) => store.options);
+	const isFirstKey = useDescriptorsStore(
+		(store) => store.derivations.isFirstKey,
+	);
 
 	return useMemo(
 		() =>

package/src/providers/screen/gestures/hooks/use-screen-gesture.ts

@@ -2,7 +2,7 @@ import {
 	type ChainTarget,
 	resolveChainTarget,
 } from "../../../../utils/resolve-chain-target";
-import { useGestureContext } from "../gestures.provider";
+import { useGestureStore } from "../gestures.provider";
 import { walkGestureAncestors } from "../shared/ancestors";
 
 export type ScreenGestureTarget = ChainTarget;
@@ -21,7 +21,7 @@ export type ScreenGestureTarget = ChainTarget;
  * ```
  */
 export const useScreenGesture = (target?: ScreenGestureTarget) => {
-	const ctx = useGestureContext();
+	const ctx = useGestureStore();
 
 	return (
 		resolveChainTarget({

package/src/providers/screen/gestures/hooks/use-stable-runtime-config.ts

@@ -3,7 +3,7 @@ import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { AnimationStore } from "../../../../stores/animation.store";
 import { GestureStore } from "../../../../stores/gesture.store";
 import { SystemStore } from "../../../../stores/system.store";
-import { useDescriptorDerivations } from "../../descriptors";
+import { useDescriptorsStore } from "../../descriptors";
 import type { GesturePolicy, GestureRuntime } from "../types";
 
 type RuntimeConfigInput<TPolicy extends GesturePolicy> = Omit<
@@ -14,7 +14,9 @@ type RuntimeConfigInput<TPolicy extends GesturePolicy> = Omit<
 export function useStableRuntimeConfig<TPolicy extends GesturePolicy>(
 	runtimeConfigInput: RuntimeConfigInput<TPolicy>,
 ): SharedValue<GestureRuntime<TPolicy>> {
-	const { currentScreenKey } = useDescriptorDerivations();
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
 	const { participation, policy } = runtimeConfigInput;
 
 	const stores = useMemo(() => {

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

@@ -1,6 +1,6 @@
 export {
 	ScreenGestureProvider,
-	useGestureContext,
+	useGestureStore,
 } from "./gestures.provider";
 export type {
 	DirectionClaim,

package/src/providers/screen/gestures/ownership/shadowing-claims.ts

@@ -1,16 +1,15 @@
 import type { ClaimedDirections } from "../../../../types/ownership.types";
-import type { StackSceneActivity } from "../../../../types/stack.types";
 
 export const resolveShadowingClaimDirections = ({
-	currentActivity,
+	isCurrentScreenClosing,
 	currentClaimedDirections,
 	previousClaimedDirections,
 }: {
-	currentActivity: StackSceneActivity | undefined;
+	isCurrentScreenClosing: boolean;
 	currentClaimedDirections: ClaimedDirections;
 	previousClaimedDirections: ClaimedDirections;
 }): ClaimedDirections => {
-	if (currentActivity === "closing") {
+	if (isCurrentScreenClosing) {
 		return previousClaimedDirections;
 	}
 

package/src/providers/screen/gestures/ownership/use-walk-up-and-register-shadowing-claims.ts

@@ -8,10 +8,10 @@ import {
 } from "../../../../types/ownership.types";
 import {
 	type BaseDescriptor,
-	useDescriptorDerivations,
-	useDescriptors,
+	useDescriptorsStore,
 } from "../../../screen/descriptors";
-import { useGestureContext } from "../gestures.provider";
+import { useBlankStackStore } from "../../../stack/blank-stack.provider";
+import { useGestureStore } from "../gestures.provider";
 import { walkGestureAncestors } from "../shared/ancestors";
 import { resolveScreenGestureConfig } from "../shared/policy";
 import type { GestureContextType } from "../types";
@@ -135,9 +135,17 @@ const getDescriptorClaimedDirections = (
 export function useWalkUpAndRegisterShadowingClaims(
 	claimedDirections: ClaimedDirections,
 ): void {
-	const parentContext = useGestureContext();
-	const { current, previous } = useDescriptors();
-	const { isTopMostScreen, currentScreenKey } = useDescriptorDerivations();
+	const parentContext = useGestureStore();
+	const previous = useDescriptorsStore((store) => store.previous);
+	const isTopMostScreen = useDescriptorsStore(
+		(store) => store.derivations.isTopMostScreen,
+	);
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const isCurrentScreenClosing = useBlankStackStore(
+		(store) => store?.scenesByKey[currentScreenKey]?.activity === "closing",
+	);
 
 	/*
 	 * We want to calculate effective claimed directions as claimedDirections is not enough for us.
@@ -161,14 +169,14 @@ export function useWalkUpAndRegisterShadowingClaims(
 	const effectiveClaimedDirections = useMemo(
 		() =>
 			resolveShadowingClaimDirections({
-				currentActivity: current.activity,
+				isCurrentScreenClosing,
 				currentClaimedDirections: claimedDirections,
 				previousClaimedDirections: getDescriptorClaimedDirections(
 					previous,
 					parentContext,
 				),
 			}),
-		[current.activity, claimedDirections, previous, parentContext],
+		[isCurrentScreenClosing, claimedDirections, previous, parentContext],
 	);
 
 	const shadowedAncestors = useMemo(

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

@@ -7,7 +7,7 @@ import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import { GestureStore } from "../../../../../stores/gesture.store";
 import { GestureActivationState } from "../../../../../types/gesture.types";
 import type { Direction } from "../../../../../types/ownership.types";
-import { useDescriptorDerivations } from "../../../descriptors";
+import { useDescriptorsStore } from "../../../descriptors";
 import type { ScreenOptionsContextValue } from "../../../options";
 import { resolvePanRuntime } from "../../shared/runtime";
 import type {
@@ -36,7 +36,12 @@ export const usePanActivation = ({
 	dimensions,
 	gestureCompositionOwner,
 }: UsePanActivationProps) => {
-	const { currentScreenKey, parentScreenKey } = useDescriptorDerivations();
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+	const parentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.parentScreenKey,
+	);
 
 	const ancestorDismissing = useMemo(() => {
 		if (!parentScreenKey) return null;

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

@@ -1,8 +1,8 @@
 import { clamp, type SharedValue } 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 {
 	normalizeGestureTranslation,
 	resolveGestureVelocity,
@@ -30,16 +30,7 @@ export const startPanBase = (runtime: PanGestureRuntime) => {
 		stores: { gestures, animations },
 	} = runtime;
 
-	const wasSettling = gestures.settling.get();
-	const hasResidualGesture =
-		Math.abs(gestures.normX.get()) > EPSILON ||
-		Math.abs(gestures.normY.get()) > EPSILON ||
-		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);
@@ -134,6 +125,9 @@ export const finalizePanRelease = (
 		system.targetProgress.set(plan.commitProgress);
 	}
 
+	const progressAlreadyAtTarget =
+		Math.abs(animations.transitionProgress.get() - plan.target) <= EPSILON;
+
 	if (canDriveRelease && plan.shouldDismiss) {
 		snapshotGestureHandoff(gestures, {
 			velocity: plan.handoffVelocity,
@@ -143,6 +137,8 @@ export const finalizePanRelease = (
 	resetPanGestureValues({
 		plan,
 		gestures,
+		animations,
+		completeMotion: !plan.shouldDismiss && progressAlreadyAtTarget,
 		updateLifecycle: canDriveRelease,
 	});
 
@@ -150,12 +146,8 @@ export const finalizePanRelease = (
 		return;
 	}
 
-	const progressAlreadyAtTarget =
-		Math.abs(animations.transitionProgress.get() - plan.target) <= EPSILON;
-
 	if (!plan.shouldDismiss && progressAlreadyAtTarget) {
 		system.targetProgress.set(plan.target);
-		animations.progressAnimating.set(FALSE);
 		return;
 	}
 
@@ -170,6 +162,7 @@ export const finalizePanRelease = (
 		emitWillAnimate: false,
 		markEntering: false,
 		targetProgress: system.targetProgress,
+		animationProgress: system.animationProgress,
 		animations,
 		initialVelocity: plan.progressVelocity,
 	});

package/src/providers/screen/gestures/pan/behavior/pan-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 { animateMany } from "../../shared/reset";
 import {
@@ -10,12 +11,16 @@ import type { PanReleasePlan } from "../../types";
 interface ResetPanGestureValuesProps {
 	plan: PanReleasePlan;
 	gestures: GestureStoreMap;
+	animations?: AnimationStoreMap;
+	completeMotion?: boolean;
 	updateLifecycle?: boolean;
 }
 
 export const resetPanGestureValues = ({
 	plan,
 	gestures,
+	animations,
+	completeMotion = false,
 	updateLifecycle = true,
 }: ResetPanGestureValuesProps) => {
 	"worklet";
@@ -28,8 +33,17 @@ export const resetPanGestureValues = ({
 		gestures.active.set(null);
 		gestures.direction.set(null);
 		gestures.settling.set(FALSE);
+		if (completeMotion) {
+			animations?.progressAnimating.set(FALSE);
+			animations?.progressSettled.set(TRUE);
+		}
 	};
 
+	if (animations && updateLifecycle && !plan.shouldDismiss) {
+		animations.progressAnimating.set(TRUE);
+		animations.progressSettled.set(FALSE);
+	}
+
 	clearRawPanValues(gestures);
 
 	if (updateLifecycle) {

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

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 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 {
 	DirectionClaimMap,
@@ -29,7 +29,7 @@ export const useBuildPanGesture = ({
 }: UseBuildPanGestureProps): PanGesture => {
 	const dimensions = useWindowDimensions();
 	const { participation, pan: policy } = gestureConfig;
-	const screenOptions = useScreenOptionsContext();
+	const screenOptions = useScreenOptionsStore();
 
 	const runtime = useStableRuntimeConfig({
 		participation,