react-native-screen-transitions 4.0.0-alpha.1 → 4.0.0-alpha.3

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

@@ -1,4 +1,4 @@
-import { type ReactNode, useContext, useLayoutEffect, useMemo } from "react";
+import { type ReactNode, useLayoutEffect, useMemo } from "react";
 import { StyleSheet } from "react-native";
 import Animated, { type SharedValue } from "react-native-reanimated";
 import type {
@@ -37,58 +37,72 @@ export type ScreenSlotContextValue = {
 	visibilityBlocked: SharedValue<boolean>;
 };
 
-export const {
-	ScreenSlotProvider,
-	ScreenSlotContext,
-	useScreenSlotContext: useScreenSlots,
-} = createProvider("ScreenSlot", {
-	guarded: true,
-})<Props, ScreenSlotContextValue>(({ children, isFloatingOverlay }) => {
-	const parentContext = useContext(ScreenSlotContext);
-	const currentScreenKey = useDescriptorsStore(
-		(s) => s.derivations.currentScreenKey,
-	);
+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 { localStylesMaps, nextInterpolatorReady } = useInterpolatedStylesMap();
+			const { animatedStyle, animatedProps, shouldBlockVisibility } =
+				useMaybeBlockVisibility(isFloatingOverlay);
 
-	const slotsMap = useResolvedStylesMap({
-		localStylesMaps,
-		ancestorStylesMap: parentContext?.slotsMap,
-	});
-	const { animatedStyle, animatedProps, shouldBlockVisibility } =
-		useMaybeBlockVisibility(isFloatingOverlay);
-	const value = useMemo(
-		() => ({
-			localStylesMaps,
-			nextInterpolatorReady,
-			slotsMap,
-			visibilityBlocked: shouldBlockVisibility,
-		}),
-		[localStylesMaps, nextInterpolatorReady, shouldBlockVisibility, slotsMap],
-	);
+			const { localStylesMaps, nextInterpolatorReady } =
+				useInterpolatedStylesMap({
+					enabled: !isFloatingOverlay,
+					visibilityBlocked: shouldBlockVisibility,
+				});
 
-	useLayoutEffect(() => {
-		registerScreenSlots(currentScreenKey, value);
+			const slotsMap = useResolvedStylesMap({
+				localStylesMaps,
+				ancestorStylesMap: parentContext?.slotsMap,
+			});
+			const value = useMemo(
+				() => ({
+					localStylesMaps,
+					nextInterpolatorReady,
+					slotsMap,
+					visibilityBlocked: shouldBlockVisibility,
+				}),
+				[
+					localStylesMaps,
+					nextInterpolatorReady,
+					shouldBlockVisibility,
+					slotsMap,
+				],
+			);
 
-		return () => {
-			unregisterScreenSlots(currentScreenKey, value);
-		};
-	}, [currentScreenKey, value]);
+			useLayoutEffect(() => {
+				registerScreenSlots(currentScreenKey, value);
 
-	return {
-		value,
-		children: (
-			<FloatingOverlayLayer enabled={isFloatingOverlay}>
-				<Animated.View
-					style={[styles.container, animatedStyle]}
-					animatedProps={animatedProps}
-				>
-					{children}
-				</Animated.View>
-			</FloatingOverlayLayer>
-		),
-	};
-});
+				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],
+			);
+
+			return {
+				value,
+				children: content,
+			};
+		},
+	);
 
 const styles = StyleSheet.create({
 	container: { flex: 1 },

package/src/providers/stack/blank-stack-state/helpers/build-blank-stack-state.ts

@@ -138,20 +138,6 @@ const getSceneActivityWindow = <
 	};
 };
 
-const withDescriptorActivityState = <TDescriptor extends BaseStackDescriptor>(
-	descriptor: StackDescriptorSource<TDescriptor>,
-	activity: StackSceneActivity,
-): TDescriptor => {
-	if (descriptor.activity === activity) {
-		return descriptor as TDescriptor;
-	}
-
-	return {
-		...descriptor,
-		activity,
-	} as TDescriptor;
-};
-
 const buildBaseScenes = <
 	TDescriptor extends BaseStackDescriptor,
 	TNavigation extends BaseStackNavigation,
@@ -207,10 +193,9 @@ const buildBaseScenes = <
 			childStateUnchanged &&
 			previousDescriptor.route === sourceDescriptor.route &&
 			previousDescriptor.navigation === sourceDescriptor.navigation &&
-			previousDescriptor.options === sourceDescriptor.options &&
-			previousDescriptor.activity === activity
+			previousDescriptor.options === sourceDescriptor.options
 				? previousDescriptor
