react-native-screen-transitions 3.0.0-beta.0 → 3.0.0-beta.10

package/src/blank-stack/providers/blank-stack-state.tsx

@@ -0,0 +1,90 @@
+import type { NavigationRoute, ParamListBase } from "@react-navigation/native";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useDerivedValue } from "react-native-reanimated";
+import { useSharedValueState } from "../../shared/hooks/use-shared-value-state";
+import createProvider from "../../shared/providers/utils/create-provider";
+import { AnimationStore } from "../../shared/stores/animation-store";
+import { useStackNavigationContext } from "../utils/with-stack-navigation";
+
+interface BlankStackStateProviderProps {
+	children: React.ReactNode;
+}
+
+type BlankStackStateProviderContext = {
+	parentIndex: number;
+	parentRoutes: NavigationRoute<ParamListBase, string>[];
+	index: number;
+	routes: NavigationRoute<ParamListBase, string>[];
+};
+
+const {
+	useBlankStackStateContext: useBlankStackState,
+	BlankStackStateProvider,
+} = createProvider("BlankStackState", { guarded: false })<
+	BlankStackStateProviderProps,
+	BlankStackStateProviderContext
+>(() => {
+	const { focusedIndex, routes: stackRoutes } = useStackNavigationContext();
+	const [index, setIndex] = useState(0);
+	const [routes, setRoutes] = useState<
+		NavigationRoute<ParamListBase, string>[]
+	>([]);
+
+	const progressValues = useMemo(
+		() => stackRoutes.map((route) => AnimationStore.getAll(route.key)),
+		[stackRoutes],
+	);
+
+	const parentIndex = useDerivedValue(() => {
+		"worklet";
+
+		const activeIndex = progressValues.length - 1;
+		const isOneDismissing = Number(
+			progressValues.some((value) => value.closing.value > 0),
+		);
+
+		const optimisticIndex = activeIndex - isOneDismissing;
+
+		return optimisticIndex;
+	}, [focusedIndex, progressValues]);
+
+	const parentIndexValue = useSharedValueState(parentIndex);
+
+	const _registerNested = useCallback(
+		(
+			nestedIndex: number,
+			nestedRoutes: NavigationRoute<ParamListBase, string>[],
+		) => {
+			if (nestedIndex !== index) {
+				setIndex(nestedIndex);
+			}
+			if (nestedRoutes.length !== routes.length) {
+				setRoutes(nestedRoutes);
+			}
+		},
+		[routes.length, index],
+	);
+
+	const context = useBlankStackState();
+
+	useEffect(() => {
+		//@ts-expect-error Internally used
+		if (context?._registerNested) {
+			//@ts-expect-error Internally used
+			context._registerNested(parentIndexValue, stackRoutes);
+		}
+		//@ts-expect-error Internally used
+	}, [parentIndexValue, context?._registerNested, stackRoutes]);
+
+	return {
+		value: {
+			parentIndex: parentIndexValue,
+			parentRoutes: stackRoutes,
+			index,
+			routes,
+			_registerNested,
+		},
+	};
+});
+
+export { useBlankStackState, BlankStackStateProvider };

package/src/blank-stack/types.ts

@@ -16,6 +16,7 @@ import type { EdgeInsets } from "react-native-safe-area-context";
 import type { ScreenProps } from "react-native-screens";
 import type {
 	OverlayInterpolationProps,
+	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	TransitionSpec,
 } from "../shared/types/animation";
