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

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

@@ -1,5 +1,10 @@
 import { useMemo } from "react";
-import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+import {
+	type SharedValue,
+	useAnimatedReaction,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
 import { NO_STYLES } from "../../../../constants";
 import { AnimationStore } from "../../../../stores/animation.store";
 import {
@@ -12,7 +17,7 @@ import type {
 	TransitionInterpolatedStyle,
 } from "../../../../types/animation.types";
 import { logger } from "../../../../utils/logger";
-import { useScreenAnimationContext } from "../../animation";
+import { useScreenAnimationStore } from "../../animation";
 import { useBuildBoundsAccessor } from "../../animation/helpers/accessors/use-build-bounds-accessor";
 import { useBuildTransitionAccessor } from "../../animation/helpers/accessors/use-build-transition-accessor";
 import type { ScreenInterpolatorFrame } from "../../animation/helpers/pipeline";
@@ -21,16 +26,22 @@ import { syncSelectedInterpolatorOptions } from "../../animation/helpers/selecte
 import { useDescriptorsStore } from "../../descriptors";
 import {
 	syncScreenOptionsOverrides,
-	useScreenOptionsContext,
+	useScreenOptionsStore,
 } from "../../options";
 import { collectInterpolatorSharedValues } from "../helpers/collect-interpolator-shared-values";
 import { normalizeSlots } from "../helpers/normalize-slots";
+import { resolveInterpolatorStyleHandoff } from "../helpers/resolve-interpolator-style-handoff";
 import type { LocalStyleLayers } from "../helpers/resolve-slot-styles";
+import {
+	type SelectedInterpolatorFrame,
+	selectInterpolatorFrame,
+} from "../helpers/select-interpolator-frame";
 import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options";
 import {
 	hasCloseTransitionFinished,
 	isOpenTransitionBlocked,
 } from "../helpers/transition-visual-state";
+import { resolveInitialDestinationStyleGate } from "../helpers/visibility-gate";
 
 const NO_STYLE_LAYERS: LocalStyleLayers = [];
 
@@ -42,8 +53,7 @@ type InterpolatorResult = {
 type RunInterpolatorParams = {
 	interpolator: ScreenStyleInterpolator | undefined;
 	props: ScreenInterpolatorFrame;
-	progress: ScreenInterpolatorFrame["progress"];
-	next: ScreenInterpolatorFrame["next"];
+	selectedFrame: SelectedInterpolatorFrame;
 	bounds: Parameters<ScreenStyleInterpolator>[0]["bounds"];
 	transition: Parameters<ScreenStyleInterpolator>[0]["transition"];
 };
@@ -65,8 +75,7 @@ const normalizeRawStyleMap = (
 const runInterpolator = ({
 	interpolator,
 	props,
-	progress,
-	next,
+	selectedFrame,
 	bounds,
 	transition,
 }: RunInterpolatorParams): InterpolatorResult | undefined => {
@@ -79,8 +88,7 @@ const runInterpolator = ({
 	try {
 		const raw = interpolator({
 			...props,
-			progress,
-			next,
+			...selectedFrame,
 			bounds,
 			transition,
 		});
@@ -101,17 +109,6 @@ const runInterpolator = ({
 	}
 };
 
-const appendLayer = (
-	layers: LocalStyleLayers,
-	result: InterpolatorResult | undefined,
-) => {
-	"worklet";
-
-	if (result) {
-		layers.push(result.stylesMap);
-	}
-};
-
 /**
  * Builds the raw interpolated style layers for the current screen pass.
  *
@@ -128,16 +125,26 @@ const appendLayer = (
  * normal interpolator selection once the gesture-driven close is no longer in
  * play.
  *
- * The result is ordered from lowest to highest priority. Resolution happens
- * downstream, where slot ids determine whether slots inherit from ancestors and
- * where higher owner layers override lower owner layers per key.
+ * At an ownership handoff, the last current-owner styles are frozen. The next
+ * owner replaces matching scalar keys and composes its live transforms after
+ * the frozen transforms. The previous interpolator is not evaluated again until
+ * it regains ownership.
  */
-export const useInterpolatedStylesMap = () => {
+export const useInterpolatedStylesMap = ({
+	enabled,
+	visibilityBlocked,
+}: {
+	enabled: boolean;
+	visibilityBlocked: SharedValue<boolean>;
+}) => {
 	const currentScreenKey = useDescriptorsStore(
 		(s) => s.derivations.currentScreenKey,
 	);
 	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const screenOptions = useScreenOptionsContext();
+	const destinationPairKey = useDescriptorsStore(
+		(s) => s.derivations.destinationPairKey,
+	);
+	const screenOptions = useScreenOptionsStore();
 	const {
 		screenInterpolatorProps,
 		screenInterpolatorPropsRevision,
@@ -146,7 +153,7 @@ export const useInterpolatedStylesMap = () => {
 		currentInterpolator,
 		ancestorScreenAnimationSources,
 		descendantScreenAnimationSources,
-	} = useScreenAnimationContext();
+	} = useScreenAnimationStore();
 	const boundsAccessor = useBuildBoundsAccessor();
 	const transition = useBuildTransitionAccessor();
 	const nextInterpolatorReady = useSharedValue(0);
@@ -169,6 +176,30 @@ export const useInterpolatedStylesMap = () => {
 	} = SystemStore.getBag(activeScreenKey);
 
 	const isGesturingDuringCloseAnimation = useSharedValue(false);
+	const initialDestinationStylesReady = useSharedValue(0);
+	const frozenCurrentStylesMap =
+		useSharedValue<NormalizedTransitionInterpolatedStyle>(NO_STYLES);
+	const shouldPrepareInitialDestinationStyles =
+		enabled && !!destinationPairKey && !nextScreenKey && !!currentInterpolator;
+
+	useAnimatedReaction(
+		() => {
+			"worklet";
+			return visibilityBlocked.get();
+		},
+		(isVisibilityBlocked) => {
+			"worklet";
+			const styleGate = resolveInitialDestinationStyleGate({
+				shouldPrepareStyles: shouldPrepareInitialDestinationStyles,
+				isVisibilityBlocked,
+				stylesReady: !!initialDestinationStylesReady.get(),
+			});
+
+			if (styleGate.shouldMarkStylesReady) {
+				initialDestinationStylesReady.set(1);
+			}
+		},
+	);
 
 	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
@@ -180,7 +211,7 @@ export const useInterpolatedStylesMap = () => {
 		);
 		const props = screenInterpolatorProps.get();
 
-		const { current, next, progress } = props;
+		const { current, next } = props;
 		const isDragging = current.gesture.dragging;
 		const isNextClosing = !!next?.closing;
 
@@ -230,23 +261,28 @@ export const useInterpolatedStylesMap = () => {
 			? "current"
 			: "next";
 
-		let selectedProgress = progress;
-		let selectedNext = next;
+		const selectedFrame = selectInterpolatorFrame(props, isInGestureMode);
+
+		const currentResult = currentOwnsInterpolator
+			? runInterpolator({
+					interpolator: currentInterpolator,
+					props,
+					selectedFrame,
+					bounds: boundsAccessor,
+					transition,
+				})
+			: undefined;
+
+		const initialDestinationStyleGate = resolveInitialDestinationStyleGate({
+			shouldPrepareStyles: shouldPrepareInitialDestinationStyles,
+			isVisibilityBlocked: visibilityBlocked.get(),
+			stylesReady: !!initialDestinationStylesReady.get(),
+		});
 
-		if (isInGestureMode) {
-			selectedProgress = current.progress;
-			selectedNext = undefined;
+		if (initialDestinationStyleGate.shouldWithholdStyles) {
+			return NO_STYLE_LAYERS;
 		}
 
-		const currentResult = runInterpolator({
-			interpolator: currentInterpolator,
-			props,
-			progress: selectedProgress,
-			next: selectedNext,
-			bounds: boundsAccessor,
-			transition,
-		});
-
 		if (interpolatorOptionsOwner === "current") {
 			syncSelectedInterpolatorOptions(
 				selectedInterpolatorOptions,
@@ -255,18 +291,26 @@ export const useInterpolatedStylesMap = () => {
 			);
 			syncScreenOptionsOverrides(currentResult?.rawStyleMap, screenOptions);
 
-			if (!currentResult) {
-				return NO_STYLE_LAYERS;
+			const handoff = resolveInterpolatorStyleHandoff({
+				currentOwnsInterpolator: true,
+				currentStylesMap: currentResult?.stylesMap,
+				nextStylesMap: undefined,
+				frozenCurrentStylesMap: frozenCurrentStylesMap.get(),
+			});
+
+			if (handoff.nextFrozenCurrentStylesMap !== frozenCurrentStylesMap.get()) {
+				frozenCurrentStylesMap.set(handoff.nextFrozenCurrentStylesMap);
 			}
 
-			return [currentResult.stylesMap];
+			return handoff.localStylesMaps.length
+				? handoff.localStylesMaps
+				: NO_STYLE_LAYERS;
 		}
 
 		const nextResult = runInterpolator({
 			interpolator: nextInterpolator,
 			props,
-			progress: selectedProgress,
-			next: selectedNext,
+			selectedFrame,
 			bounds: boundsAccessor,
 			transition,
 		});
@@ -278,16 +322,16 @@ export const useInterpolatedStylesMap = () => {
 		);
 		syncScreenOptionsOverrides(undefined, screenOptions);
 
-		const layers: LocalStyleLayers = [];
-
-		appendLayer(layers, currentResult);
-		appendLayer(layers, nextResult);
-
-		if (layers.length === 0) {
-			return NO_STYLE_LAYERS;
-		}
+		const handoff = resolveInterpolatorStyleHandoff({
+			currentOwnsInterpolator: false,
+			currentStylesMap: currentResult?.stylesMap,
+			nextStylesMap: nextResult?.stylesMap,
+			frozenCurrentStylesMap: frozenCurrentStylesMap.get(),
+		});
 
-		return layers;
+		return handoff.localStylesMaps.length
+			? handoff.localStylesMaps
+			: NO_STYLE_LAYERS;
 	});
 
 	return {

package/src/providers/screen/styles/hooks/use-maybe-block-visibility.tsx

@@ -8,13 +8,15 @@ import {
 import { AnimationStore } from "../../../../stores/animation.store";
 import { SystemStore } from "../../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../../utils/visibility-block-offset";
-import { useDescriptorDerivations } from "../../descriptors";
+import { useDescriptorsStore } from "../../descriptors";
 import { hasCloseTransitionFinished } from "../helpers/transition-visual-state";
 import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
 export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const { height } = useWindowDimensions();
-	const { currentScreenKey } = useDescriptorDerivations();
+	const currentScreenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
 	const { closing, entering } = AnimationStore.getBag(currentScreenKey);
 	const {
 		animationProgress,

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

@@ -7,7 +7,6 @@ export {
 } from "./hooks/slot-resolvers";
 
 export {
-	ScreenSlotContext,
 	type ScreenSlotName,
 	ScreenSlotProvider,
 	useScreenSlots,

package/src/providers/screen/styles/slot.provider.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useContext, useLayoutEffect, useMemo } from "react";
+import { type ReactNode, useLayoutEffect, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import Animated, { type SharedValue } from "react-native-reanimated";
 import type {
@@ -37,58 +37,72 @@ export type ScreenSlotContextValue = {
 	visibilityBlocked: SharedValue<boolean>;
 };
 
-export const {
-	ScreenSlotProvider,
-	ScreenSlotContext,
-	useScreenSlotContext: useScreenSlots,
-} = createProvider("ScreenSlot", {
-	guarded: true,
-})<Props, ScreenSlotContextValue>(({ children, isFloatingOverlay }) => {
-	const parentContext = useContext(ScreenSlotContext);
-	const currentScreenKey = useDescriptorsStore(
-		(s) => s.derivations.currentScreenKey,
-	);
+export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
+	createProvider("ScreenSlot", {
+		guarded: true,
+	})<Props, ScreenSlotContextValue>(
+		({ children, isFloatingOverlay }, { useParentStore }) => {
+			const parentContext = useParentStore();
+			const currentScreenKey = useDescriptorsStore(
+				(s) => s.derivations.currentScreenKey,
+			);
 
-	const { localStylesMaps, nextInterpolatorReady } = useInterpolatedStylesMap();
+			const { animatedStyle, animatedProps, shouldBlockVisibility } =
+				useMaybeBlockVisibility(isFloatingOverlay);
 
-	const slotsMap = useResolvedStylesMap({
-		localStylesMaps,
-		ancestorStylesMap: parentContext?.slotsMap,
-	});
-	const { animatedStyle, animatedProps, shouldBlockVisibility } =
-		useMaybeBlockVisibility(isFloatingOverlay);
-	const value = useMemo(
-		() => ({
-			localStylesMaps,
-			nextInterpolatorReady,
-			slotsMap,
-			visibilityBlocked: shouldBlockVisibility,
-		}),
-		[localStylesMaps, nextInterpolatorReady, shouldBlockVisibility, slotsMap],
-	);
+			const { localStylesMaps, nextInterpolatorReady } =
+				useInterpolatedStylesMap({
+					enabled: !isFloatingOverlay,
+					visibilityBlocked: shouldBlockVisibility,
+				});
 
-	useLayoutEffect(() => {
-		registerScreenSlots(currentScreenKey, value);
+			const slotsMap = useResolvedStylesMap({
+				localStylesMaps,
+				ancestorStylesMap: parentContext?.slotsMap,
+			});
+			const value = useMemo(
+				() => ({
+					localStylesMaps,
+					nextInterpolatorReady,
+					slotsMap,
+					visibilityBlocked: shouldBlockVisibility,
+				}),
+				[
+					localStylesMaps,
+					nextInterpolatorReady,
+					shouldBlockVisibility,
+					slotsMap,
+				],
+			);
 
-		return () => {
-			unregisterScreenSlots(currentScreenKey, value);
-		};
-	}, [currentScreenKey, value]);
+			useLayoutEffect(() => {
+				registerScreenSlots(currentScreenKey, value);
 
-	return {
-		value,
-		children: (
-			<FloatingOverlayLayer enabled={isFloatingOverlay}>
-				<Animated.View
-					style={[styles.container, animatedStyle]}
-					animatedProps={animatedProps}
-				>
-					{children}
-				</Animated.View>
-			</FloatingOverlayLayer>
-		),
-	};
-});
+				return () => {
+					unregisterScreenSlots(currentScreenKey, value);
+				};
+			}, [currentScreenKey, value]);
+
+			const content = useMemo(
+				() => (
+					<FloatingOverlayLayer enabled={isFloatingOverlay}>
+						<Animated.View
+							style={[styles.container, animatedStyle]}
+							animatedProps={animatedProps}
+						>
+							{children}
+						</Animated.View>
+					</FloatingOverlayLayer>
+				),
+				[children, animatedStyle, isFloatingOverlay, animatedProps],
+			);
+
+			return {
+				value,
+				children: content,
+			};
+		},
+	);
 
 const styles = StyleSheet.create({
 	container: { flex: 1 },

package/src/providers/stack/blank-stack-state/helpers/build-blank-stack-state.ts

@@ -138,20 +138,6 @@ const getSceneActivityWindow = <
 	};
 };
 
-const withDescriptorActivityState = <TDescriptor extends BaseStackDescriptor>(
-	descriptor: StackDescriptorSource<TDescriptor>,
-	activity: StackSceneActivity,
-): TDescriptor => {
-	if (descriptor.activity === activity) {
-		return descriptor as TDescriptor;
-	}
-
-	return {
-		...descriptor,
-		activity,
-	} as TDescriptor;
-};
-
 const buildBaseScenes = <
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
@@ -207,10 +193,9 @@ const buildBaseScenes = <
 			childStateUnchanged &&
 			previousDescriptor.route === sourceDescriptor.route &&
 			previousDescriptor.navigation === sourceDescriptor.navigation &&
-			previousDescriptor.options === sourceDescriptor.options &&
-			previousDescriptor.activity === activity
+			previousDescriptor.options === sourceDescriptor.options
 				? previousDescriptor
-				: withDescriptorActivityState(sourceDescriptor, activity);
+				: (sourceDescriptor as TDescriptor);
 
 		routeKeys.push(route.key);
 		routeChildStates[route.key] = routeChildState;
@@ -222,6 +207,7 @@ const buildBaseScenes = <
 		}
 
 		scenes.push({
+			activity,
 			route: descriptor.route,
 			descriptor,
 		});
@@ -289,6 +275,7 @@ const withSceneRelationships = <TDescriptor extends BaseStackDescriptor>({
 
 		if (
 			previousScene &&
+			previousScene.activity === nextScene.activity &&
 			previousScene.route === nextScene.route &&
 			previousScene.descriptor === nextScene.descriptor &&
 			previousScene.previousDescriptor === nextScene.previousDescriptor &&

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

@@ -1,51 +1,70 @@
 import type { Route } from "@react-navigation/native";
-import * as React from "react";
-import { useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import {
 	type StackContextValue,
 	StackProvider,
 } from "../../hooks/navigation/use-stack";
 import type {
-	BlankStackProviderContextValue,
 	BlankStackProviderProps,
-	BlankStackProviderRenderProps,
-	BlankStackProviderResult,
+	BlankStackStoreValue,
 } from "../../types/providers/blank-stack-provider.types";
 import type {
 	BaseStackDescriptor,
 	BaseStackNavigation,
 	BaseStackScene,
 } from "../../types/stack.types";
+import createProvider from "../../utils/create-provider";
 import { useBlankStackState } from "./blank-stack-state";
-import { useStackCoreContext } from "./core.provider";
+import { useStackCoreStore } from "./core.provider";
 
-const BlankStackProviderContext =
-	React.createContext<BlankStackProviderContextValue | null>(null);
-BlankStackProviderContext.displayName = "BlankStackProvider";
+type InternalBlankStackProviderProps = BlankStackProviderProps<
+	BaseStackDescriptor,
+	BaseStackNavigation
+> & {
+	children: ReactNode;
+};
+
+const createScenesByKey = <TDescriptor extends BaseStackDescriptor>(
+	scenes: BaseStackScene<TDescriptor>[],
+) => {
+	const scenesByKey: Record<string, BaseStackScene<TDescriptor>> = {};
 
-function useBlankStackContext(): BlankStackProviderContextValue {
-	const context = React.useContext(BlankStackProviderContext);
-	if (!context) {
-		throw new Error(
-			"useBlankStackContext must be used within BlankStackProvider",
-		);
+	for (const scene of scenes) {
+		scenesByKey[scene.route.key] = scene;
 	}
-	return context;
-}
 
-function useBlankStackProviderValue<
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	props: BlankStackProviderProps<TDescriptor, TNavigation>,
-): BlankStackProviderResult<TDescriptor> {
-	const { flags } = useStackCoreContext();
-	const { state, handleCloseRoute, requestDismiss } = useBlankStackState(props);
-	const navigatorKey = props.state.key;
+	return scenesByKey;
+};
 
-	const focusedIndex = props.state.index;
+type BlankStackStoreProviderProps = {
+	children: ReactNode;
+	value: BlankStackStoreValue<BaseStackDescriptor>;
+};
 
-	const stackContextValue = useMemo<StackContextValue>(
+const { BlankStackProvider: BlankStackStoreProvider, useBlankStackStore } =
+	createProvider("BlankStack", { guarded: false })<
+		BlankStackStoreProviderProps,
+		BlankStackStoreValue<BaseStackDescriptor>
+	>(({ children, value }) => ({ children, value }));
+
+function BlankStackProvider({
+	state: stackState,
+	children,
+	...props
+}: InternalBlankStackProviderProps) {
+	const flags = useStackCoreStore((store) => store.flags);
+	const { state, handleCloseRoute, requestDismiss } = useBlankStackState({
+		...props,
+		state: stackState,
+	});
+	const navigatorKey = stackState.key;
+	const focusedIndex = stackState.index;
+	const scenesByKey = useMemo(
+		() => createScenesByKey(state.scenes),
+		[state.scenes],
+	);
+
+	const stackValue = useMemo<StackContextValue>(
 		() => ({
 			flags,
 			navigatorKey,
@@ -65,54 +84,26 @@ function useBlankStackProviderValue<
 			requestDismiss,
 		],
 	);
+	const blankStackValue = {
+		navigatorKey,
+		routeKeys: state.routeKeys,
+		routes: state.routes,
+		scenes: state.scenes,
+		scenesByKey,
+		focusedIndex,
+		requestDismiss,
+		shouldShowFloatOverlay: state.shouldShowFloatOverlay,
+		handleCloseRoute,
+	};
 
-	const blankStackProviderContextValue =
-		useMemo<BlankStackProviderContextValue>(
-			() => ({
-				handleCloseRoute,
-			}),
-			[handleCloseRoute],
-		);
-
-	const renderProps = useMemo<BlankStackProviderRenderProps<TDescriptor>>(
-		() => ({
-			scenes: state.scenes,
-			focusedIndex,
-			shouldShowFloatOverlay: state.shouldShowFloatOverlay,
-		}),
-		[state.scenes, focusedIndex, state.shouldShowFloatOverlay],
+	return (
+		<StackProvider value={stackValue}>
+			<BlankStackStoreProvider value={blankStackValue}>
+				{children}
+			</BlankStackStoreProvider>
+		</StackProvider>
 	);
-
-	return { stackContextValue, blankStackProviderContextValue, renderProps };
-}
-
-function withBlankStack<
-	TDescriptor extends BaseStackDescriptor = BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation = BaseStackNavigation,
->(
-	Component: React.ComponentType<BlankStackProviderRenderProps<TDescriptor>>,
-): React.FC<BlankStackProviderProps<TDescriptor, TNavigation>> {
-	return function BlankStackProvider(
-		props: BlankStackProviderProps<TDescriptor, TNavigation>,
-	) {
-		const { stackContextValue, blankStackProviderContextValue, renderProps } =
-			useBlankStackProviderValue<TDescriptor, TNavigation>(props);
-
-		return (
-			<StackProvider value={stackContextValue}>
-				<BlankStackProviderContext.Provider
-					value={blankStackProviderContextValue}
-				>
-					<Component {...renderProps} />
-				</BlankStackProviderContext.Provider>
-			</StackProvider>
-		);
-	};
 }
 
-export type {
-	BlankStackProviderContextValue,
-	BlankStackProviderProps,
-	BlankStackProviderRenderProps,
-};
-export { useBlankStackContext, withBlankStack };
+export type { BlankStackProviderProps, BlankStackStoreValue };
+export { BlankStackProvider, useBlankStackStore };