react-native-screen-transitions 3.9.0 → 3.11.0

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

@@ -1,8 +1,10 @@
 import {
 	NavigationContext,
+	type NavigationProp,
 	NavigationRouteContext,
+	type ParamListBase,
 } from "@react-navigation/native";
-import { memo } from "react";
+import { memo, type ReactNode } from "react";
 import {
 	ActivityContainer,
 	ActivityScreen,
@@ -10,72 +12,126 @@ import {
 import { PortalProvider } from "../../shared/components/boundary/portal";
 import { Overlay } from "../../shared/components/overlay";
 import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
-import { withBlankStack } from "../../shared/providers/stack/blank-stack.provider";
-import { withStackCore } from "../../shared/providers/stack/core.provider";
-import type { BaseStackScene } from "../../shared/types/stack.types";
+import {
+	BlankStackProvider,
+	useBlankStackStore,
+} from "../../shared/providers/stack/blank-stack.provider";
+import {
+	type StackCoreConfig,
+	StackCoreProvider,
+} from "../../shared/providers/stack/core.provider";
+import type { BlankStackProviderProps } from "../../shared/types/providers/blank-stack-provider.types";
 import type {
 	BlankStackDescriptor,
 	BlankStackNavigationHelpers,
 } from "../types";
 
-interface BlankSceneRowProps {
-	scene: BaseStackScene<BlankStackDescriptor>;
-	paintDriverRouteKey?: string;
+interface RouteKeyProps {
+	routeKey: string;
 }
 
-const BlankSceneRow = memo(function BlankSceneRow({
-	scene,
-	paintDriverRouteKey,
-}: BlankSceneRowProps) {
-	const descriptor = scene.descriptor;
-	const route = scene.route;
+const BlankNavigationProvider = memo(function BlankNavigationProvider({
+	children,
+	routeKey,
+}: RouteKeyProps & { children: ReactNode }) {
+	const navigation = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.descriptor.navigation,
+	) as NavigationProp<ParamListBase> | undefined;
+	const route = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.route,
+	);
+
+	if (!navigation || !route) {
+		throw new Error(`Blank stack scene "${routeKey}" was not found.`);
+	}
 
 	return (
-		<NavigationContext.Provider value={descriptor.navigation}>
+		<NavigationContext.Provider value={navigation}>
 			<NavigationRouteContext.Provider value={route}>
-				<ActivityScreen
-					activity={descriptor.activity}
-					inactiveBehavior={descriptor.options.inactiveBehavior}
-					paintDriverRouteKey={paintDriverRouteKey}
-					hasNestedState={"state" in route}
-				>
-					<ScreenComposer
-						previous={scene.previousDescriptor}
-						current={descriptor}
-						next={scene.nextDescriptor}
-					>
-						{descriptor.render?.()}
-					</ScreenComposer>
-				</ActivityScreen>
+				{children}
 			</NavigationRouteContext.Provider>
 		</NavigationContext.Provider>
 	);
 });
 
-export const StackView = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: false },
-	withBlankStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
-		({ scenes, shouldShowFloatOverlay }) => {
-			return (
-				<PortalProvider>
-					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+const BlankSceneContent = memo(function BlankSceneContent({
+	routeKey,
+}: RouteKeyProps) {
+	const render = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.descriptor.render,
+	);
+
+	return render?.() ?? null;
+});
+
+const BlankSceneRow = memo(function BlankSceneRow({ routeKey }: RouteKeyProps) {
+	return (
+		<BlankNavigationProvider routeKey={routeKey}>
+			<ActivityScreen routeKey={routeKey}>
+				<ScreenComposer routeKey={routeKey}>
+					<BlankSceneContent routeKey={routeKey} />
+				</ScreenComposer>
+			</ActivityScreen>
+		</BlankNavigationProvider>
+	);
+});
+
+const StackViewContent = memo(function StackViewContent() {
+	const routeKeys = useBlankStackStore(
+		(store) => store?.routeKeys ?? EMPTY_ROUTE_KEYS,
+	);
+	const shouldShowFloatOverlay = useBlankStackStore(
+		(store) => store?.shouldShowFloatOverlay ?? false,
+	);
+
+	return (
+		<PortalProvider>
+			{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+
+			<ActivityContainer>
+				{routeKeys.map((routeKey) => (
+					<BlankSceneRow key={routeKey} routeKey={routeKey} />
+				))}
+			</ActivityContainer>
+		</PortalProvider>
+	);
+});
+
+const EMPTY_ROUTE_KEYS: string[] = [];
 
-					<ActivityContainer>
-						{scenes.map((scene, index) => {
-							const route = scene.route;
-							const paintDriverRouteKey = scenes[index + 2]?.route.key;
+type StackViewProps = BlankStackProviderProps<
+	BlankStackDescriptor,
+	BlankStackNavigationHelpers
+> &
+	StackCoreConfig;
 
-							return (
-								<BlankSceneRow
-									key={route.key}
-									scene={scene}
-									paintDriverRouteKey={paintDriverRouteKey}
-								/>
-							);
-						})}
-					</ActivityContainer>
-				</PortalProvider>
-			);
-		},
-	),
-);
+export const StackView = memo(function StackView({
+	DISABLE_NATIVE_SCREENS,
+	DISABLE_NATIVE_SCREEN_CONTAINER,
+	TRANSITIONS_ALWAYS_ON,
+	STACK_TYPE,
+	state,
+	navigation,
+	descriptors,
+	describe,
+}: StackViewProps) {
+	return (
+		<StackCoreProvider
+			config={{
+				TRANSITIONS_ALWAYS_ON: TRANSITIONS_ALWAYS_ON ?? true,
+				STACK_TYPE,
+				DISABLE_NATIVE_SCREENS: DISABLE_NATIVE_SCREENS ?? false,
+				DISABLE_NATIVE_SCREEN_CONTAINER,
+			}}
+		>
+			<BlankStackProvider
+				state={state}
+				navigation={navigation}
+				descriptors={descriptors}
+				describe={describe}
+			>
+				<StackViewContent />
+			</BlankStackProvider>
+		</StackCoreProvider>
+	);
+});

