react-native-screen-transitions 4.0.0-alpha.6 → 4.0.0-alpha.8

package/src/providers/screen/styles/hooks/slot-resolvers.tsx

@@ -1,14 +1,33 @@
 import { useMemo } from "react";
 import { useAnimatedProps, useAnimatedStyle } from "react-native-reanimated";
 import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import { useNavigationRoute } from "../../../navigation/navigation-host.provider";
 import {
 	composeSlotStyleWithLocalTransform,
 	getLocalTransformForSlotComposition,
 } from "../helpers/compose-slot-style";
-import { useScreenSlots } from "../slot.provider";
+import { useOptionalScreenSlotStore } from "../slot.provider";
+
+const useCurrentScreenSlotsMap = () => {
+	const routeKey = useNavigationRoute().key;
+	const localSlotsMap = useOptionalScreenSlotStore(
+		(store) => store?.slotsMap ?? null,
+	);
+	const keyedSlotsMap = useOptionalScreenSlotStore(
+		localSlotsMap ? null : routeKey,
+		(store) => store.slotsMap,
+	);
+	const slotsMap = localSlotsMap ?? keyedSlotsMap;
+
+	if (!slotsMap) {
+		throw new Error(`ScreenSlotStore is unavailable for route "${routeKey}"`);
+	}
+
+	return slotsMap;
+};
 
 export const useSlotStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const slot = slotId ? slotsMap.get()[slotId] : undefined;