@@ -106,6 +107,10 @@ export type BlankStackOverlayProps = {
 	 * Route object for the current screen.
 	 */
 	route: Route<string>;
+	/**
+	 * Route object for the currently focused screen in the stack.
+	 */
+	focusedRoute: Route<string>;
 	/**
 	 * Navigation prop for the overlay.
 	 */
@@ -115,9 +120,13 @@ export type BlankStackOverlayProps = {
 	 */
 	insets: EdgeInsets;
 	/**
-	 * Accumulated progress across the stack for the overlay owner and subsequent screens.
+	 * Animation values for the overlay.
+	 */
+	overlayAnimation: DerivedValue<OverlayInterpolationProps>;
+	/**
+	 * Animation values for the screen.
 	 */
-	animation: DerivedValue<OverlayInterpolationProps>;
+	screenAnimation: DerivedValue<ScreenInterpolationProps>;
 	/**
 	 * Index of the active route
 	 */

package/src/native-stack/views/NativeStackView.native.tsx

@@ -513,11 +513,13 @@ export function NativeStackView({
 			return acc;
 		}, {});
 
+	const routes = state.routes.concat(state.preloadedRoutes);
+
 	return (
 		<GestureHandlerRootView>
 			<SafeAreaProviderCompat>
 				<ScreenStack style={styles.container}>
-					{state.routes.concat(state.preloadedRoutes).map((route, index) => {
+					{routes.map((route, index) => {
 						const descriptor =
 							descriptors[route.key] ?? preloadedDescriptors[route.key];
 						const isFocused = state.index === index;

package/src/shared/components/controllers/screen-lifecycle.tsx

@@ -4,10 +4,11 @@ import type { BlankStackDescriptor } from "../../../blank-stack/types";
 import { useStackNavigationContext } from "../../../blank-stack/utils/with-stack-navigation";
 import type { NativeStackDescriptor } from "../../../native-stack/types";
 import { useParentGestureRegistry } from "../../hooks/gestures/use-parent-gesture-registry";
+import { useDerivedValueState } from "../../hooks/use-derived-value-state";
 import useStableCallback from "../../hooks/use-stable-callback";
+import { useGestureContext } from "../../providers/gestures";
 import { useKeys } from "../../providers/keys";
 import { AnimationStore } from "../../stores/animation-store";
-import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
 import { resetStoresForScreen } from "../../stores/utils/reset-stores-for-screen";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 
@@ -22,19 +23,22 @@ export const NativeStackScreenLifecycleController = ({
 	children,
 }: ScreenLifecycleProps) => {
 	const { current } = useKeys<NativeStackDescriptor>();
+	const { parentContext } = useGestureContext();
+
+	const isParentDismissingViaGesture = useDerivedValueState(() => {
+		"worklet";
+		return parentContext?.gestureAnimationValues.isDismissing?.value ?? false;
+	});
 
 	const animations = AnimationStore.getAll(current.route.key);
 
 	const handleBeforeRemove = useStableCallback((e: any) => {
-		const key = current.navigation.getParent()?.getState().key;
-		const requestedDismissOnNavigator = NavigatorDismissState.get(key);
-
 		const isEnabled = current.options.enableTransitions;
-		const isRequestedDismissOnNavigator = requestedDismissOnNavigator;
+
 		const isFirstScreen = current.navigation.getState().index === 0;
 
 		// If transitions are disabled, or the dismissal was on the local root, or this is the first screen of the stack, reset the stores
-		if (!isEnabled || isRequestedDismissOnNavigator || isFirstScreen) {
+		if (!isEnabled || isParentDismissingViaGesture || isFirstScreen) {
 			resetStoresForScreen(current);
 			return;
 		}
@@ -105,6 +109,10 @@ export const BlankStackScreenLifecycleController = ({
 		});
 	});
 
+	const handleCleanup = useStableCallback(() => {
+		resetStoresForScreen(current);
+	});
+
 	const handleCloseEnd = useStableCallback((finished: boolean) => {
 		if (!finished) {
 			return;
@@ -130,7 +138,12 @@ export const BlankStackScreenLifecycleController = ({
 		},
 	);
 
-	useLayoutEffect(handleInitialize);
+	useLayoutEffect(() => {
+		handleInitialize();
+		return () => {
+			handleCleanup();
+		};
+	}, [handleInitialize, handleCleanup]);
 
 	// important for t.a scrollviews inside nested navigators.
 	useParentGestureRegistry();

package/src/shared/hooks/animation/use-screen-animation.tsx

@@ -9,6 +9,7 @@ import {
 	NO_BOUNDS_MAP,
 } from "../../constants";
 import { type TransitionDescriptor, useKeys } from "../../providers/keys";
+
 import { AnimationStore } from "../../stores/animation-store";
 import { BoundStore } from "../../stores/bound-store";
 import { GestureStore, type GestureStoreMap } from "../../stores/gesture-store";
@@ -121,7 +122,6 @@ export function _useScreenAnimation() {
 			focused,
 			activeBoundId,
 			progress,
-
 			active,
 			isActiveTransitioning,
 			isDismissing,

package/src/shared/hooks/bounds/use-bound-registry.tsx

@@ -1,4 +1,11 @@
-import { createContext, Fragment, useContext, useMemo } from "react";
+import {
+	createContext,
+	Fragment,
+	useContext,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+} from "react";
 import type { View } from "react-native";
 import {
 	type AnimatedRef,
@@ -132,6 +139,30 @@ export const useBoundsRegistry = ({
 		);
 	}, [IS_ROOT, sharedBoundTag, ROOT_SIGNAL]);
 
+	const prevNextRef = useRef(next);
+	/**
+	 * Measure non-pressable elements when the screen goes from focused to blurred
+	 * (or when a new `next` descriptor appears) so we capture final bounds
+	 * right before the transition starts.
+	 */
+	useLayoutEffect(() => {
+		if (!sharedBoundTag || onPress) return;
+
+		const hadNext = !!prevNextRef.current;
+		const hasNext = !!next;
+
+		if (!hadNext && hasNext) {
+			runOnUI(maybeMeasureAndStore)({});
+		}
+
+		prevNextRef.current = next;
+	}, [next, sharedBoundTag, onPress, maybeMeasureAndStore]);
+
+	/**
+	 * Signal child shared elements (nested under this provider) to refresh their
+	 * measurements when the root updates, while preventing them from marking
+	 * themselves active during that sync.
+	 */
 	useAnimatedReaction(
 		() => ROOT_MEASUREMENT_SIGNAL?.updateSignal.value,
 		(current) => {

package/src/shared/hooks/gestures/use-build-gestures.tsx

@@ -1,4 +1,5 @@
-import { useMemo } from "react";
+import { StackActions } from "@react-navigation/native";
+import { useCallback, useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
 	Gesture,
@@ -9,11 +10,7 @@ import {
 	type PanGestureHandlerEventPayload,
 } from "react-native-gesture-handler";
 import type { GestureStateManagerType } from "react-native-gesture-handler/lib/typescript/handlers/gestures/gestureStateManager";
-import {
-	runOnJS,
-	type SharedValue,
-	useSharedValue,
-} from "react-native-reanimated";
+import { type SharedValue, useSharedValue } from "react-native-reanimated";
 import {
 	DEFAULT_GESTURE_ACTIVATION_AREA,
 	DEFAULT_GESTURE_DIRECTION,
@@ -21,11 +18,14 @@ import {
 	DEFAULT_GESTURE_ENABLED,
 	GESTURE_VELOCITY_IMPACT,
 } from "../../constants";
-import type { ScrollConfig } from "../../providers/gestures";
+import type {
+	GestureContextType,
+	ScrollConfig,
+} from "../../providers/gestures";
 import { useKeys } from "../../providers/keys";
 import { AnimationStore } from "../../stores/animation-store";
-import { GestureStore } from "../../stores/gesture-store";
-import { NavigatorDismissState } from "../../stores/navigator-dismiss-state";
+import { GestureStore, type GestureStoreMap } from "../../stores/gesture-store";
+
 import { type GestureDirection, GestureOffsetState } from "../../types/gesture";
 import { startScreenTransition } from "../../utils/animation/start-screen-transition";
 import { applyOffsetRules } from "../../utils/gesture/check-gesture-activation";
@@ -33,18 +33,20 @@ import { determineDismissal } from "../../utils/gesture/determine-dismissal";
 import { mapGestureToProgress } from "../../utils/gesture/map-gesture-to-progress";
 import { resetGestureValues } from "../../utils/gesture/reset-gesture-values";
 import { velocity } from "../../utils/gesture/velocity";
-import useStableCallback from "../use-stable-callback";
 import useStableCallbackValue from "../use-stable-callback-value";
 
 interface BuildGesturesHookProps {
 	scrollConfig: SharedValue<ScrollConfig | null>;
+	parentContext?: GestureContextType | null;
 }
 
 export const useBuildGestures = ({
 	scrollConfig,
+	parentContext,
 }: BuildGesturesHookProps): {
 	panGesture: GestureType;
 	nativeGesture: GestureType;
+	gestureAnimationValues: GestureStoreMap;
 } => {
 	const dimensions = useWindowDimensions();
 	const { current } = useKeys();
@@ -58,7 +60,9 @@ export const useBuildGestures = ({
 		GestureOffsetState.PENDING,
 	);
 
-	const gestures = GestureStore.getRouteGestures(current.route.key);
+	const gestureAnimationValues = GestureStore.getRouteGestures(
+		current.route.key,
+	);
 	const animations = AnimationStore.getAll(current.route.key);
 
 	const {
@@ -87,17 +91,29 @@ export const useBuildGestures = ({
 		};
 	}, [gestureDirection]);
 
-	const setNavigatorDismissal = useStableCallback(() => {
-		const key = current.navigation.getState().key;
+	const handleDismiss = useCallback(() => {
+		// If an ancestor navigator is already dismissing, skip this dismiss to
+		// avoid racing with the parent
+		if (parentContext?.gestureAnimationValues.isDismissing?.value) {
+			return;
+		}
 
-		NavigatorDismissState.set(key, true);
-	});
+		const state = current.navigation.getState();
 
-	const handleDismiss = useStableCallback(() => {
-		const key = current.navigation.getState().key;
-		current.navigation.goBack();
-		NavigatorDismissState.remove(key);
-	});
+		const routeStillPresent = state.routes.some(
+			(route) => route.key === current.route.key,
+		);
+
+		if (!routeStillPresent) {
+			return;
+		}
+
+		current.navigation.dispatch({
+			...StackActions.pop(),
+			source: current.route.key,
+			target: state.key,
+		});
+	}, [current, parentContext]);
 
 	const onTouchesDown = useStableCallbackValue((e: GestureTouchEvent) => {
 		"worklet";
@@ -110,6 +126,13 @@ export const useBuildGestures = ({
 		(e: GestureTouchEvent, manager: GestureStateManagerType) => {
 			"worklet";
 
+			// If an ancestor navigator is already dismissing via gesture, block new gestures here.
+			if (parentContext?.gestureAnimationValues.isDismissing?.value) {
+				gestureOffsetState.value = GestureOffsetState.FAILED;
+				manager.fail();
+				return;
+			}
+
 			const touch = e.changedTouches[0];
 
 			const { isSwipingDown, isSwipingUp, isSwipingRight, isSwipingLeft } =
@@ -130,7 +153,7 @@ export const useBuildGestures = ({
 			}
 
 			// Keep pending until thresholds are met; no eager activation.
-			if (gestures.isDragging?.value) {
+			if (gestureAnimationValues.isDragging?.value) {
 				manager.activate();
 				return;
 			}
@@ -178,9 +201,9 @@ export const useBuildGestures = ({
 			if (
 				shouldActivate &&
 				gestureOffsetState.value === GestureOffsetState.PASSED &&
-				!gestures.isDismissing?.value
+				!gestureAnimationValues.isDismissing?.value
 			) {
-				gestures.direction.value = activatedDirection;
+				gestureAnimationValues.direction.value = activatedDirection;
 				manager.activate();
 				return;
 			}
@@ -189,8 +212,8 @@ export const useBuildGestures = ({
 
 	const onStart = useStableCallbackValue(() => {
 		"worklet";
-		gestures.isDragging.value = 1;
-		gestures.isDismissing.value = 0;
+		gestureAnimationValues.isDragging.value = 1;
+		gestureAnimationValues.isDismissing.value = 0;
 	});
 
 	const onUpdate = useStableCallbackValue(
@@ -202,13 +225,13 @@ export const useBuildGestures = ({
 			const { translationX, translationY } = event;
 			const { width, height } = dimensions;
 
-			gestures.x.value = translationX;
-			gestures.y.value = translationY;
-			gestures.normalizedX.value = Math.max(
+			gestureAnimationValues.x.value = translationX;
+			gestureAnimationValues.y.value = translationY;
+			gestureAnimationValues.normalizedX.value = Math.max(
 				-1,
 				Math.min(1, translationX / width),
 			);
-			gestures.normalizedY.value = Math.max(
+			gestureAnimationValues.normalizedY.value = Math.max(
 				-1,
 				Math.min(1, translationY / height),
 			);
@@ -275,16 +298,12 @@ export const useBuildGestures = ({
 
 			resetGestureValues({
 				spec,
-				gestures,
+				gestures: gestureAnimationValues,
 				shouldDismiss,
 				event,
 				dimensions,
 			});
 
-			if (shouldDismiss) {
-				runOnJS(setNavigatorDismissal)();
-			}
-
 			const initialVelocity = velocity.calculateProgressVelocity({
 				animations,
 				shouldDismiss,
@@ -319,6 +338,15 @@ export const useBuildGestures = ({
 		return {
 			panGesture,
 			nativeGesture,
+			gestureAnimationValues,
 		};
-	}, [gestureEnabled, onTouchesDown, onTouchesMove, onStart, onUpdate, onEnd]);
+	}, [
+		gestureEnabled,
+		onTouchesDown,
+		onTouchesMove,
+		onStart,
+		onUpdate,
+		onEnd,
+		gestureAnimationValues,
+	]);
 };

package/src/shared/hooks/use-derived-value-state.ts

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import {
+	executeOnUIRuntimeSync,
+	runOnJS,
+	type SharedValue,
+	useAnimatedReaction,
+	useDerivedValue,
+} from "react-native-reanimated";
+
+/**
+ * Derives React state from a Reanimated worklet.
+ *
+ * @param processor - The worklet function that calculates the value
+ * @param dependencies - Array of dependencies for the worklet
+ * @returns The derived value as React State
+ */
+export function useDerivedValueState<T>(
+	processor: () => T,
+	dependencies: any[] = [],
+): T {
+	const derivedValue = useDerivedValue(processor, dependencies);
+
+	const [state, setState] = useState<T>(() => {
+		const readOnUI = executeOnUIRuntimeSync((sv: SharedValue<T>) => {
+			"worklet";
+			return sv.value;
+		});
+		return readOnUI(derivedValue);
+	});
+
+	useAnimatedReaction(
+		() => derivedValue.value,
+		(curr, prev) => {
+			if (curr !== prev) {
+				runOnJS(setState)(curr);
+			}
+		},
+	);
+
+	return state;
+}

package/src/shared/hooks/use-stable-callback-value.tsx

@@ -4,6 +4,7 @@
  */
 import { useCallback, useEffect, useState } from "react";
 import {
+	cancelAnimation,
 	isWorkletFunction,
 	makeMutable,
 	runOnJS,
@@ -13,7 +14,15 @@ import {
 type AnyFunction = (...args: Array<any>) => any;
 
 function useMutableValue<T>(initialValue: T) {
-	return useState(() => makeMutable(initialValue))[0];
+	const [mutable] = useState(() => makeMutable(initialValue));
+
+	useEffect(() => {
+		return () => {
+			cancelAnimation(mutable);
+		};
+	}, [mutable]);
+
+	return mutable;
 }
 
 // We cannot store a function as a SharedValue because reanimated will treat

package/src/shared/index.ts

@@ -19,3 +19,11 @@ export default {
 };
 
 export { useScreenAnimation } from "./hooks/animation/use-screen-animation";
+
+export type {
+	AnimationConfig,
+	OverlayInterpolationProps,
+	ScreenInterpolationProps,
+	ScreenStyleInterpolator,
+} from "./types/animation";
+export type { ScreenTransitionConfig } from "./types/core";

package/src/shared/providers/gestures.tsx

@@ -5,6 +5,7 @@ import { GestureDetector } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
 import { useSharedValue } from "react-native-reanimated";
 import { useBuildGestures } from "../hooks/gestures/use-build-gestures";
+import type { GestureStoreMap } from "../stores/gesture-store";
 
 export type ScrollConfig = {
 	x: number;
@@ -19,34 +20,42 @@ export interface GestureContextType {
 	panGesture: GestureType;
 	nativeGesture: GestureType;
 	scrollConfig: SharedValue<ScrollConfig | null>;
+	gestureAnimationValues: GestureStoreMap;
 	parentContext: GestureContextType | null;
 }
 
-type ScreenGestureProviderProps = {
+type GestureProviderProps = {
 	children: React.ReactNode;
 };
 
 const GestureContext = createContext<GestureContextType | undefined>(undefined);
 
-export const ScreenGestureProvider = ({
-	children,
-}: ScreenGestureProviderProps) => {
+export const ScreenGestureProvider = ({ children }: GestureProviderProps) => {
 	const parentContext = useContext(GestureContext);
 
 	const scrollConfig = useSharedValue<ScrollConfig | null>(null);
 
-	const { panGesture, nativeGesture } = useBuildGestures({
-		scrollConfig,
-	});
+	const { panGesture, nativeGesture, gestureAnimationValues } =
+		useBuildGestures({
+			scrollConfig,
+			parentContext,
+		});
 
 	const value: GestureContextType = useMemo(
 		() => ({
 			panGesture,
 			scrollConfig,
 			nativeGesture,
+			gestureAnimationValues,
 			parentContext: parentContext || null,
 		}),
-		[panGesture, scrollConfig, nativeGesture, parentContext],
+		[
+			panGesture,
+			scrollConfig,
+			nativeGesture,
+			gestureAnimationValues,
+			parentContext,
+		],
 	);
 
 	return (

package/src/shared/providers/utils/create-provider.tsx

@@ -0,0 +1,77 @@
+/**
+ * THANK YOU @MatiPl01
+ * https://github.com/MatiPl01/react-native-sortables/blob/main/packages/react-native-sortables/src/providers/utils/createProvider.tsx
+ * SUPER COOL AMAZING UTILITY
+ */
+import {
+	createContext,
+	type PropsWithChildren,
+	type ReactNode,
+	useContext,
+	useMemo,
+} from "react";
+
+export default function createProvider<
+	ProviderName extends string,
+	Guarded extends boolean = true,
+>(name: ProviderName, options?: { guarded?: Guarded }) {
+	return <ProviderProps extends PropsWithChildren<object>, ContextValue>(
+		factory: (props: ProviderProps) => {
+			value?: ContextValue;
+			enabled?: boolean;
+			children?: ReactNode;
+		},
+	) => {
+		const { guarded = true } = options ?? {};
+
+		const Context = createContext<ContextValue | null>(null);
+		Context.displayName = name;
+
+		const Provider: React.FC<ProviderProps> = (props) => {
+			const {
+				children = props.children,
+				enabled = true,
+				value,
+			} = factory(props);
+
+			if (!value) {
+				throw new Error(
+					`${name}Context value must be provided. You likely forgot to return it from the factory function.`,
+				);
+			}
+
+			const memoValue = useMemo(
+				() => (enabled ? value : null),
+				[enabled, value],
+			);
+
+			return <Context.Provider value={memoValue}>{children}</Context.Provider>;
+		};
+
+		const useEnhancedContext = (): ContextValue | null => {
+			const context = useContext(Context);
+
+			if (guarded && context === null) {
+				throw new Error(
+					`${name} context must be used within a ${name}Provider`,
+				);
+			}
+
+			return context;
+		};
+
+		return {
+			[`${name}Context`]: Context,
+			[`${name}Provider`]: Provider,
+			[`use${name}Context`]: useEnhancedContext,
+		} as {
+			[P in ProviderName as `${P}Context`]: React.Context<ContextValue>;
+		} & {
+			[P in ProviderName as `${P}Provider`]: React.FC<ProviderProps>;
+		} & {
+			[P in ProviderName as `use${P}Context`]: () => Guarded extends true
+				? ContextValue
+				: ContextValue | null;
+		};
+	};
+}