-				: withDescriptorActivityState(sourceDescriptor, activity);
+				: (sourceDescriptor as TDescriptor);
 
 		routeKeys.push(route.key);
 		routeChildStates[route.key] = routeChildState;
@@ -222,6 +207,7 @@ const buildBaseScenes = <
 		}
 
 		scenes.push({
+			activity,
 			route: descriptor.route,
 			descriptor,
 		});
@@ -289,6 +275,7 @@ const withSceneRelationships = <TDescriptor extends BaseStackDescriptor>({
 
 		if (
 			previousScene &&
+			previousScene.activity === nextScene.activity &&
 			previousScene.route === nextScene.route &&
 			previousScene.descriptor === nextScene.descriptor &&
 			previousScene.previousDescriptor === nextScene.previousDescriptor &&

package/src/providers/stack/blank-stack.provider.tsx

@@ -1,51 +1,70 @@
 import type { Route } from "@react-navigation/native";
-import * as React from "react";
-import { useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import {
 	type StackContextValue,
 	StackProvider,
 } from "../../hooks/navigation/use-stack";
 import type {
-	BlankStackProviderContextValue,
 	BlankStackProviderProps,
-	BlankStackProviderRenderProps,
-	BlankStackProviderResult,
+	BlankStackStoreValue,
 } from "../../types/providers/blank-stack-provider.types";
 import type {
 	BaseStackDescriptor,
 	BaseStackNavigation,
 	BaseStackScene,
 } from "../../types/stack.types";
+import createProvider from "../../utils/create-provider";
 import { useBlankStackState } from "./blank-stack-state";
-import { useStackCoreContext } from "./core.provider";
+import { useStackCoreStore } from "./core.provider";
 
-const BlankStackProviderContext =
-	React.createContext<BlankStackProviderContextValue | null>(null);
-BlankStackProviderContext.displayName = "BlankStackProvider";
+type InternalBlankStackProviderProps = BlankStackProviderProps<
+	BaseStackDescriptor,
+	BaseStackNavigation
+> & {
+	children: ReactNode;
+};
+
+const createScenesByKey = <TDescriptor extends BaseStackDescriptor>(
+	scenes: BaseStackScene<TDescriptor>[],
+) => {
+	const scenesByKey: Record<string, BaseStackScene<TDescriptor>> = {};
 
-function useBlankStackContext(): BlankStackProviderContextValue {
-	const context = React.useContext(BlankStackProviderContext);
-	if (!context) {
-		throw new Error(
-			"useBlankStackContext must be used within BlankStackProvider",
-		);
+	for (const scene of scenes) {
+		scenesByKey[scene.route.key] = scene;
 	}
-	return context;
-}
 
-function useBlankStackProviderValue<
-	TDescriptor extends BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation,
->(
-	props: BlankStackProviderProps<TDescriptor, TNavigation>,
-): BlankStackProviderResult<TDescriptor> {
-	const { flags } = useStackCoreContext();
-	const { state, handleCloseRoute, requestDismiss } = useBlankStackState(props);
-	const navigatorKey = props.state.key;
+	return scenesByKey;
+};
 
-	const focusedIndex = props.state.index;
+type BlankStackStoreProviderProps = {
+	children: ReactNode;
+	value: BlankStackStoreValue<BaseStackDescriptor>;
+};
 
-	const stackContextValue = useMemo<StackContextValue>(
+const { BlankStackProvider: BlankStackStoreProvider, useBlankStackStore } =
+	createProvider("BlankStack", { guarded: false })<
+		BlankStackStoreProviderProps,
+		BlankStackStoreValue<BaseStackDescriptor>
+	>(({ children, value }) => ({ children, value }));
+
+function BlankStackProvider({
+	state: stackState,
+	children,
+	...props
+}: InternalBlankStackProviderProps) {
+	const flags = useStackCoreStore((store) => store.flags);
+	const { state, handleCloseRoute, requestDismiss } = useBlankStackState({
+		...props,
+		state: stackState,
+	});
+	const navigatorKey = stackState.key;
+	const focusedIndex = stackState.index;
+	const scenesByKey = useMemo(
+		() => createScenesByKey(state.scenes),
+		[state.scenes],
+	);
+
+	const stackValue = useMemo<StackContextValue>(
 		() => ({
 			flags,
 			navigatorKey,
@@ -65,54 +84,26 @@ function useBlankStackProviderValue<
 			requestDismiss,
 		],
 	);
+	const blankStackValue = {
+		navigatorKey,
+		routeKeys: state.routeKeys,
+		routes: state.routes,
+		scenes: state.scenes,
+		scenesByKey,
+		focusedIndex,
+		requestDismiss,
+		shouldShowFloatOverlay: state.shouldShowFloatOverlay,
+		handleCloseRoute,
+	};
 
-	const blankStackProviderContextValue =
-		useMemo<BlankStackProviderContextValue>(
-			() => ({
-				handleCloseRoute,
-			}),
-			[handleCloseRoute],
-		);
-
-	const renderProps = useMemo<BlankStackProviderRenderProps<TDescriptor>>(
-		() => ({
-			scenes: state.scenes,
-			focusedIndex,
-			shouldShowFloatOverlay: state.shouldShowFloatOverlay,
-		}),
-		[state.scenes, focusedIndex, state.shouldShowFloatOverlay],
+	return (
+		<StackProvider value={stackValue}>
+			<BlankStackStoreProvider value={blankStackValue}>
+				{children}
+			</BlankStackStoreProvider>
+		</StackProvider>
 	);
-
-	return { stackContextValue, blankStackProviderContextValue, renderProps };
-}
-
-function withBlankStack<
-	TDescriptor extends BaseStackDescriptor = BaseStackDescriptor,
-	TNavigation extends BaseStackNavigation = BaseStackNavigation,
->(
-	Component: React.ComponentType<BlankStackProviderRenderProps<TDescriptor>>,
-): React.FC<BlankStackProviderProps<TDescriptor, TNavigation>> {
-	return function BlankStackProvider(
-		props: BlankStackProviderProps<TDescriptor, TNavigation>,
-	) {
-		const { stackContextValue, blankStackProviderContextValue, renderProps } =
-			useBlankStackProviderValue<TDescriptor, TNavigation>(props);
-
-		return (
-			<StackProvider value={stackContextValue}>
-				<BlankStackProviderContext.Provider
-					value={blankStackProviderContextValue}
-				>
-					<Component {...renderProps} />
-				</BlankStackProviderContext.Provider>
-			</StackProvider>
-		);
-	};
 }
 
-export type {
-	BlankStackProviderContextValue,
-	BlankStackProviderProps,
-	BlankStackProviderRenderProps,
-};
-export { useBlankStackContext, withBlankStack };
+export type { BlankStackProviderProps, BlankStackStoreValue };
+export { BlankStackProvider, useBlankStackStore };

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

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { useMemo } from "react";
+import { memo, type ReactNode, useContext, useMemo } from "react";
 import { Dimensions, Platform, StyleSheet, View } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import {
@@ -19,7 +18,7 @@ export interface StackCoreConfig {
 
 interface StackCoreProviderProps {
 	config: StackCoreConfig;
-	children: React.ReactNode;
+	children: ReactNode;
 }
 
 export interface StackCoreContextValue {
@@ -41,8 +40,12 @@ const initialSafeAreaMetrics =
 			}
 		: initialWindowMetrics;
 
-function StackSafeAreaProvider({ children }: { children: React.ReactNode }) {
-	const insets = React.useContext(SafeAreaInsetsContext);
+const StackSafeAreaProvider = memo(function StackSafeAreaProvider({
+	children,
+}: {
+	children: ReactNode;
+}) {
+	const insets = useContext(SafeAreaInsetsContext);
 
 	if (insets) {
 		return <View style={styles.container}>{children}</View>;
@@ -56,86 +59,57 @@ function StackSafeAreaProvider({ children }: { children: React.ReactNode }) {
 			{children}
 		</SafeAreaProvider>
 	);
-}
+});
 
-const { StackCoreProvider: InternalStackCoreProvider, useStackCoreContext } =
-	createProvider("StackCore", { guarded: true })<
-		StackCoreProviderProps,
-		StackCoreContextValue
-	>(({ config, children }) => {
-		const {
-			TRANSITIONS_ALWAYS_ON = false,
-			DISABLE_NATIVE_SCREENS = false,
-			DISABLE_NATIVE_SCREEN_CONTAINER = false,
-			STACK_TYPE = StackType.BLANK,
-		} = config;
+const StackCoreRoot = memo(function StackCoreRoot({
+	children,
+	stackType,
+}: {
+	children: ReactNode;
+	stackType: StackType;
+}) {
+	return (
+		<GestureHandlerRootView
+			style={styles.container}
+			pointerEvents={stackType === StackType.COMPONENT ? "box-none" : undefined}
+		>
+			<StackSafeAreaProvider>{children}</StackSafeAreaProvider>
+		</GestureHandlerRootView>
+	);
+});
 
-		const flags = useMemo(
-			() => ({
-				TRANSITIONS_ALWAYS_ON,
-				STACK_TYPE,
-				DISABLE_NATIVE_SCREENS,
-				DISABLE_NATIVE_SCREEN_CONTAINER,
-			}),
-			[
-				TRANSITIONS_ALWAYS_ON,
-				STACK_TYPE,
-				DISABLE_NATIVE_SCREENS,
-				DISABLE_NATIVE_SCREEN_CONTAINER,
-			],
-		);
+export const { StackCoreProvider, useStackCoreStore } = createProvider(
+	"StackCore",
+	{ guarded: true },
+)<StackCoreProviderProps, StackCoreContextValue>(({ config, children }) => {
+	const {
+		TRANSITIONS_ALWAYS_ON = false,
+		DISABLE_NATIVE_SCREENS = false,
+		DISABLE_NATIVE_SCREEN_CONTAINER = false,
+		STACK_TYPE = StackType.BLANK,
+	} = config;
 
-		return {
-			value: { flags },
-			children: (
-				<GestureHandlerRootView
-					style={styles.container}
-					pointerEvents={
-						STACK_TYPE === StackType.COMPONENT ? "box-none" : undefined
-					}
-				>
-					<StackSafeAreaProvider>{children}</StackSafeAreaProvider>
-				</GestureHandlerRootView>
-			),
-		};
-	});
+	const flags = useMemo(
+		() => ({
+			TRANSITIONS_ALWAYS_ON,
+			STACK_TYPE,
+			DISABLE_NATIVE_SCREENS,
+			DISABLE_NATIVE_SCREEN_CONTAINER,
+		}),
+		[
+			TRANSITIONS_ALWAYS_ON,
+			STACK_TYPE,
+			DISABLE_NATIVE_SCREENS,
+			DISABLE_NATIVE_SCREEN_CONTAINER,
+		],
+	);
 
-/**
- * HOC that wraps a component with the StackCore provider.
- * Just a simple open gate
- */
-export function withStackCore<TProps extends object>(
-	defaultConfig: StackCoreConfig,
-	Component: React.ComponentType<TProps>,
-): React.FC<TProps & StackCoreConfig> {
-	return function StackCoreWrapper({
-		DISABLE_NATIVE_SCREENS,
-		DISABLE_NATIVE_SCREEN_CONTAINER,
-		TRANSITIONS_ALWAYS_ON,
-		STACK_TYPE,
-		...props
-	}: TProps & StackCoreConfig) {
-		// Start from defaults, then apply explicit overrides from the caller.
-		const config: StackCoreConfig = {
-			TRANSITIONS_ALWAYS_ON:
-				TRANSITIONS_ALWAYS_ON ?? defaultConfig.TRANSITIONS_ALWAYS_ON,
-			STACK_TYPE: STACK_TYPE ?? defaultConfig.STACK_TYPE,
-			DISABLE_NATIVE_SCREENS:
-				DISABLE_NATIVE_SCREENS ?? defaultConfig.DISABLE_NATIVE_SCREENS,
-			DISABLE_NATIVE_SCREEN_CONTAINER:
-				DISABLE_NATIVE_SCREEN_CONTAINER ??
-				defaultConfig.DISABLE_NATIVE_SCREEN_CONTAINER,
-		};
-		return (
-			<InternalStackCoreProvider config={config}>
-				<Component {...(props as TProps)} />
-			</InternalStackCoreProvider>
-		);
+	return {
+		value: { flags },
+		children: <StackCoreRoot stackType={STACK_TYPE}>{children}</StackCoreRoot>,
 	};
-}
+});
 
 const styles = StyleSheet.create({
 	container: { flex: 1 },
 });
-
-export { useStackCoreContext };

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

@@ -1,5 +1,4 @@
-import type * as React from "react";
-import { useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 import {
 	type StackContextValue,
 	StackProvider,
@@ -10,16 +9,34 @@ import type {
 	DirectStackProps,
 	DirectStackScene,
 } from "../../types/providers/direct-stack.types";
+import createProvider from "../../utils/create-provider";
 import { isOverlayVisible } from "../../utils/overlay/visibility";
-import { useStackCoreContext } from "./core.provider";
+import { useStackCoreStore } from "./core.provider";
 
-function useDirectStackValue(
-	props: DirectStackProps,
-): DirectStackContextValue & { stackContextValue: StackContextValue } {
-	const { state, navigation, descriptors, describe } = props;
-	const { flags } = useStackCoreContext();
-	const navigatorKey = state.key;
+type DirectStackProviderProps = DirectStackProps & {
+	children: ReactNode;
+};
+
+type DirectStackStoreProviderProps = {
+	children: ReactNode;
+	value: DirectStackContextValue;
+};
 
+const { DirectStackProvider: DirectStackStoreProvider, useDirectStackStore } =
+	createProvider("DirectStack", { guarded: true })<
+		DirectStackStoreProviderProps,
+		DirectStackContextValue
+	>(({ children, value }) => ({ children, value }));
+
+function DirectStackProvider({
+	state,
+	navigation,
+	descriptors,
+	describe,
+	children,
+}: DirectStackProviderProps) {
+	const flags = useStackCoreStore((store) => store.flags);
+	const navigatorKey = state.key;
 	const preloadedDescriptors = useMemo(() => {
 		return state.preloadedRoutes.reduce<DirectStackDescriptorMap>(
 			(acc, route) => {
@@ -41,23 +58,40 @@ function useDirectStackValue(
 			};
 			let shouldShowFloatOverlay = false;
 
-			for (const route of allRoutes) {
+			for (let index = 0; index < allRoutes.length; index++) {
+				const route = allRoutes[index];
+				if (!route) {
+					throw new Error(`Missing stack route at index ${index}.`);
+				}
 				const descriptor = allDescriptors[route.key];
+
+				if (!descriptor) {
+					throw new Error(`Missing descriptor for route "${route.key}".`);
+				}
+
 				const isPreloaded =
 					preloadedDescriptors[route.key] !== undefined &&
 					descriptors[route.key] === undefined;
 
-				scenes.push({ route, descriptor, isPreloaded });
+				scenes.push({
+					activity:
+						index === state.index
+							? "active"
+							: index === state.index - 1
+								? "inert"
+								: "inactive",
+					route,
+					descriptor,
+					isPreloaded,
+				});
 				routeKeys.push(route.key);
 
-				if (!shouldShowFloatOverlay && descriptor) {
-					const options = descriptor.options;
-					if (
-						options?.enableTransitions === true &&
-						isOverlayVisible(options)
-					) {
-						shouldShowFloatOverlay = true;
-					}
+				if (
+					!shouldShowFloatOverlay &&
+					descriptor.options?.enableTransitions === true &&
+					isOverlayVisible(descriptor.options)
+				) {
+					shouldShowFloatOverlay = true;
 				}
 			}
 
@@ -70,13 +104,13 @@ function useDirectStackValue(
 		}, [
 			state.routes,
 			state.preloadedRoutes,
+			state.index,
 			preloadedDescriptors,
 			descriptors,
 		]);
 
 	const focusedIndex = state.index;
-
-	const stackContextValue = useMemo<StackContextValue>(
+	const stackValue = useMemo<StackContextValue>(
 		() => ({
 			flags,
 			navigatorKey,
@@ -87,43 +121,28 @@ function useDirectStackValue(
 		}),
 		[flags, navigatorKey, routeKeys, allRoutes, scenes, focusedIndex],
 	);
+	const directStackValue = {
+		state,
+		navigation,
+		descriptors,
+		scenes,
+		focusedIndex,
+		shouldShowFloatOverlay,
+	};
 
-	// DirectStack context value
-	const lifecycleValue = useMemo<DirectStackContextValue>(
-		() => ({
-			state,
-			navigation,
-			descriptors,
-			scenes,
-			focusedIndex,
-			shouldShowFloatOverlay,
-		}),
-		[
-			state,
-			navigation,
-			descriptors,
-			scenes,
-			focusedIndex,
-			shouldShowFloatOverlay,
-		],
+	return (
+		<StackProvider value={stackValue}>
+			<DirectStackStoreProvider value={directStackValue}>
+				{children}
+			</DirectStackStoreProvider>
+		</StackProvider>
 	);
-
-	return { ...lifecycleValue, stackContextValue };
 }
 
-function withDirectStack<TProps extends DirectStackProps>(
-	Component: React.ComponentType<DirectStackContextValue>,
-): React.FC<TProps> {
-	return function DirectStackProvider(props: TProps) {
-		const { stackContextValue, ...lifecycleValue } = useDirectStackValue(props);
-
-		return (
-			<StackProvider value={stackContextValue}>
-				<Component {...lifecycleValue} />
-			</StackProvider>
-		);
-	};
-}
-
-export type { DirectStackContextValue, DirectStackProps, DirectStackScene };
-export { withDirectStack };
+export type {
+	DirectStackContextValue,
+	DirectStackProps,
+	DirectStackProviderProps,
+	DirectStackScene,
+};
+export { DirectStackProvider, useDirectStackStore };