@@ -26,7 +45,7 @@ export const useComposedSlotStyles = (
 	slotId: string | undefined,
 	style: unknown,
 ) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 	const localTransform = useMemo(
 		() => getLocalTransformForSlotComposition(style),
 		[style],
@@ -50,7 +69,7 @@ export const useComposedSlotStyles = (
  * target takes the full associated style. Yields `NO_STYLES` when neither is set.
  */
 export const useSlotStackingStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -66,7 +85,7 @@ export const useSlotStackingStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotLayoutStyles = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedStyle(() => {
 		const baseStyle = slotId ? slotsMap.get()[slotId]?.style : undefined;
@@ -103,7 +122,7 @@ export const useSlotLayoutStyles = (slotId: string | undefined) => {
 };
 
 export const useSlotProps = (slotId: string | undefined) => {
-	const { slotsMap } = useScreenSlots();
+	const slotsMap = useCurrentScreenSlotsMap();
 
 	return useAnimatedProps(() => {
 		return (slotId ? slotsMap.get()[slotId]?.props : undefined) ?? NO_PROPS;

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

@@ -40,6 +40,7 @@ import { stripInterpolatorOptions } from "../helpers/strip-interpolator-options"
 import {
 	hasCloseTransitionFinished,
 	isOpenTransitionBlocked,
+	isScreenInterpolatorReady,
 } from "../helpers/transition-visual-state";
 import { resolveInitialDestinationStyleGate } from "../helpers/visibility-gate";
 
@@ -144,17 +145,54 @@ export const useInterpolatedStylesMap = ({
 		(s) => s.derivations.destinationPairKey,
 	);
 	const screenOptions = useScreenOptionsStore();
+	const screenInterpolatorProps = useScreenAnimationStore(
+		(store) => store.screenInterpolatorProps,
+	);
+	const selectedInterpolatorOptions = useScreenAnimationStore(
+		(store) => store.selectedInterpolatorOptions,
+	);
+	const nextInterpolator = useScreenAnimationStore(
+		(store) => store.nextInterpolator,
+	);
+	const currentInterpolator = useScreenAnimationStore(
+		(store) => store.currentInterpolator,
+	);
+	const transitionSources = useScreenAnimationStore(
+		(store) => store.transitionSources,
+	);
+	const transitionOriginIndex = useScreenAnimationStore(
+		(store) => store.transitionOriginIndex,
+	);
+	const transition = useBuildTransitionAccessor({
+		transitionSources,
+		transitionOriginIndex,
+	});
+	const hasCurrentInterpolator = !!currentInterpolator;
+	const { closing: currentClosing, entering: currentEntering } =
+		AnimationStore.getBag(currentScreenKey);
 	const {
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		selectedInterpolatorOptions,
-		nextInterpolator,
-		currentInterpolator,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
-	} = useScreenAnimationStore();
-	const transition = useBuildTransitionAccessor();
-	const nextInterpolatorReady = useSharedValue(0);
+		animationProgress: currentAnimationProgress,
+		pendingLifecycleRequestKind: currentPendingLifecycleRequestKind,
+		pendingLifecycleStartBlockCount: currentPendingLifecycleStartBlockCount,
+	} = SystemStore.getBag(currentScreenKey);
+	const interpolatorReady = useDerivedValue<number>(() => {
+		"worklet";
+		const isPendingOpen =
+			currentPendingLifecycleRequestKind.get() ===
+			LifecycleTransitionRequestKind.Open;
+		const opening = isPendingOpen || !!currentEntering.get();
+
+		return isScreenInterpolatorReady({
+			hasInterpolator: hasCurrentInterpolator,
+			opening,
+			closing: currentClosing.get(),
+			pendingLifecycleStartBlockCount:
+				currentPendingLifecycleStartBlockCount.get(),
+			animationProgress: currentAnimationProgress.get(),
+		})
+			? 1
+			: 0;
+	});
 
 	// In some cases, a user may want to use external shared values to drive animations in the interpoaltor.
 	// We can now support this by collecting those shared values and reading them here to trigger an update.
@@ -199,12 +237,7 @@ export const useInterpolatedStylesMap = ({
 
 	const localStylesMaps = useDerivedValue<LocalStyleLayers>(() => {
 		"worklet";
-		readScreenAnimationRevisions(
-			screenInterpolatorPropsRevision,
-			ancestorScreenAnimationSources,
-			descendantScreenAnimationSources,
-			interpolatorSharedValues,
-		);
+		readScreenAnimationRevisions(transitionSources, interpolatorSharedValues);
 		const props = screenInterpolatorProps.get();
 
 		const { current, next } = props;
@@ -249,10 +282,6 @@ export const useInterpolatedStylesMap = ({
 			!nextInterpolator ||
 			isOpeningBlocked ||
 			hasCloseFinished;
-		const nextReady = currentOwnsInterpolator ? 0 : 1;
-
-		nextInterpolatorReady.set(nextReady);
-
 		const interpolatorOptionsOwner = currentOwnsInterpolator
 			? "current"
 			: "next";
@@ -328,7 +357,7 @@ export const useInterpolatedStylesMap = ({
 	});
 
 	return {
+		interpolatorReady,
 		localStylesMaps,
-		nextInterpolatorReady,
 	};
 };

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

@@ -1,5 +1,6 @@
 import { useWindowDimensions } from "react-native";
 import {
+	type SharedValue,
 	useAnimatedProps,
 	useAnimatedReaction,
 	useAnimatedStyle,
@@ -10,9 +11,18 @@ import { SystemStore } from "../../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../../utils/visibility-block-offset";
 import { useDescriptorsStore } from "../../descriptors";
 import { hasCloseTransitionFinished } from "../helpers/transition-visual-state";
+import { resolveVisibilityBlockOwnership } from "../helpers/visibility-block-ownership";
 import { resolveScreenVisibilityGate } from "../helpers/visibility-gate";
 
-export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
+type Params = {
+	ancestorVisibilityBlocked: SharedValue<boolean> | null;
+	isFloatingOverlay?: boolean;
+};
+
+export const useMaybeBlockVisibility = ({
+	ancestorVisibilityBlocked,
+	isFloatingOverlay,
+}: Params) => {
 	const { height } = useWindowDimensions();
 	const currentScreenKey = useDescriptorsStore(
 		(store) => store.derivations.currentScreenKey,
@@ -25,29 +35,39 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	} = SystemStore.getBag(currentScreenKey);
 
 	const hasVisibilityGateOpened = useSharedValue(false);
-	const shouldBlockVisibility = useSharedValue(!isFloatingOverlay);
+	const localVisibilityBlocked = useSharedValue(!isFloatingOverlay);
+	const effectiveVisibilityBlocked = useSharedValue(!isFloatingOverlay);
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
 
-			return resolveScreenVisibilityGate({
-				isFloatingOverlay,
-				hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
-				pendingLifecycleStartBlockCount: pendingLifecycleStartBlockCount.get(),
-				pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
-				animationProgress: animationProgress.get(),
-				entering: entering.get(),
-			});
+			return {
+				gate: resolveScreenVisibilityGate({
+					isFloatingOverlay,
+					hasVisibilityGateOpened: hasVisibilityGateOpened.get(),
+					pendingLifecycleStartBlockCount:
+						pendingLifecycleStartBlockCount.get(),
+					pendingLifecycleRequestKind: pendingLifecycleRequestKind.get(),
+					animationProgress: animationProgress.get(),
+					entering: entering.get(),
+				}),
+				ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+			};
 		},
-		(gate) => {
+		({ gate, ancestorBlocked }) => {
 			"worklet";
 
 			if (gate.shouldOpenGate) {
 				hasVisibilityGateOpened.set(true);
 			}
 
-			shouldBlockVisibility.set(gate.shouldBlock);
+			const ownership = resolveVisibilityBlockOwnership({
+				localBlocked: gate.shouldBlock,
+				ancestorBlocked,
+			});
+			localVisibilityBlocked.set(gate.shouldBlock);
+			effectiveVisibilityBlocked.set(ownership.effectiveBlocked);
 		},
 	);
 
@@ -66,10 +86,15 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 			};
 		}
 
+		const ownership = resolveVisibilityBlockOwnership({
+			localBlocked: localVisibilityBlocked.get(),
+			ancestorBlocked: ancestorVisibilityBlocked?.get() ?? false,
+		});
+
 		return {
 			transform: [
 				{
-					translateY: shouldBlockVisibility.get() ? offset : 0,
+					translateY: ownership.appliesOffset ? offset : 0,
 				},
 			],
 		};
@@ -78,7 +103,7 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	const animatedProps = useAnimatedProps(() => {
 		"worklet";
 		return {
-			pointerEvents: shouldBlockVisibility.get()
+			pointerEvents: effectiveVisibilityBlocked.get()
 				? ("none" as const)
 				: ("box-none" as const),
 		};
@@ -87,6 +112,6 @@ export const useMaybeBlockVisibility = (isFloatingOverlay?: boolean) => {
 	return {
 		animatedStyle,
 		animatedProps,
-		shouldBlockVisibility,
+		visibilityBlocked: effectiveVisibilityBlocked,
 	};
 };

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

@@ -9,5 +9,6 @@ export {
 export {
 	type ScreenSlotName,
 	ScreenSlotProvider,
-	useScreenSlots,
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
 } from "./slot.provider";

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

@@ -1,4 +1,4 @@
-import { type ReactNode, useLayoutEffect, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import Animated, { type SharedValue } from "react-native-reanimated";
 import type {
@@ -8,22 +8,15 @@ import type {
 import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
 import createProvider from "../../../utils/create-provider";
 import { useDescriptorsStore } from "../descriptors";
-import { FloatingOverlayLayer } from "./components/floating-overlay-layer";
-import type { LocalStyleLayers } from "./helpers/resolve-slot-styles";
+import { useCurrentScreenRelationships } from "../use-current-screen-relationships";
 import { useInterpolatedStylesMap } from "./hooks/use-interpolated-style-maps";
 import { useMaybeBlockVisibility } from "./hooks/use-maybe-block-visibility";
 import { useResolvedStylesMap } from "./hooks/use-resolved-slot-style-map";
-import {
-	registerScreenSlots,
-	unregisterScreenSlots,
-} from "./stores/slot-references.store";
 
-type Props = {
-	children: ReactNode;
-	isFloatingOverlay?: boolean;
-};
+type Props = { children: ReactNode };
 
 export type ScreenSlotName =
+	| "overlay"
 	| "content"
 	| "backdrop"
 	| "surface"
@@ -31,79 +24,63 @@ export type ScreenSlotName =
 	| typeof NAVIGATION_MASK_ELEMENT_STYLE_ID;
 
 export type ScreenSlotContextValue = {
-	localStylesMaps: SharedValue<LocalStyleLayers>;
-	nextInterpolatorReady: SharedValue<number>;
+	interpolatorReady: SharedValue<number>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 	visibilityBlocked: SharedValue<boolean>;
 };
 
-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 { animatedStyle, animatedProps, shouldBlockVisibility } =
-				useMaybeBlockVisibility(isFloatingOverlay);
-
-			const { localStylesMaps, nextInterpolatorReady } =
-				useInterpolatedStylesMap({
-					enabled: !isFloatingOverlay,
-					visibilityBlocked: shouldBlockVisibility,
-				});
+const createScreenSlotProvider = createProvider("ScreenSlot", {
+	global: true,
+})<Props, ScreenSlotContextValue>;
 
-			const slotsMap = useResolvedStylesMap({
-				localStylesMaps,
-				ancestorStylesMap: parentContext?.slotsMap,
+export const {
+	ScreenSlotProvider,
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+}: ReturnType<typeof createScreenSlotProvider> = createScreenSlotProvider(
+	({ children }) => {
+		const currentScreenKey = useDescriptorsStore(
+			(store) => store.derivations.currentScreenKey,
+		);
+		const { parentScreenKey } = useCurrentScreenRelationships();
+		const ancestorStylesMap = useOptionalScreenSlotStore(
+			parentScreenKey,
+			(store) => store.slotsMap,
+		);
+		const ancestorVisibilityBlocked = useOptionalScreenSlotStore(
+			parentScreenKey,
+			(store) => store.visibilityBlocked,
+		);
+		const { animatedStyle, animatedProps, visibilityBlocked } =
+			useMaybeBlockVisibility({
+				ancestorVisibilityBlocked: ancestorVisibilityBlocked ?? null,
 			});
-			const value = useMemo(
-				() => ({
-					localStylesMaps,
-					nextInterpolatorReady,
-					slotsMap,
-					visibilityBlocked: shouldBlockVisibility,
-				}),
-				[
-					localStylesMaps,
-					nextInterpolatorReady,
-					shouldBlockVisibility,
-					slotsMap,
-				],
-			);
-
-			useLayoutEffect(() => {
-				registerScreenSlots(currentScreenKey, value);
-
-				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],
-			);
+		const { interpolatorReady, localStylesMaps } = useInterpolatedStylesMap({
+			enabled: true,
+			visibilityBlocked,
+		});
+		const slotsMap = useResolvedStylesMap({
+			localStylesMaps,
+			ancestorStylesMap: ancestorStylesMap ?? undefined,
+		});
+		const value = useMemo(
+			() => ({ interpolatorReady, slotsMap, visibilityBlocked }),
+			[interpolatorReady, slotsMap, visibilityBlocked],
+		);
+		const content = useMemo(
+			() => (
+				<Animated.View
+					style={[styles.container, animatedStyle]}
+					animatedProps={animatedProps}
+				>
+					{children}
+				</Animated.View>
+			),
+			[children, animatedStyle, animatedProps],
+		);
 
-			return {
-				value,
-				children: content,
-			};
-		},
-	);
+		return { key: currentScreenKey, value, children: content };
+	},
+);
 
-const styles = StyleSheet.create({
-	container: { flex: 1 },
-});
+const styles = StyleSheet.create({ container: { flex: 1 } });

package/src/providers/screen/use-current-screen-relationships.ts

@@ -0,0 +1,10 @@
+import { useScreenRelationships } from "../../factories/screen-topology";
+import { useDescriptorsStore } from "./descriptors";
+
+export const useCurrentScreenRelationships = () => {
+	const screenKey = useDescriptorsStore(
+		(store) => store.derivations.currentScreenKey,
+	);
+
+	return useScreenRelationships(screenKey);
+};

package/src/providers/stack/blank-stack-state/blank-stack-controller.ts

@@ -1,24 +1,15 @@
 import type { BlankStackProviderProps } from "../../../types/providers/blank-stack-provider.types";
-import type {
-	BaseStackDescriptor,
-	BaseStackNavigation,
-	BaseStackRoute,
-} from "../../../types/stack.types";
+import type { BaseStackRoute } from "../../../types/stack.types";
+import { dispatchCloseAction } from "../../../utils/navigation/close-action-replay";
 import { buildBlankStackState } from "./helpers/build-blank-stack-state";
 import { deriveBlankStackState } from "./helpers/derive-blank-stack-state";
 import type {
 	BlankStackControllerSnapshot,
 	BlankStackController as BlankStackControllerType,
-	BlankStackDescriptorSources,
 } from "./helpers/types";
 
 export type { BlankStackController } from "./helpers/types";
 
-const createPopAction = () => ({
-	type: "POP",
-	payload: { count: 1 },
-});
-
 /**
  * Maintains the stack-local route snapshot used while blank stack transitions run.
  *
@@ -26,21 +17,17 @@ const createPopAction = () => ({
  * remove descriptors before our close animation has finished. This controller
  * keeps those closing routes locally until their lifecycle reports completion.
  */
-export const createBlankStackController = <
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	initialProps: BlankStackProviderProps<TDescriptor, TNavigation>,
-): BlankStackControllerType<TDescriptor, TNavigation> => {
+export const createBlankStackController = (
+	initialProps: BlankStackProviderProps,
+): BlankStackControllerType => {
 	const closingRouteKeys = new Set<string>();
 	let props = initialProps;
 	let previousRoutesSnapshot = initialProps.state.routes;
-	let snapshot: BlankStackControllerSnapshot<TDescriptor> = {
+	let snapshot: BlankStackControllerSnapshot = {
 		state: buildBlankStackState({
 			props,
 			routes: initialProps.state.routes,
-			descriptors:
-				initialProps.descriptors as BlankStackDescriptorSources<TDescriptor>,
+			descriptors: initialProps.descriptors,
 			closingRouteKeys,
 		}),
 	};
@@ -59,13 +46,11 @@ export const createBlankStackController = <
 		};
 	};
 
-	const getSnapshot = (): BlankStackControllerSnapshot<TDescriptor> => {
+	const getSnapshot = (): BlankStackControllerSnapshot => {
 		return snapshot;
 	};
 
-	const update = (
-		nextProps: BlankStackProviderProps<TDescriptor, TNavigation>,
-	) => {
+	const update = (nextProps: BlankStackProviderProps) => {
 		const lastRoutesSnapshot = previousRoutesSnapshot;
 		props = nextProps;
 
@@ -90,10 +75,14 @@ export const createBlankStackController = <
 		const { state, navigation } = props;
 
 		if (state.routes.some((candidate) => candidate.key === route.key)) {
-			navigation.dispatch({
-				...createPopAction(),
+			const action = {
+				type: "POP",
+				payload: { count: 1 },
 				source: route.key,
 				target: state.key,
+			};
+			dispatchCloseAction(action, (closeAction) => {
+				navigation.dispatch(closeAction);
 			});
 			return;
 		}