react-native-screen-transitions 3.12.0 → 3.13.0-beta.1

package/src/shared/providers/screen/gestures/shared/policy.ts

@@ -25,11 +25,11 @@ import type {
 import { computeClaimedDirections } from "../ownership/compute-claimed-directions";
 import { resolveOwnership } from "../ownership/resolve-ownership";
 import type {
-	GestureContextType,
 	PanGesturePolicy,
 	PinchGesturePolicy,
 	ScreenGestureConfig,
 	ScreenGestureParticipation,
+	ScreenGestureSource,
 } from "../types";
 import {
 	getGestureDirectionEntries,
@@ -305,12 +305,12 @@ export const resolvePinchPolicy = (
 const resolveGestureParticipation = ({
 	options,
 	isFirstKey,
-	gestureContext,
+	ancestorGestures,
 	isRemovePrevented,
 }: {
 	options: GesturePolicyOptions;
 	isFirstKey: boolean;
-	gestureContext: GestureContextType | null;
+	ancestorGestures: readonly ScreenGestureSource[];
 	isRemovePrevented: boolean;
 }): ScreenGestureParticipation => {
 	const canDismiss =
@@ -342,25 +342,25 @@ const resolveGestureParticipation = ({
 		canTrackGesture,
 		effectiveSnapPoints,
 		claimedDirections,
-		ownershipStatus: resolveOwnership(claimedDirections, gestureContext),
+		ownershipStatus: resolveOwnership(claimedDirections, ancestorGestures),
 	};
 };
 
 export const resolveScreenGestureConfig = ({
 	options,
 	isFirstKey,
-	gestureContext,
+	ancestorGestures,
 	isRemovePrevented = false,
 }: {
 	options: ScreenTransitionConfig;
 	isFirstKey: boolean;
-	gestureContext: GestureContextType | null;
+	ancestorGestures: readonly ScreenGestureSource[];
 	isRemovePrevented?: boolean;
 }): ScreenGestureConfig => {
 	const participation = resolveGestureParticipation({
 		options,
 		isFirstKey,
-		gestureContext,
+		ancestorGestures,
 		isRemovePrevented,
 	});
 	const hasSnapPoints = participation.effectiveSnapPoints.hasSnapPoints;

package/src/shared/providers/screen/gestures/types.ts

@@ -71,17 +71,20 @@ export const NO_DIRECTION_CLAIMS: DirectionClaimMap = {
 	"horizontal-inverted": null,
 };
 
-export interface GestureContextType {
+export interface ScreenGestureSource {
 	routeKey: string;
 	detectorGesture: ComposedGesture;
 	panGesture: PanGesture;
 	pinchGesture: PinchGesture;
 	scrollState: SharedValue<ScrollGestureState | null>;
-	gestureContext: GestureContextType | null;
 	claimedDirections: ClaimedDirections;
 	childDirectionClaims: SharedValue<DirectionClaimMap>;
 }
 
+export interface GestureContextType extends ScreenGestureSource {
+	ancestorGestures: readonly ScreenGestureSource[];
+}
+
 export interface ScreenGestureParticipation {
 	/** Whether this route is the first route in its stack. First routes never track gestures. */
 	isFirstKey: boolean;
@@ -172,6 +175,7 @@ export interface PinchTrackState {
 export interface PanReleaseResult {
 	target: number;
 	shouldDismiss: boolean;
+	isCancelled: boolean;
 	initialVelocity: number;
 	commitProgress?: number;
 	transitionSpec: TransitionSpec | undefined;

package/src/shared/providers/screen/styles/constants.ts

@@ -62,6 +62,7 @@ export const STYLE_RESET_VALUES: Record<string, unknown> = {
 export const PROP_RESET_VALUES: Record<string, unknown> = {
 	hostName: PORTAL_HOST_NAME_RESET_VALUE,
 	pointerEvents: "auto",
+	teleport: false,
 };
 
 const RESERVED_STYLE_SLOT_IDS = {

package/src/shared/providers/screen/styles/helpers/visibility-block-ownership.ts

@@ -0,0 +1,16 @@
+type VisibilityBlockOwnershipParams = {
+	localBlocked: boolean;
+	ancestorBlocked: boolean;
+};
+
+export const resolveVisibilityBlockOwnership = ({
+	localBlocked,
+	ancestorBlocked,
+}: VisibilityBlockOwnershipParams) => {
+	"worklet";
+
+	return {
+		appliesOffset: localBlocked && !ancestorBlocked,
+		effectiveBlocked: localBlocked || ancestorBlocked,
+	};
+};

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

@@ -6,14 +6,21 @@ import {
 	composeSlotStyleWithLocalTransform,
 	getLocalTransformForSlotComposition,
 } from "../helpers/compose-slot-style";
-import { useScreenSlots } from "../slot.provider";
+import { useOptionalScreenSlotStore } from "../slot.provider";
 
 const useCurrentScreenSlotsMap = () => {
 	const route = useRoute();
-	const slotsMap = useScreenSlots(route.key, (store) => store.slotsMap);
+	const localSlotsMap = useOptionalScreenSlotStore(
+		(store) => store?.slotsMap ?? null,
+	);
+	const keyedSlotsMap = useOptionalScreenSlotStore(
+		localSlotsMap ? null : route.key,
+		(store) => store.slotsMap,
+	);
+	const slotsMap = localSlotsMap ?? keyedSlotsMap;
 
 	if (!slotsMap) {
-		throw new Error(`ScreenSlot store for route "${route.key}" was not found`);
+		throw new Error(`ScreenSlotStore is unavailable for route "${route.key}"`);
 	}
 
 	return slotsMap;

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

@@ -148,9 +148,6 @@ export const useInterpolatedStylesMap = ({
 	const screenInterpolatorProps = useScreenAnimationStore(
 		(store) => store.screenInterpolatorProps,
 	);
-	const screenInterpolatorPropsRevision = useScreenAnimationStore(
-		(store) => store.screenInterpolatorPropsRevision,
-	);
 	const selectedInterpolatorOptions = useScreenAnimationStore(
 		(store) => store.selectedInterpolatorOptions,
 	);
@@ -160,17 +157,15 @@ export const useInterpolatedStylesMap = ({
 	const currentInterpolator = useScreenAnimationStore(
 		(store) => store.currentInterpolator,
 	);
-	const ancestorScreenAnimationSources = useScreenAnimationStore(
-		(store) => store.ancestorScreenAnimationSources,
+	const transitionSources = useScreenAnimationStore(
+		(store) => store.transitionSources,
 	);
-	const descendantScreenAnimationSources = useScreenAnimationStore(
-		(store) => store.descendantScreenAnimationSources,
+	const transitionOriginIndex = useScreenAnimationStore(
+		(store) => store.transitionOriginIndex,
 	);
 	const transition = useBuildTransitionAccessor({
-		screenInterpolatorProps,
-		screenInterpolatorPropsRevision,
-		ancestorScreenAnimationSources,
-		descendantScreenAnimationSources,
+		transitionSources,
+		transitionOriginIndex,
 	});
 	const hasCurrentInterpolator = !!currentInterpolator;
 	const { closing: currentClosing, entering: currentEntering } =
@@ -242,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;

package/src/shared/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/shared/providers/screen/styles/index.tsx

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

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

@@ -8,6 +8,7 @@ import type {
 import type { NormalizedTransitionInterpolatedStyle } from "../../../types/animation.types";
 import createProvider from "../../../utils/create-provider";
 import { useDescriptorsStore } from "../descriptors";
+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";
@@ -30,36 +31,49 @@ export type ScreenSlotContextValue = {
 	visibilityBlocked: SharedValue<boolean>;
 };
 
-export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
-	createProvider("ScreenSlot", {
-		guarded: true,
-		global: true,
-	})<Props, ScreenSlotContextValue>(({ children }, { useParentStore }) => {
-		const ancestorStylesMap = useParentStore(
-			(parentContext) => parentContext?.slotsMap,
-		);
+const createScreenSlotProvider = createProvider("ScreenSlot", {
+	global: true,
+})<Props, ScreenSlotContextValue>;
+
+export const {
+	ScreenSlotProvider,
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+}: ReturnType<typeof createScreenSlotProvider> = createScreenSlotProvider(
+	({ children }) => {
 		const currentScreenKey = useDescriptorsStore(
 			(store) => store.derivations.currentScreenKey,
 		);
-		const { animatedStyle, animatedProps, shouldBlockVisibility } =
-			useMaybeBlockVisibility();
+		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 { interpolatorReady, localStylesMaps } = useInterpolatedStylesMap({
 			enabled: true,
-			visibilityBlocked: shouldBlockVisibility,
+			visibilityBlocked,
 		});
 
 		const slotsMap = useResolvedStylesMap({
 			localStylesMaps,
-			ancestorStylesMap,
+			ancestorStylesMap: ancestorStylesMap ?? undefined,
 		});
 		const value = useMemo(
 			() => ({
 				interpolatorReady,
 				slotsMap,
-				visibilityBlocked: shouldBlockVisibility,
+				visibilityBlocked,
 			}),
-			[interpolatorReady, shouldBlockVisibility, slotsMap],
+			[interpolatorReady, slotsMap, visibilityBlocked],
 		);
 		const content = useMemo(
 			() => (
@@ -78,7 +92,8 @@ export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
 			value,
 			children: content,
 		};
-	});
+	},
+);
 
 const styles = StyleSheet.create({
 	container: { flex: 1 },

package/src/shared/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/shared/providers/stack/blank-stack.provider.tsx

@@ -42,11 +42,14 @@ type BlankStackStoreProviderProps = {
 	value: BlankStackStoreValue<BaseStackDescriptor>;
 };
 
-const { BlankStackProvider: BlankStackStoreProvider, useBlankStackStore } =
-	createProvider("BlankStack", { guarded: false })<
-		BlankStackStoreProviderProps,
-		BlankStackStoreValue<BaseStackDescriptor>
-	>(({ children, value }) => ({ children, value }));
+const {
+	BlankStackProvider: BlankStackStoreProvider,
+	useBlankStackStore,
+	useOptionalBlankStackStore,
+} = createProvider("BlankStack")<
+	BlankStackStoreProviderProps,
+	BlankStackStoreValue<BaseStackDescriptor>
+>(({ children, value }) => ({ children, value }));
 
 function BlankStackProvider({
 	state: stackState,
@@ -68,6 +71,15 @@ function BlankStackProvider({
 		() => createScenesByKey(state.scenes),
 		[state.scenes],
 	);
+	const paintDriverRouteKeyByRouteKey = useMemo(() => {
+		const paintDrivers = new Map<string, string>();
+
+		for (let index = 0; index + 2 < state.routeKeys.length; index++) {
+			paintDrivers.set(state.routeKeys[index], state.routeKeys[index + 2]);
+		}
+
+		return paintDrivers;
+	}, [state.routeKeys]);
 
 	const stackValue = useMemo<StackContextValue>(
 		() => ({
@@ -95,6 +107,7 @@ function BlankStackProvider({
 		routes: state.routes,
 		scenes: state.scenes,
 		scenesByKey,
+		paintDriverRouteKeyByRouteKey,
 		focusedIndex,
 		requestDismiss,
 		shouldShowFloatOverlay: state.shouldShowFloatOverlay,
@@ -111,4 +124,4 @@ function BlankStackProvider({
 }
 
 export type { BlankStackProviderProps, BlankStackStoreValue };
-export { BlankStackProvider, useBlankStackStore };
+export { BlankStackProvider, useBlankStackStore, useOptionalBlankStackStore };

package/src/shared/providers/stack/core.provider.tsx

@@ -45,7 +45,6 @@ const StackCoreRoot = memo(function StackCoreRoot({
 
 export const { StackCoreProvider, useStackCoreStore } = createProvider(
 	"StackCore",
-	{ guarded: true },
 )<StackCoreProviderProps, StackCoreContextValue>(({ config, children }) => {
 	const {
 		TRANSITIONS_ALWAYS_ON = false,

package/src/shared/providers/stack/direct.provider.tsx

@@ -23,7 +23,7 @@ type DirectStackStoreProviderProps = {
 };
 
 const { DirectStackProvider: DirectStackStoreProvider, useDirectStackStore } =
-	createProvider("DirectStack", { guarded: true })<
+	createProvider("DirectStack")<
 		DirectStackStoreProviderProps,
 		DirectStackContextValue
 	>(({ children, value }) => ({ children, value }));
@@ -51,7 +51,7 @@ function DirectStackProvider({
 		useMemo(() => {
 			const allRoutes = state.routes.concat(state.preloadedRoutes);
 			const scenes: DirectStackScene[] = [];
-			const routeKeys: string[] = [];
+			const routeKeys = state.routes.map((route) => route.key);
 			const allDescriptors: NativeStackDescriptorMap = {
 				...preloadedDescriptors,
 				...descriptors,
@@ -85,8 +85,6 @@ function DirectStackProvider({
 					descriptor,
 					isPreloaded,
 				});
-				routeKeys.push(route.key);
-
 				if (
 					!shouldShowFloatOverlay &&
 					descriptor.options?.enableTransitions === true &&

package/src/shared/stores/animation.store.ts

@@ -10,7 +10,6 @@ import { createStore } from "../utils/create-store";
 export type AnimationStoreMap = {
 	transitionProgress: SharedValue<number>;
 	visualProgress: SharedValue<number>;
-	stackProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
 	progressSettled: SharedValue<number>;
@@ -39,7 +38,6 @@ function createAnimationBag(): AnimationStoreMap {
 	return {
 		transitionProgress: makeMutable(0),
 		visualProgress: makeMutable(0),
-		stackProgress: makeMutable(0),
 		willAnimate: makeMutable(0),
 		closing: makeMutable(0),
 		progressAnimating: makeMutable(0),
@@ -58,7 +56,6 @@ export const AnimationStore = createStore<AnimationStoreMap>({
 	disposeBag: (bag) => {
 		cancelAnimation(bag.transitionProgress);
 		cancelAnimation(bag.visualProgress);
-		cancelAnimation(bag.stackProgress);
 		cancelAnimation(bag.willAnimate);
 		cancelAnimation(bag.progressAnimating);
 		cancelAnimation(bag.progressSettled);

package/src/shared/stores/bounds/helpers/link-pairs.helpers.ts

@@ -137,6 +137,18 @@ export const ensurePairSourceRequests = (
 	return pair.sourceRequests;
 };
 
+export const ensurePairDestinationRequests = (
+	state: LinkPairsState,
+	pairKey: ScreenPairKey,
+): Record<LinkKey, true> => {
+	"worklet";
+	const pair = ensurePairState(state, pairKey);
+	if (!pair.destinationRequests) {
+		pair.destinationRequests = {};
+	}
+	return pair.destinationRequests;
+};
+
 export const removePairLink = (
 	state: LinkPairsState,
 	pairKey: ScreenPairKey,

package/src/shared/stores/bounds/internals/clear.ts

@@ -1,7 +1,12 @@
 import { hasAnyKeys } from "../helpers/keys";
 import { isScreenPairKeyForScreen } from "../helpers/link-pairs.helpers";
 import type { LinkPairsState, ScreenKey } from "../types";
-import { type BoundaryEntriesState, boundaryRegistry, pairs } from "./state";
+import {
+	type BoundaryEntriesState,
+	boundaryRegistry,
+	boundsScreens,
+	pairs,
+} from "./state";
 
 function clear(screenKey: ScreenKey) {
 	"worklet";
@@ -30,6 +35,12 @@ function clear(screenKey: ScreenKey) {
 
 		return state;
 	});
+
+	boundsScreens.modify((state) => {
+		"worklet";
+		delete state[screenKey];
+		return state;
+	});
 }
 
 export { clear };