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

package/src/blank-stack/components/{Overlay.tsx → overlay.tsx}

@@ -47,7 +47,7 @@ const OverlayHost = ({ scene, isFloating }: OverlayHostProps) => {
 	const OverlayComponent = scene.descriptor.options.overlay;
 
 	const { overlayAnimation, optimisticActiveIndex } = useOverlayAnimation();
-	const { scenes } = useStackNavigationContext();
+	const { scenes, routes } = useStackNavigationContext();
 
 	const overlaySceneIndex = useMemo(() => {
 		return scenes.findIndex(
@@ -76,12 +76,13 @@ const OverlayHost = ({ scene, isFloating }: OverlayHostProps) => {
 	}
 
 	const overlayProps: BlankStackOverlayProps = {
+		routes,
+		overlayAnimation,
+		screenAnimation,
 		focusedRoute: focusedScene.route,
 		focusedIndex: optimisticActiveIndex,
 		overlayOptions: focusedScene.descriptor.options.overlayOptions,
 		navigation: scene.descriptor.navigation,
-		overlayAnimation,
-		screenAnimation,
 	};
 
 	return (

package/src/blank-stack/components/{Screens.tsx → screens.tsx}

@@ -1,4 +1,3 @@
-import type { NavigationRoute, ParamListBase } from "@react-navigation/native";
 import type * as React from "react";
 import { StyleSheet } from "react-native";
 import Animated, {
@@ -20,13 +19,14 @@ interface ScreenProps {
 	shouldFreeze?: boolean;
 	activeScreensLimit: number;
 }
+enum ScreenActivity {
+	INACTIVE = 0,
+	TRANSITIONING_OR_BELOW_TOP = 1,
+	ON_TOP = 2,
+}
 
 const EPSILON = 1e-5;
 
-const STATE_INACTIVE = 0;
-const STATE_TRANSITIONING_OR_BELOW_TOP = 1;
-const STATE_ON_TOP = 2;
-
 const AnimatedScreen = Animated.createAnimatedComponent(RNSScreen);
 
 export const Screen = ({
@@ -40,45 +40,50 @@ export const Screen = ({
 	shouldFreeze,
 }: ScreenProps) => {
 	const sceneProgress = AnimationStore.getAnimation(routeKey, "progress");
-	const screenActivity = useSharedValue<0 | 1 | 2>(1);
+	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
+	const screenActivity = useSharedValue<ScreenActivity>(
+		ScreenActivity.TRANSITIONING_OR_BELOW_TOP,
+	);
 
 	useDerivedValue(() => {
 		if (!sceneProgress) {
-			screenActivity.value = STATE_TRANSITIONING_OR_BELOW_TOP;
+			screenActivity.set(ScreenActivity.TRANSITIONING_OR_BELOW_TOP);
 			return;
 		}
 
 		if (index < routesLength - activeScreensLimit - 1 || isPreloaded) {
-			screenActivity.value = STATE_INACTIVE;
+			screenActivity.set(ScreenActivity.INACTIVE);
 		} else {
 			const outputValue =
 				index === routesLength - 1
-					? STATE_ON_TOP
+					? ScreenActivity.ON_TOP
 					: index >= routesLength - activeScreensLimit
-						? STATE_TRANSITIONING_OR_BELOW_TOP
-						: STATE_INACTIVE;
+						? ScreenActivity.TRANSITIONING_OR_BELOW_TOP
+						: ScreenActivity.INACTIVE;
 
 			const v = interpolate(
-				sceneProgress.value,
+				sceneProgress.get(),
 				[0, 1 - EPSILON, 1],
 				[1, 1, outputValue],
 				"clamp",
 			);
 
-			const next =
-				(Math.trunc(v) as 0 | 1 | 2) ?? STATE_TRANSITIONING_OR_BELOW_TOP;
+			const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
 
-			// avoid spamming JS thread
-			if (next !== screenActivity.value) {
-				screenActivity.value = next;
+			if (next !== screenActivity.get()) {
+				screenActivity.set(next);
 			}
 		}
 	});
 
 	const animatedProps = useAnimatedProps(() => {
+		const activity = screenActivity.get();
 		return {
-			activityState: screenActivity.value,
-			shouldFreeze: screenActivity.value === STATE_INACTIVE && shouldFreeze,
+			activityState: activity,
+			shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
+			pointerEvents: sceneClosing.get()
+				? ("none" as const)
+				: ("box-none" as const),
 		};
 	});
 
@@ -86,7 +91,6 @@ export const Screen = ({
 		<AnimatedScreen
 			enabled
 			style={StyleSheet.absoluteFill}
-			pointerEvents="box-none"
 			freezeOnBlur={freezeOnBlur}
 			animatedProps={animatedProps}
 		>

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

@@ -0,0 +1,115 @@
+import { SafeAreaProviderCompat } from "@react-navigation/elements";
+import {
+	NavigationContext,
+	NavigationRouteContext,
+} from "@react-navigation/native";
+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/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";
+import { Overlay } from "./overlay";
+import { Screen } from "./screens";
+
+function isFabric() {
+	return "nativeFabricUIManager" in global;
+}
+
+type SceneViewProps = {
+	descriptor: BlankStackDescriptor;
+};
+
+const SceneView = React.memo(({ descriptor }: SceneViewProps) => {
+	const { route, navigation, render } = descriptor;
+
+	return (
+		<NavigationContext.Provider value={navigation}>
+			<NavigationRouteContext.Provider value={route}>
+				{descriptor.options.overlayMode === "screen" && <Overlay.Screen />}
+				{render()}
+			</NavigationRouteContext.Provider>
+		</NavigationContext.Provider>
+	);
+});
+
+export const StackView = withStackNavigationProvider(
+	({
+		activeScreensLimit,
+		descriptors,
+		focusedIndex,
+		routes,
+		scenes,
+		shouldShowFloatOverlay,
+	}) => {
+		// Memoize route keys array for ScenesProvider
+		const routeKeys = React.useMemo(
+			() => routes.map((route) => route.key),
+			[routes],
+		);
+
+		return (
+			<FlagsProvider TRANSITIONS_ALWAYS_ON>
+				<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 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
+												}
+											>
+												<SceneView key={route.key} descriptor={descriptor} />
+											</ScreenTransitionProvider>
+										</Screen>
+									);
+								})}
+							</ScreenContainer>
+						</SafeAreaProviderCompat>
+					</GestureHandlerRootView>
+				</RoutesProvider>
+			</FlagsProvider>
+		);
+	},
+);
+
+const styles = StyleSheet.create({
+	container: { flex: 1 },
+});

package/src/blank-stack/index.ts

@@ -1,5 +1,4 @@
-export { useOverlayAnimation } from "../blank-stack/hooks/use-overlay-animation";
-export { createBlankStackNavigator } from "../blank-stack/navigators/createBlankStackNavigator";
+export { createBlankStackNavigator } from "../blank-stack/navigators/create-blank-stack-navigator";
 export type {
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,

package/src/blank-stack/navigators/{createBlankStackNavigator.tsx → create-blank-stack-navigator.tsx}

@@ -13,7 +13,7 @@ import {
 	useNavigationBuilder,
 } from "@react-navigation/native";
 import * as React from "react";
-import { StackView } from "../components/StackView";
+import { StackView } from "../components/stack-view";
 import type {
 	BlankStackNavigationEventMap,
 	BlankStackNavigationOptions,

package/src/blank-stack/types.ts

@@ -12,42 +12,13 @@ import type {
 	Theme,
 } from "@react-navigation/native";
 import type { DerivedValue } from "react-native-reanimated";
-import type { ScreenProps } from "react-native-screens";
 import type { ScreenTransitionConfig } from "../shared";
 import type {
 	OverlayInterpolationProps,
 	ScreenInterpolationProps,
-	ScreenStyleInterpolator,
-	TransitionSpec,
 } from "../shared/types/animation.types";
-import type {
-	GestureActivationArea,
-	GestureDirection,
-} from "../shared/types/gesture.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,
@@ -104,6 +75,11 @@ export type BlankStackOverlayProps = {
 	 */
 	focusedIndex: number;
 
+	/**
+	 * All routes currently in the stack.
+	 */
+	routes: Route<string>[];
+
 	/**
 	 * Options passed to the overlay component.
 	 */
@@ -134,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/blank-stack/utils/with-stack-navigation/helpers/compose-descriptors.ts

@@ -9,15 +9,8 @@ export const composeDescriptors = (
 	const composed: BlankStackDescriptorMap = {};
 
 	for (const route of routes) {
-		const adjusted =
+		composed[route.key] =
 			nextDescriptors[route.key] ?? currentDescriptors[route.key];
-
-		// useScreenAnimation depends on this, however with blank-stack, this should be enabled by default
-		const withEnableTransitions = {
-			...adjusted,
-			options: { ...adjusted.options, enableTransitions: true },
-		};
-		composed[route.key] = withEnableTransitions;
 	}
 
 	return composed;

package/src/blank-stack/utils/with-stack-navigation/hooks/use-closing-route-keys.tsx

@@ -4,7 +4,6 @@ import useStableCallback from "../../../../shared/hooks/use-stable-callback";
 
 export const useClosingRouteKeys = () => {
 	const keysRef = useRef<Set<string>>(new Set());
-	const finishedRef = useRef<Set<string>>(new Set());
 	const shared = useSharedValue<string[]>([]);
 
 	const add = useStableCallback((key: string) => {
@@ -13,7 +12,6 @@ export const useClosingRouteKeys = () => {
 			return;
 		}
 
-		finishedRef.current.delete(key);
 		keys.add(key);
 		shared.modify((prev) => {
 			"worklet";
@@ -26,12 +24,8 @@ export const useClosingRouteKeys = () => {
 
 	const remove = useStableCallback((key: string) => {
 		const keys = keysRef.current;
-		if (!keys.delete(key)) {
-			finishedRef.current.delete(key);
-			return;
-		}
+		keys.delete(key);
 
-		finishedRef.current.delete(key);
 		shared.modify((prev) => {
 			"worklet";
 			const index = prev.indexOf(key);
@@ -44,13 +38,8 @@ export const useClosingRouteKeys = () => {
 
 	const clear = useStableCallback(() => {
 		const keys = keysRef.current;
-		if (!keys.size) {
-			finishedRef.current.clear();
-			return;
-		}
 
 		keys.clear();
-		finishedRef.current.clear();
 		shared.modify((prev) => {
 			"worklet";
 			prev.length = 0;

package/src/blank-stack/utils/with-stack-navigation/hooks/use-stack-navigation-state.tsx

@@ -2,11 +2,11 @@ import { type Route, StackActions } from "@react-navigation/native";
 import { useLayoutEffect, useState } from "react";
 import useStableCallback from "../../../../shared/hooks/use-stable-callback";
 import type { BlankStackDescriptorMap } from "../../../types";
-import type { StackNavigationContextProps } from "../_types";
 import { areDescriptorsEqual } from "../helpers/are-descriptors-equal";
 import { composeDescriptors } from "../helpers/compose-descriptors";
 import { haveSameRouteKeys } from "../helpers/have-same-route-keys";
 import { routesAreIdentical } from "../helpers/routes-are-identical";
+import type { StackNavigationContextProps } from "../types";
 import { useClosingRouteKeys } from "./use-closing-route-keys";
 import { usePrevious } from "./use-previous";
 

package/src/blank-stack/utils/with-stack-navigation/index.tsx

@@ -1,45 +1,50 @@
-import { type ComponentType, createContext, useContext, useMemo } from "react";
+import { useMemo } from "react";
+import createProvider from "../../../shared/utils/create-provider";
 import type { BlankStackScene } from "../../types";
+import { calculateActiveScreensLimit } from "./helpers/calculate-active-screens-limit";
 import { useStackNavigationState } from "./hooks/use-stack-navigation-state";
 import type {
 	StackNavigationContextProps,
 	StackNavigationContextValue,
-} from "./_types";
-import { calculateActiveScreensLimit } from "./helpers/calculate-active-screens-limit";
-
-export const StackNavigationContext =
-	createContext<StackNavigationContextValue | null>(null);
+} from "./types";
 
-export function withStackNavigationProvider(
-	Component: ComponentType<StackNavigationContextValue>,
-) {
-	return function StackNavigationWrapper(props: StackNavigationContextProps) {
+const { withStackNavigationProvider, useStackNavigationContext } =
+	createProvider("StackNavigation")<
+		StackNavigationContextProps,
+		StackNavigationContextValue
+	>((props) => {
 		const { state, handleCloseRoute, closingRouteKeys } =
 			useStackNavigationState(props);
 
-		const scenes = useMemo(() => {
-			return state.routes.reduce((acc, route) => {
-				acc.push({
-					route,
-					descriptor: state.descriptors[route.key],
-				});
-				return acc;
-			}, [] as BlankStackScene[]);
-		}, [state.routes, state.descriptors]);
-
-		const activeScreensLimit = useMemo(() => {
-			return calculateActiveScreensLimit(state.routes, state.descriptors);
-		}, [state.routes, state.descriptors]);
-
-		const shouldShowFloatOverlay = useMemo(() => {
-			return state.routes.some((route) => {
-				const options = state.descriptors[route.key]?.options;
-				return options?.overlayMode === "float" && options?.overlayShown;
-			});
-		}, [state.routes, state.descriptors]);
-
-		const contextValue = useMemo<StackNavigationContextValue>(() => {
-			return {
+		const { scenes, activeScreensLimit, shouldShowFloatOverlay } =
+			useMemo(() => {
+				const scenes: BlankStackScene[] = [];
+				let shouldShowFloatOverlay = false;
+
+				for (const route of state.routes) {
+					const descriptor = state.descriptors[route.key];
+					scenes.push({ route, descriptor });
+
+					if (!shouldShowFloatOverlay) {
+						const options = descriptor?.options;
+						shouldShowFloatOverlay =
+							options?.overlayMode === "float" &&
+							options?.overlayShown === true;
+					}
+				}
+
+				return {
+					scenes,
+					activeScreensLimit: calculateActiveScreensLimit(
+						state.routes,
+						state.descriptors,
+					),
+					shouldShowFloatOverlay,
+				};
+			}, [state.routes, state.descriptors]);
+
+		return {
+			value: {
 				routes: state.routes,
 				focusedIndex: props.state.index,
 				descriptors: state.descriptors,
@@ -48,33 +53,8 @@ export function withStackNavigationProvider(
 				handleCloseRoute,
 				scenes,
 				shouldShowFloatOverlay,
-			};
-		}, [
-			state,
-			scenes,
-			activeScreensLimit,
-			closingRouteKeys,
-			handleCloseRoute,
-			props.state.index,
-			shouldShowFloatOverlay,
-		]);
-
-		return (
-			<StackNavigationContext.Provider value={contextValue}>
-				<Component {...contextValue} />
-			</StackNavigationContext.Provider>
-		);
-	};
-}
-
-export const useStackNavigationContext = () => {
-	const context = useContext(StackNavigationContext);
-
-	if (!context) {
-		throw new Error(
-			"StackNavigationContext.Provider is missing in the component tree.",
-		);
-	}
+			},
+		};
+	});
 
-	return context;
-};
+export { useStackNavigationContext, withStackNavigationProvider };