react-native-screen-transitions 3.0.0-rc.3 → 3.0.0-rc.4

package/src/blank-stack/components/stack-view.tsx

@@ -7,8 +7,9 @@ import * as React from "react";
 import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { ScreenContainer } from "react-native-screens";
-import { BlankStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
+import { BlankStackScreenLifecycleController } from "../../shared/components/controllers/blank-stack-lifecycle";
 import { FlagsProvider } from "../../shared/providers/flags.provider";
+import { RoutesProvider } from "../../shared/providers/routes.provider";
 import { ScreenTransitionProvider } from "../../shared/providers/screen-transition.provider";
 import type { BlankStackDescriptor } from "../types";
 import { withStackNavigationProvider } from "../utils/with-stack-navigation";
@@ -45,55 +46,65 @@ export const StackView = withStackNavigationProvider(
 		scenes,
 		shouldShowFloatOverlay,
 	}) => {
+		// Memoize route keys array for ScenesProvider
+		const routeKeys = React.useMemo(
+			() => routes.map((route) => route.key),
+			[routes],
+		);
+
 		return (
 			<FlagsProvider TRANSITIONS_ALWAYS_ON>
-				<GestureHandlerRootView>
-					<SafeAreaProviderCompat>
-						{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-						<ScreenContainer style={styles.container}>
-							{scenes.map((scene, sceneIndex) => {
-								const descriptor = scene.descriptor;
-								const route = scene.route;
-								const isFocused = focusedIndex === sceneIndex;
-								const isBelowFocused = focusedIndex - 1 === sceneIndex;
+				<RoutesProvider routeKeys={routeKeys}>
+					<GestureHandlerRootView>
+						<SafeAreaProviderCompat>
+							{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+							<ScreenContainer style={styles.container}>
+								{scenes.map((scene, sceneIndex) => {
+									const descriptor = scene.descriptor;
+									const route = scene.route;
+									const isFocused = focusedIndex === sceneIndex;
+									const isBelowFocused = focusedIndex - 1 === sceneIndex;
 
-								const previousDescriptor =
-									scenes[sceneIndex - 1]?.descriptor ?? undefined;
-								const nextDescriptor =
-									scenes[sceneIndex + 1]?.descriptor ?? undefined;
+									const previousDescriptor =
+										scenes[sceneIndex - 1]?.descriptor ?? undefined;
+									const nextDescriptor =
+										scenes[sceneIndex + 1]?.descriptor ?? undefined;
 
-								const isPreloaded = descriptors[route.key] === undefined;
+									const isPreloaded = descriptors[route.key] === undefined;
 
-								// On Fabric, when screen is frozen, animated and reanimated values are not updated
-								// due to component being unmounted. To avoid this, we don't freeze the previous screen there
-								const shouldFreeze = isFabric()
-									? !isPreloaded && !isFocused && !isBelowFocused
-									: !isPreloaded && !isFocused;
-								return (
-									<Screen
-										key={route.key}
-										isPreloaded={isPreloaded}
-										index={sceneIndex}
-										activeScreensLimit={activeScreensLimit}
-										routeKey={route.key}
-										routesLength={routes.length}
-										shouldFreeze={shouldFreeze}
-										freezeOnBlur={descriptor.options.freezeOnBlur}
-									>
-										<ScreenTransitionProvider
-											previous={previousDescriptor}
-											current={descriptor}
-											next={nextDescriptor}
-											LifecycleController={BlankStackScreenLifecycleController}
+									// On Fabric, when screen is frozen, animated and reanimated values are not updated
+									// due to component being unmounted. To avoid this, we don't freeze the previous screen there
+									const shouldFreeze = isFabric()
+										? !isPreloaded && !isFocused && !isBelowFocused
+										: !isPreloaded && !isFocused;
+									return (
+										<Screen
+											key={route.key}
+											isPreloaded={isPreloaded}
+											index={sceneIndex}
+											activeScreensLimit={activeScreensLimit}
+											routeKey={route.key}
+											routesLength={routes.length}
+											shouldFreeze={shouldFreeze}
+											freezeOnBlur={descriptor.options.freezeOnBlur}
 										>
-											<SceneView key={route.key} descriptor={descriptor} />
-										</ScreenTransitionProvider>
-									</Screen>
-								);
-							})}
-						</ScreenContainer>
-					</SafeAreaProviderCompat>
-				</GestureHandlerRootView>
+											<ScreenTransitionProvider
+												previous={previousDescriptor}
+												current={descriptor}
+												next={nextDescriptor}
+												LifecycleController={
+													BlankStackScreenLifecycleController
+												}
+											>
+												<SceneView key={route.key} descriptor={descriptor} />
+											</ScreenTransitionProvider>
+										</Screen>
+									);
+								})}
+							</ScreenContainer>
+						</SafeAreaProviderCompat>
+					</GestureHandlerRootView>
+				</RoutesProvider>
 			</FlagsProvider>
 		);
 	},

package/src/blank-stack/types.ts

@@ -18,29 +18,7 @@ import type {
 	ScreenInterpolationProps,
 } from "../shared/types/animation.types";
 
-export type BlankStackNavigationEventMap = {
-	/**
-	 * Event which fires when a transition animation starts.
-	 */
-	transitionStart: { data: { closing: boolean } };
-	/**
-	 * Event which fires when a transition animation ends.
-	 */
-	transitionEnd: { data: { closing: boolean } };
-	/**
-	 * Event which fires when a swipe back is canceled on iOS.
-	 */
-	gestureCancel: { data: undefined };
-	/**
-	 * Event which fires when screen is in sheet presentation & it's detent changes.
-	 *
-	 * In payload it caries two fields:
-	 *
-	 * * `index` - current detent index in the `sheetAllowedDetents` array,
-	 * * `stable` - on Android `false` value means that the user is dragging the sheet or it is settling; on iOS it is always `true`.
-	 */
-	sheetDetentChange: { data: { index: number; stable: boolean } };
-};
+export type BlankStackNavigationEventMap = {};
 
 export type BlankStackNavigationProp<
 	ParamList extends ParamListBase,
@@ -132,7 +110,6 @@ export type BlankStackScreenTransitionConfig = ScreenTransitionConfig & {
 	 * Whether to detach the previous screen from the view hierarchy to save memory.
 	 * Set it to `false` if you need the previous screen to be seen through the active screen.
 	 * Only applicable if `detachInactiveScreens` isn't set to `false`.
-	 * Defaults to `false` for the last screen for modals, otherwise `true`.
 	 */
 	detachPreviousScreen?: boolean;
 };

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

@@ -33,7 +33,8 @@ import {
 	ScreenStack,
 	ScreenStackItem,
 } from "react-native-screens";
-import { NativeStackScreenLifecycleController } from "../../shared/components/controllers/screen-lifecycle";
+import { NativeStackScreenLifecycleController } from "../../shared/components/controllers/native-stack-lifecycle";
+import { RoutesProvider } from "../../shared/providers/routes.provider";
 import { ScreenTransitionProvider } from "../../shared/providers/screen-transition.provider";
 import type {
 	NativeStackDescriptor,
@@ -515,118 +516,126 @@ export function NativeStackView({
 
 	const routes = state.routes.concat(state.preloadedRoutes);
 
+	// Memoize route keys array for RoutesProvider
+	const routeKeys = React.useMemo(
+		() => routes.map((route) => route.key),
+		[routes],
+	);
+
 	return (
-		<GestureHandlerRootView>
-			<SafeAreaProviderCompat>
-				<ScreenStack style={styles.container}>
-					{routes.map((route, index) => {
-						const descriptor =
-							descriptors[route.key] ?? preloadedDescriptors[route.key];
-						const isFocused = state.index === index;
-						const isBelowFocused = state.index - 1 === index;
-						const previousKey = state.routes[index - 1]?.key;
-						const nextKey = state.routes[index + 1]?.key;
-						const previousDescriptor = previousKey
-							? descriptors[previousKey]
-							: undefined;
-						const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
-
-						const isModal = modalRouteKeys.includes(route.key);
-
-						const isPreloaded =
-							preloadedDescriptors[route.key] !== undefined &&
-							descriptors[route.key] === undefined;
-
-						// On Fabric, when screen is frozen, animated and reanimated values are not updated
-						// due to component being unmounted. To avoid this, we don't freeze the previous screen there
-						const shouldFreeze = isFabric()
-							? !isPreloaded && !isFocused && !isBelowFocused
-							: !isPreloaded && !isFocused;
-
-						return (
-							<SceneView
-								key={route.key}
-								index={index}
-								focused={isFocused}
-								shouldFreeze={shouldFreeze}
-								descriptor={descriptor}
-								previousDescriptor={previousDescriptor}
-								nextDescriptor={nextDescriptor}
-								isPresentationModal={isModal}
-								isPreloaded={isPreloaded}
-								onWillDisappear={() => {
-									navigation.emit({
-										type: "transitionStart",
-										data: { closing: true },
-										target: route.key,
-									});
-								}}
-								onWillAppear={() => {
-									navigation.emit({
-										type: "transitionStart",
-										data: { closing: false },
-										target: route.key,
-									});
-								}}
-								onAppear={() => {
-									navigation.emit({
-										type: "transitionEnd",
-										data: { closing: false },
-										target: route.key,
-									});
-								}}
-								onDisappear={() => {
-									navigation.emit({
-										type: "transitionEnd",
-										data: { closing: true },
-										target: route.key,
-									});
-								}}
-								onDismissed={(event) => {
-									navigation.dispatch({
-										...StackActions.pop(event.nativeEvent.dismissCount),
-										source: route.key,
-										target: state.key,
-									});
-
-									setNextDismissedKey(route.key);
-								}}
-								onHeaderBackButtonClicked={() => {
-									navigation.dispatch({
-										...StackActions.pop(),
-										source: route.key,
-										target: state.key,
-									});
-								}}
-								onNativeDismissCancelled={(event) => {
-									navigation.dispatch({
-										...StackActions.pop(event.nativeEvent.dismissCount),
-										source: route.key,
-										target: state.key,
-									});
-								}}
-								onGestureCancel={() => {
-									navigation.emit({
-										type: "gestureCancel",
-										target: route.key,
-									});
-								}}
-								onSheetDetentChanged={(event) => {
-									navigation.emit({
-										type: "sheetDetentChange",
-										target: route.key,
-										data: {
-											index: event.nativeEvent.index,
-											stable: event.nativeEvent.isStable,
-										},
-									});
-								}}
-							/>
-						);
-					})}
-				</ScreenStack>
-			</SafeAreaProviderCompat>
-		</GestureHandlerRootView>
+		<RoutesProvider routeKeys={routeKeys}>
+			<GestureHandlerRootView>
+				<SafeAreaProviderCompat>
+					<ScreenStack style={styles.container}>
+						{routes.map((route, index) => {
+							const descriptor =
+								descriptors[route.key] ?? preloadedDescriptors[route.key];
+							const isFocused = state.index === index;
+							const isBelowFocused = state.index - 1 === index;
+							const previousKey = state.routes[index - 1]?.key;
+							const nextKey = state.routes[index + 1]?.key;
+							const previousDescriptor = previousKey
+								? descriptors[previousKey]
+								: undefined;
+							const nextDescriptor = nextKey ? descriptors[nextKey] : undefined;
+
+							const isModal = modalRouteKeys.includes(route.key);
+
+							const isPreloaded =
+								preloadedDescriptors[route.key] !== undefined &&
+								descriptors[route.key] === undefined;
+
+							// On Fabric, when screen is frozen, animated and reanimated values are not updated
+							// due to component being unmounted. To avoid this, we don't freeze the previous screen there
+							const shouldFreeze = isFabric()
+								? !isPreloaded && !isFocused && !isBelowFocused
+								: !isPreloaded && !isFocused;
+
+							return (
+								<SceneView
+									key={route.key}
+									index={index}
+									focused={isFocused}
+									shouldFreeze={shouldFreeze}
+									descriptor={descriptor}
+									previousDescriptor={previousDescriptor}
+									nextDescriptor={nextDescriptor}
+									isPresentationModal={isModal}
+									isPreloaded={isPreloaded}
+									onWillDisappear={() => {
+										navigation.emit({
+											type: "transitionStart",
+											data: { closing: true },
+											target: route.key,
+										});
+									}}
+									onWillAppear={() => {
+										navigation.emit({
+											type: "transitionStart",
+											data: { closing: false },
+											target: route.key,
+										});
+									}}
+									onAppear={() => {
+										navigation.emit({
+											type: "transitionEnd",
+											data: { closing: false },
+											target: route.key,
+										});
+									}}
+									onDisappear={() => {
+										navigation.emit({
+											type: "transitionEnd",
+											data: { closing: true },
+											target: route.key,
+										});
+									}}
+									onDismissed={(event) => {
+										navigation.dispatch({
+											...StackActions.pop(event.nativeEvent.dismissCount),
+											source: route.key,
+											target: state.key,
+										});
+
+										setNextDismissedKey(route.key);
+									}}
+									onHeaderBackButtonClicked={() => {
+										navigation.dispatch({
+											...StackActions.pop(),
+											source: route.key,
+											target: state.key,
+										});
+									}}
+									onNativeDismissCancelled={(event) => {
+										navigation.dispatch({
+											...StackActions.pop(event.nativeEvent.dismissCount),
+											source: route.key,
+											target: state.key,
+										});
+									}}
+									onGestureCancel={() => {
+										navigation.emit({
+											type: "gestureCancel",
+											target: route.key,
+										});
+									}}
+									onSheetDetentChanged={(event) => {
+										navigation.emit({
+											type: "sheetDetentChange",
+											target: route.key,
+											data: {
+												index: event.nativeEvent.index,
+												stable: event.nativeEvent.isStable,
+											},
+										});
+									}}
+								/>
+							);
+						})}
+					</ScreenStack>
+				</SafeAreaProviderCompat>
+			</GestureHandlerRootView>
+		</RoutesProvider>
 	);
 }
 

package/src/shared/__tests__/bounds.store.test.ts

@@ -45,12 +45,8 @@ describe("BoundStore.registerSnapshot", () => {
 		BoundStore.registerSnapshot("card", "screen-a", boundsA);
 		BoundStore.registerSnapshot("card", "screen-b", boundsB);
 
-		expect(BoundStore.getSnapshot("card", "screen-a")?.bounds).toEqual(
-			boundsA,
-		);
-		expect(BoundStore.getSnapshot("card", "screen-b")?.bounds).toEqual(
-			boundsB,
-		);
+		expect(BoundStore.getSnapshot("card", "screen-a")?.bounds).toEqual(boundsA);
+		expect(BoundStore.getSnapshot("card", "screen-b")?.bounds).toEqual(boundsB);
 	});
 
 	it("stores ancestorKeys correctly", () => {
@@ -192,13 +188,9 @@ describe("BoundStore.getSnapshot", () => {
 		const ancestorBounds = createBounds(200, 200, 50, 50);
 
 		// Register with ancestor that matches another screen's key
-		BoundStore.registerSnapshot(
-			"card",
-			"screen-a",
-			ancestorBounds,
-			{},
-			["stack-a"],
-		);
+		BoundStore.registerSnapshot("card", "screen-a", ancestorBounds, {}, [
+			"stack-a",
+		]);
 		BoundStore.registerSnapshot("card", "stack-a", directBounds);
 
 		// Direct match should win
@@ -242,32 +234,23 @@ describe("BoundStore.getActiveLink", () => {
 
 		// Query from source screen = closing (going back)
 		const linkFromSource = BoundStore.getActiveLink("card", "screen-a");
-		expect(linkFromSource?.isClosing).toBe(true);
 		expect(linkFromSource?.source.screenKey).toBe("screen-a");
 
 		// Query from destination screen = opening
 		const linkFromDest = BoundStore.getActiveLink("card", "screen-b");
-		expect(linkFromDest?.isClosing).toBe(false);
 		expect(linkFromDest?.destination?.screenKey).toBe("screen-b");
 	});
 
 	it("ancestor matching works in link lookup", () => {
 		const ancestors = ["stack-a"];
 
-		BoundStore.setLinkSource(
-			"card",
-			"screen-a",
-			createBounds(),
-			{},
-			ancestors,
-		);
+		BoundStore.setLinkSource("card", "screen-a", createBounds(), {}, ancestors);
 		BoundStore.setLinkDestination("card", "screen-b", createBounds());
 
 		// Query by ancestor key (matches source)
 		const link = BoundStore.getActiveLink("card", "stack-a");
 		expect(link).not.toBeNull();
 		expect(link?.source.screenKey).toBe("screen-a");
-		expect(link?.isClosing).toBe(true); // Ancestor of source = closing
 	});
 
 	it("returns null when screenKey does not match any link", () => {
@@ -296,13 +279,11 @@ describe("Scenario: Simple push/pop navigation", () => {
 
 		// Verify link is complete - query from destination (opening)
 		const openingLink = BoundStore.getActiveLink("card", "screen-b");
-		expect(openingLink?.isClosing).toBe(false);
 		expect(openingLink?.source.bounds).toEqual(srcBounds);
 		expect(openingLink?.destination?.bounds).toEqual(dstBounds);
 
 		// 3. Query from source (closing - going back)
 		const closingLink = BoundStore.getActiveLink("card", "screen-a");
-		expect(closingLink?.isClosing).toBe(true);
 		expect(closingLink?.source.screenKey).toBe("screen-a");
 		expect(closingLink?.destination?.screenKey).toBe("screen-b");
 	});
@@ -355,19 +336,14 @@ describe("Scenario: Nested navigator with ancestor keys", () => {
 
 	it("getActiveLink respects ancestor chain", () => {
 		// Navigation from Stack A to detail screen
-		BoundStore.setLinkSource(
-			"profile",
-			"a1",
-			createBounds(10, 10),
-			{},
-			["stack-a"],
-		);
+		BoundStore.setLinkSource("profile", "a1", createBounds(10, 10), {}, [
+			"stack-a",
+		]);
 		BoundStore.setLinkDestination("profile", "detail", createBounds(0, 0));
 
 		// Query by ancestor should find the link
 		const link = BoundStore.getActiveLink("profile", "stack-a");
 		expect(link?.source.screenKey).toBe("a1");
-		expect(link?.isClosing).toBe(true); // Ancestor matches source = closing
 	});
 });
 
@@ -388,12 +364,10 @@ describe("Scenario: Rapid navigation A → B → C → pop → pop", () => {
 
 		// Query from C (destination of B→C) = opening
 		const fromC = BoundStore.getActiveLink("card", "screen-c");
-		expect(fromC?.isClosing).toBe(false);
 		expect(fromC?.destination?.screenKey).toBe("screen-c");
 
 		// Query from B - B is source of B→C link, so isClosing=true
 		const fromB = BoundStore.getActiveLink("card", "screen-b");
-		expect(fromB?.isClosing).toBe(true);
 		expect(fromB?.source.screenKey).toBe("screen-b");
 	});
 });
@@ -401,7 +375,11 @@ describe("Scenario: Rapid navigation A → B → C → pop → pop", () => {
 describe("Scenario: Global bounds (fullscreen target)", () => {
 	it("getActiveLink with no screenKey returns most recent for fullscreen", () => {
 		// Source exists, destination will be fullscreen (no specific screenKey needed)
-		BoundStore.setLinkSource("image", "gallery", createBounds(50, 50, 100, 100));
+		BoundStore.setLinkSource(
+			"image",
+			"gallery",
+			createBounds(50, 50, 100, 100),
+		);
 		BoundStore.setLinkDestination(
 			"image",
 			"fullscreen-viewer",

package/src/shared/components/controllers/blank-stack-lifecycle.tsx

@@ -0,0 +1,70 @@
+import { useLayoutEffect } from "react";
+import { useAnimatedReaction } from "react-native-reanimated";
+import type { BlankStackDescriptor } from "../../../blank-stack/types";
+import { useStackNavigationContext } from "../../../blank-stack/utils/with-stack-navigation";
+import useStableCallback from "../../hooks/use-stable-callback";
+import { useKeys } from "../../providers/keys.provider";
+import { AnimationStore } from "../../stores/animation.store";
+import { startScreenTransition } from "../../utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../../utils/reset-stores-for-screen";
+
+export interface Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Lifecycle controller built out for Blank Stack implementation.
+ */
+export const BlankStackScreenLifecycleController = ({ children }: Props) => {
+	const { current } = useKeys<BlankStackDescriptor>();
+	const { handleCloseRoute, closingRouteKeysShared } =
+		useStackNavigationContext();
+
+	const animations = AnimationStore.getAll(current.route.key);
+
+	const handleInitialize = useStableCallback(() => {
+		startScreenTransition({
+			target: "open",
+			spec: current.options.transitionSpec,
+			animations,
+		});
+	});
+
+	const handleCleanup = useStableCallback(() => {
+		resetStoresForScreen(current);
+	});
+
+	const handleCloseEnd = useStableCallback((finished: boolean) => {
+		if (!finished) {
+			return;
+		}
+		handleCloseRoute({ route: current.route });
+	});
+
+	useAnimatedReaction(
+		() => ({
+			keys: closingRouteKeysShared.value,
+		}),
+		({ keys }) => {
+			if (!keys.includes(current.route.key)) {
+				return;
+			}
+
+			startScreenTransition({
+				target: "close",
+				spec: current.options.transitionSpec,
+				animations,
+				onAnimationFinish: handleCloseEnd,
+			});
+		},
+	);
+
+	useLayoutEffect(() => {
+		handleInitialize();
+		return () => {
+			handleCleanup();
+		};
+	}, [handleInitialize, handleCleanup]);
+
+	return children;
+};