package/src/blank-stack/types.ts

@@ -12,7 +12,6 @@ import type {
 } from "@react-navigation/native";
 import type { InactiveBehavior, ScreenTransitionConfig } from "../shared";
 import type { OverlayProps } from "../shared/types/overlay.types";
-import type { StackSceneActivity } from "../shared/types/stack.types";
 
 export type { InactiveBehavior } from "../shared";
 
@@ -143,6 +142,4 @@ export type BlankStackDescriptor = Descriptor<
 	BlankStackNavigationOptions,
 	BlankStackNavigationProp<ParamListBase>,
 	RouteProp<ParamListBase>
-> & {
-	activity: StackSceneActivity;
-};
+>;

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

@@ -1,9 +1,16 @@
-import { Fragment } from "react";
+import { Fragment, memo } from "react";
 import { Overlay } from "../../shared/components/overlay";
 import { SceneView } from "../../shared/components/scene-view";
 import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
-import { withBlankStack } from "../../shared/providers/stack/blank-stack.provider";
-import { withStackCore } from "../../shared/providers/stack/core.provider";
+import {
+	BlankStackProvider,
+	useBlankStackStore,
+} from "../../shared/providers/stack/blank-stack.provider";
+import {
+	type StackCoreConfig,
+	StackCoreProvider,
+} from "../../shared/providers/stack/core.provider";
+import type { BlankStackProviderProps } from "../../shared/types/providers/blank-stack-provider.types";
 import { StackType } from "../../shared/types/stack.types";
 import type {
 	ComponentStackDescriptor,
@@ -11,32 +18,89 @@ import type {
 } from "../types";
 import { ComponentScreen } from "./component-screen";
 
-export const StackView = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: true, STACK_TYPE: StackType.COMPONENT },
-	withBlankStack<ComponentStackDescriptor, ComponentStackNavigationHelpers>(
-		({ scenes, shouldShowFloatOverlay }) => {
-			return (
-				<Fragment>
-					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-
-					{scenes.map((scene) => {
-						const descriptor = scene.descriptor;
-						const route = scene.route;
-
-						return (
-							<ComponentScreen key={route.key} routeKey={route.key}>
-								<ScreenComposer
-									previous={scene.previousDescriptor}
-									current={descriptor}
-									next={scene.nextDescriptor}
-								>
-									<SceneView key={route.key} descriptor={descriptor} />
-								</ScreenComposer>
-							</ComponentScreen>
-						);
-					})}
-				</Fragment>
-			);
-		},
-	),
-);
+const EMPTY_ROUTE_KEYS: string[] = [];
+
+const ComponentSceneContent = memo(function ComponentSceneContent({
+	routeKey,
+}: {
+	routeKey: string;
+}) {
+	const descriptor = useBlankStackStore(
+		(store) => store?.scenesByKey[routeKey]?.descriptor,
+	) as ComponentStackDescriptor | undefined;
+
+	if (!descriptor) {
+		throw new Error(`Component stack scene "${routeKey}" was not found.`);
+	}
+
+	return <SceneView descriptor={descriptor} />;
+});
+
+const ComponentSceneRow = memo(function ComponentSceneRow({
+	routeKey,
+}: {
+	routeKey: string;
+}) {
+	return (
+		<ComponentScreen routeKey={routeKey}>
+			<ScreenComposer routeKey={routeKey}>
+				<ComponentSceneContent routeKey={routeKey} />
+			</ScreenComposer>
+		</ComponentScreen>
+	);
+});
+
+const StackViewContent = memo(function StackViewContent() {
+	const routeKeys = useBlankStackStore(
+		(store) => store?.routeKeys ?? EMPTY_ROUTE_KEYS,
+	);
+	const shouldShowFloatOverlay = useBlankStackStore(
+		(store) => store?.shouldShowFloatOverlay ?? false,
+	);
+
+	return (
+		<Fragment>
+			{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+
+			{routeKeys.map((routeKey) => (
+				<ComponentSceneRow key={routeKey} routeKey={routeKey} />
+			))}
+		</Fragment>
+	);
+});
+
+type StackViewProps = BlankStackProviderProps<
+	ComponentStackDescriptor,
+	ComponentStackNavigationHelpers
+> &
+	StackCoreConfig;
+
+export const StackView = memo(function StackView({
+	DISABLE_NATIVE_SCREENS,
+	DISABLE_NATIVE_SCREEN_CONTAINER,
+	TRANSITIONS_ALWAYS_ON,
+	state,
+	navigation,
+	descriptors,
+	describe,
+}: StackViewProps) {
+	return (
+		<StackCoreProvider
+			config={{
+				TRANSITIONS_ALWAYS_ON: TRANSITIONS_ALWAYS_ON ?? true,
+				STACK_TYPE: StackType.COMPONENT,
+				DISABLE_NATIVE_SCREENS,
+				DISABLE_NATIVE_SCREEN_CONTAINER,
+			}}
+		>
+			<BlankStackProvider
+				state={state}
+				navigation={navigation}
+				descriptors={descriptors}
+				describe={describe}
+			>
+				<StackViewContent />
+			</BlankStackProvider>
+		</StackCoreProvider>
+	);
+});

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

@@ -30,10 +30,11 @@ import {
 } from "react-native-screens";
 import { Overlay } from "../../shared/components/overlay";
 import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
-import { withStackCore } from "../../shared/providers/stack/core.provider";
+import { StackCoreProvider } from "../../shared/providers/stack/core.provider";
 import {
-	type DirectStackContextValue,
-	withDirectStack,
+	type DirectStackProps,
+	DirectStackProvider,
+	useDirectStackStore,
 } from "../../shared/providers/stack/direct.provider";
 import { StackType } from "../../shared/types/stack.types";
 import { isFabric } from "../../shared/utils/platform";
@@ -478,133 +479,143 @@ const SceneView = ({
 	);
 };
 
-export const NativeStackView = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE },
-	withDirectStack(function NativeStackViewContent({
+function NativeStackViewContent() {
+	const {
 		state,
 		navigation,
 		descriptors,
 		scenes,
 		focusedIndex,
 		shouldShowFloatOverlay,
-	}: DirectStackContextValue) {
-		const { setNextDismissedKey } = useDismissedRouteError(state);
-
-		useInvalidPreventRemoveError(descriptors);
-
-		const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
-
-		return (
-			<>
-				{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-				<ScreenStack style={styles.container}>
-					{scenes.map((scene, index) => {
-						const { route, descriptor, isPreloaded } = scene;
-						const isFocused = focusedIndex === index;
-						const isBelowFocused = focusedIndex - 1 === index;
-
-						// Get previous/next descriptors from state.routes (not scenes) for proper navigation
-						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);
-
-						// 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>
-			</>
-		);
-	}),
-);
+	} = useDirectStackStore();
+	const { setNextDismissedKey } = useDismissedRouteError(state);
+
+	useInvalidPreventRemoveError(descriptors);
+
+	const modalRouteKeys = getModalRouteKeys(state.routes, descriptors);
+
+	return (
+		<>
+			{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+			<ScreenStack style={styles.container}>
+				{scenes.map((scene, index) => {
+					const { route, descriptor, isPreloaded } = scene;
+					const isFocused = focusedIndex === index;
+					const isBelowFocused = focusedIndex - 1 === index;
+
+					// Get previous/next descriptors from state.routes (not scenes) for proper navigation
+					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);
+
+					// 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>
+		</>
+	);
+}
+
+export function NativeStackView(props: DirectStackProps) {
+	return (
+		<StackCoreProvider
+			config={{ TRANSITIONS_ALWAYS_ON: false, STACK_TYPE: StackType.NATIVE }}
+		>
+			<DirectStackProvider {...props}>
+				<NativeStackViewContent />
+			</DirectStackProvider>
+		</StackCoreProvider>
+	);
+}
 
 const styles = StyleSheet.create({
 	container: {

package/src/shared/adapters/with-screen-transitions/context.tsx

@@ -10,6 +10,7 @@ export type ScreenTransitionsAdapterScene =
 export interface ScreenTransitionsAdapterContextValue {
 	routeIndexByKey: ReadonlyMap<string, number>;
 	scenes: ScreenTransitionsAdapterScene[];
+	scenesByKey?: Readonly<Record<string, ScreenTransitionsAdapterScene>>;
 }
 
 const ScreenTransitionsAdapterContext =
@@ -40,3 +41,7 @@ export function useScreenTransitionsAdapterContext() {
 	}
 	return context;
 }
+
+export function useScreenTransitionsAdapterOptionalContext() {
+	return useContext(ScreenTransitionsAdapterContext);
+}