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

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/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,33 +31,32 @@ export type ScreenSlotContextValue = {
 	visibilityBlocked: SharedValue<boolean>;
 };
 
-const NO_PARENT_SCREEN_KEY = "__no-parent-screen__";
+const createScreenSlotProvider = createProvider("ScreenSlot", {
+	global: true,
+})<Props, ScreenSlotContextValue>;
 
-export const useAreAnyBlockingVisibility = () => {
-	const parentScreenKey = useDescriptorsStore(
-		(store) => store.derivations.parentScreenKey,
-	);
-
-	return useScreenSlots(
-		parentScreenKey ?? NO_PARENT_SCREEN_KEY,
-		(store) => store.visibilityBlocked,
-	);
-};
-
-export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
-	createProvider("ScreenSlot", {
-		guarded: true,
-		global: true,
-	})<Props, ScreenSlotContextValue>(({ children }, { useParentStore }) => {
-		const ancestorStylesMap = useParentStore(
-			(parentContext) => parentContext?.slotsMap,
-		);
+export const {
+	ScreenSlotProvider,
+	useOptionalScreenSlotStore,
+	useScreenSlotStore,
+}: ReturnType<typeof createScreenSlotProvider> = createScreenSlotProvider(
+	({ children }) => {
 		const currentScreenKey = useDescriptorsStore(
 			(store) => store.derivations.currentScreenKey,
 		);
-		const ancestorVisibilityBlocked = useAreAnyBlockingVisibility();
+		const { parentScreenKey } = useCurrentScreenRelationships();
+		const ancestorStylesMap = useOptionalScreenSlotStore(
+			parentScreenKey,
+			(store) => store.slotsMap,
+		);
+		const ancestorVisibilityBlocked = useOptionalScreenSlotStore(
+			parentScreenKey,
+			(store) => store.visibilityBlocked,
+		);
 		const { animatedStyle, animatedProps, visibilityBlocked } =
-			useMaybeBlockVisibility({ ancestorVisibilityBlocked });
+			useMaybeBlockVisibility({
+				ancestorVisibilityBlocked: ancestorVisibilityBlocked ?? null,
+			});
 
 		const { interpolatorReady, localStylesMaps } = useInterpolatedStylesMap({
 			enabled: true,
@@ -65,7 +65,7 @@ export const { ScreenSlotProvider, useScreenSlotStore: useScreenSlots } =
 
 		const slotsMap = useResolvedStylesMap({
 			localStylesMaps,
-			ancestorStylesMap,
+			ancestorStylesMap: ancestorStylesMap ?? undefined,
 		});
 		const value = useMemo(
 			() => ({
@@ -92,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/internals/coordinator.ts

@@ -1,4 +1,9 @@
 import type { SharedValue } from "react-native-reanimated";
+import {
+	registerWorkletScreen,
+	screenBelongsToScope,
+	unregisterWorkletScreen,
+} from "../../../factories/screen-topology";
 import {
 	ensurePairDestinationRequests,
 	ensurePairGroups,
@@ -20,11 +25,6 @@ import type {
 	TagID,
 } from "../types";
 import { removeEntry, setEntry } from "./entries";
-import {
-	registerBoundsScreen,
-	screenBelongsToScope,
-	unregisterBoundsScreen,
-} from "./screen-graph";
 import { boundaryRegistry, boundsScreens, pairs } from "./state";
 
 type MeasurementRequest = {
@@ -184,11 +184,18 @@ const releaseDestinationBlockWhenReady = (
 export function registerScreen(params: RegisterScreenParams) {
 	"worklet";
 	const node: BoundsScreenNode = {
-		parentScreenKey: params.parentScreenKey,
 		animationProgress: params.animationProgress,
 		pendingLifecycleStartBlockCount: params.pendingLifecycleStartBlockCount,
 	};
-	registerBoundsScreen(params.screenKey, node);
+	registerWorkletScreen({
+		screenKey: params.screenKey,
+		parentScreenKey: params.parentScreenKey,
+	});
+	boundsScreens.modify(<T extends typeof boundsScreens.value>(state: T): T => {
+		"worklet";
+		(state as typeof boundsScreens.value)[params.screenKey] = node;
+		return state;
+	});
 
 	const state = pairs.get();
 	for (const pairKey in state) {
@@ -201,7 +208,12 @@ export function registerScreen(params: RegisterScreenParams) {
 
 export function unregisterScreen(screenKey: ScreenKey) {
 	"worklet";
-	unregisterBoundsScreen(screenKey);
+	unregisterWorkletScreen(screenKey);
+	boundsScreens.modify(<T extends typeof boundsScreens.value>(state: T): T => {
+		"worklet";
+		delete state[screenKey];
+		return state;
+	});
 }
 
 export function registerBoundary({

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

@@ -1,4 +1,5 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
+import { screenBelongsToScope } from "../../../factories/screen-topology";
 import {
 	createGroupTag,
 	ensurePairGroups,
@@ -23,7 +24,6 @@ import type {
 	TagID,
 	TagLink,
 } from "../types";
-import { screenBelongsToScope } from "./screen-graph";
 import { pairs } from "./state";
 
 const syncLinkStatus = (link: TagLink) => {

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

@@ -38,5 +38,5 @@ export const boundaryRegistry = makeMutable<BoundaryEntriesState>({});
  */
 export const pairs = makeMutable<LinkPairsState>({});
 
-/** Stable ownership graph used to match leaf boundaries to transition roots. */
+/** Bounds-only runtime values keyed by screen. Relationships live in topology. */
 export const boundsScreens = makeMutable<BoundsScreenState>({});

package/src/shared/stores/bounds/types.ts

@@ -143,7 +143,6 @@ export type LinkPairState = {
 export type LinkPairsState = Record<ScreenPairKey, LinkPairState>;
 
 export type BoundsScreenNode = {
-	parentScreenKey?: ScreenKey;
 	animationProgress: SharedValue<number>;
 	pendingLifecycleStartBlockCount: SharedValue<number>;
 };

package/src/shared/types/providers/blank-stack-provider.types.ts

@@ -36,6 +36,7 @@ export interface BlankStackStoreValue<
 	routes: TDescriptor["route"][];
 	scenes: BaseStackScene<TDescriptor>[];
 	scenesByKey: Record<string, BaseStackScene<TDescriptor>>;
+	paintDriverRouteKeyByRouteKey: ReadonlyMap<string, string>;
 	focusedIndex: number;
 	requestDismiss: (payload: { route: BaseStackRoute }) => boolean;
 	shouldShowFloatOverlay: boolean;

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

@@ -180,16 +180,6 @@ export type ScreenTransitionConfig = {
 	 */
 	screenStyleInterpolator?: ScreenStyleInterpolator;
 
-	/**
-	 * Allows this screen's interpolator to keep updating while the screen is
-	 * inactive. This is useful for flows that intentionally animate screens more
-	 * than one level behind the active route with values such as `stackProgress`.
-	 *
-	 * @experimental This API may change in future versions.
-	 * @default false
-	 */
-	experimental_updateInactiveInterpolators?: boolean;
-
 	/**
 	 * The Reanimated animation config for opening and closing transitions.
 	 */