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

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

@@ -0,0 +1,104 @@
+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/screen-lifecycle";
+import { FlagsProvider } from "../../shared/providers/flags.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,
+	}) => {
+		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;
+
+								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>
+			</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,18 +12,11 @@ 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 = {
 	/**
@@ -104,6 +97,11 @@ export type BlankStackOverlayProps = {
 	 */
 	focusedIndex: number;
 
+	/**
+	 * All routes currently in the stack.
+	 */
+	routes: Route<string>[];
+
 	/**
 	 * Options passed to the overlay component.
 	 */

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 };