react-native-screen-transitions 3.2.0-beta.0 → 3.2.0-beta.2

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

@@ -1,12 +1,16 @@
 import type * as React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, type View } from "react-native";
 import Animated, {
+	Extrapolation,
 	interpolate,
 	useAnimatedProps,
+	useAnimatedRef,
 	useDerivedValue,
 	useSharedValue,
 } from "react-native-reanimated";
 import { Screen as RNSScreen } from "react-native-screens";
+import { useStack } from "../../shared/hooks/navigation/use-stack";
+import { LayoutAnchorProvider } from "../../shared/providers/layout-anchor.provider";
 import { useManagedStackContext } from "../../shared/providers/stack/managed.provider";
 import { AnimationStore } from "../../shared/stores/animation.store";
 
@@ -25,10 +29,12 @@ enum ScreenActivity {
 }
 
 const EPSILON = 1e-5;
+const POINT_NONE = "none" as const;
+const POINT_BOX_NONE = "box-none" as const;
 
-const AnimatedScreen = Animated.createAnimatedComponent(RNSScreen);
+const AnimatedNativeScreen = Animated.createAnimatedComponent(RNSScreen);
 
-export const Screen = ({
+export const AdjustedScreen = ({
 	routeKey,
 	index,
 	isPreloaded,
@@ -36,8 +42,12 @@ export const Screen = ({
 	freezeOnBlur,
 	shouldFreeze,
 }: ScreenProps) => {
+	const {
+		flags: { DISABLE_NATIVE_SCREENS = false },
+	} = useStack();
 	const { activeScreensLimit, routes } = useManagedStackContext();
 	const routesLength = routes.length;
+	const screenRef = useAnimatedRef<View>();
 
 	const sceneProgress = AnimationStore.getAnimation(routeKey, "progress");
 	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
@@ -65,7 +75,7 @@ export const Screen = ({
 				sceneProgress.get(),
 				[0, 1 - EPSILON, 1],
 				[1, 1, outputValue],
-				"clamp",
+				Extrapolation.CLAMP,
 			);
 
 			const next = Math.trunc(v) ?? ScreenActivity.TRANSITIONING_OR_BELOW_TOP;
@@ -78,23 +88,34 @@ export const Screen = ({
 
 	const animatedProps = useAnimatedProps(() => {
 		const activity = screenActivity.get();
+		if (!DISABLE_NATIVE_SCREENS) {
+			return {
+				activityState: activity,
+				shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
+				pointerEvents: sceneClosing.get() ? POINT_NONE : POINT_BOX_NONE,
+			};
+		}
+
 		return {
-			activityState: activity,
-			shouldFreeze: activity === ScreenActivity.INACTIVE && shouldFreeze,
-			pointerEvents: sceneClosing.get()
-				? ("none" as const)
-				: ("box-none" as const),
+			pointerEvents: sceneClosing.get() ? POINT_NONE : POINT_BOX_NONE,
 		};
 	});
 
+	const AdjustedScreenComponent = !DISABLE_NATIVE_SCREENS
+		? AnimatedNativeScreen
+		: Animated.View;
+
 	return (
-		<AnimatedScreen
+		<AdjustedScreenComponent
 			enabled
+			ref={screenRef}
 			style={StyleSheet.absoluteFill}
 			freezeOnBlur={freezeOnBlur}
 			animatedProps={animatedProps}
 		>
-			{children}
-		</AnimatedScreen>
+			<LayoutAnchorProvider anchorRef={screenRef}>
+				{children}
+			</LayoutAnchorProvider>
+		</AdjustedScreenComponent>
 	);
 };

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

@@ -0,0 +1,94 @@
+import {
+	NavigationContext,
+	NavigationRouteContext,
+} from "@react-navigation/native";
+import * as React from "react";
+import { Fragment } from "react";
+import { Overlay } from "../../shared/components/overlay";
+import { ManagedLifecycle } from "../../shared/controller/managed-lifecycle";
+import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
+import { withStackCore } from "../../shared/providers/stack/core.provider";
+import { withManagedStack } from "../../shared/providers/stack/managed.provider";
+import type {
+	BlankStackDescriptor,
+	BlankStackNavigationHelpers,
+} from "../types";
+import { AdjustedScreen } from "./adjusted-screen";
+import { AdjustedScreenContainer } from "./adjusted-screen-container";
+
+function isFabric() {
+	return "nativeFabricUIManager" in global;
+}
+
+type SceneViewProps = {
+	descriptor: BlankStackDescriptor;
+};
+
+const SceneView = React.memo(function SceneView({
+	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 = withStackCore(
+	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: false },
+	withManagedStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
+		({ descriptors, focusedIndex, scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+
+					<AdjustedScreenContainer>
+						{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 (
+								<AdjustedScreen
+									key={route.key}
+									isPreloaded={isPreloaded}
+									index={sceneIndex}
+									routeKey={route.key}
+									shouldFreeze={shouldFreeze}
+									freezeOnBlur={descriptor.options.freezeOnBlur}
+								>
+									<ScreenComposer
+										previous={previousDescriptor}
+										current={descriptor}
+										next={nextDescriptor}
+										LifecycleController={ManagedLifecycle}
+									>
+										<SceneView key={route.key} descriptor={descriptor} />
+									</ScreenComposer>
+								</AdjustedScreen>
+							);
+						})}
+					</AdjustedScreenContainer>
+				</Fragment>
+			);
+		},
+	),
+);

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

@@ -4,18 +4,17 @@ import {
 } from "@react-navigation/native";
 import * as React from "react";
 import { Fragment } from "react";
-import { StyleSheet } from "react-native";
-import { ScreenContainer } from "react-native-screens";
 import { Overlay } from "../../shared/components/overlay";
+import { ManagedLifecycle } from "../../shared/controller/managed-lifecycle";
 import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
 import { withStackCore } from "../../shared/providers/stack/core.provider";
 import { withManagedStack } from "../../shared/providers/stack/managed.provider";
-import { BlankStackScreenLifecycleController } from "../controllers/blank-stack-lifecycle";
 import type {
 	BlankStackDescriptor,
 	BlankStackNavigationHelpers,
 } from "../types";
-import { Screen } from "./screens";
+import { AdjustedScreen } from "./adjusted-screen";
+import { AdjustedScreenContainer } from "./adjusted-screen-container";
 
 function isFabric() {
 	return "nativeFabricUIManager" in global;
@@ -41,60 +40,55 @@ const SceneView = React.memo(function SceneView({
 });
 
 export const StackView = withStackCore(
-	{ TRANSITIONS_ALWAYS_ON: true },
+	{ TRANSITIONS_ALWAYS_ON: true, DISABLE_NATIVE_SCREENS: true },
 	withManagedStack<BlankStackDescriptor, BlankStackNavigationHelpers>(
 		({ descriptors, focusedIndex, scenes, shouldShowFloatOverlay }) => {
 			return (
 				<Fragment>
 					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
-					<Overlay.Container>
-						<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;
+					<AdjustedScreenContainer>
+						{scenes.map((scene, sceneIndex) => {
+							const descriptor = scene.descriptor;
+							const route = scene.route;
+							const isFocused = focusedIndex === sceneIndex;
+							const isBelowFocused = focusedIndex - 1 === sceneIndex;
 
-								const isPreloaded = descriptors[route.key] === undefined;
+							const previousDescriptor =
+								scenes[sceneIndex - 1]?.descriptor ?? undefined;
+							const nextDescriptor =
+								scenes[sceneIndex + 1]?.descriptor ?? 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}
-										routeKey={route.key}
-										shouldFreeze={shouldFreeze}
-										freezeOnBlur={descriptor.options.freezeOnBlur}
+							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 (
+								<AdjustedScreen
+									key={route.key}
+									isPreloaded={isPreloaded}
+									index={sceneIndex}
+									routeKey={route.key}
+									shouldFreeze={shouldFreeze}
+									freezeOnBlur={descriptor.options.freezeOnBlur}
+								>
+									<ScreenComposer
+										previous={previousDescriptor}
+										current={descriptor}
+										next={nextDescriptor}
+										LifecycleController={ManagedLifecycle}
 									>
-										<ScreenComposer
-											previous={previousDescriptor}
-											current={descriptor}
-											next={nextDescriptor}
-											LifecycleController={BlankStackScreenLifecycleController}
-										>
-											<SceneView key={route.key} descriptor={descriptor} />
-										</ScreenComposer>
-									</Screen>
-								);
-							})}
-						</ScreenContainer>
-					</Overlay.Container>
+										<SceneView key={route.key} descriptor={descriptor} />
+									</ScreenComposer>
+								</AdjustedScreen>
+							);
+						})}
+					</AdjustedScreenContainer>
 				</Fragment>
 			);
 		},
 	),
 );
-
-const styles = StyleSheet.create({
-	container: { flex: 1 },
-});

package/src/blank-stack/types.ts

@@ -57,8 +57,9 @@ export type BlankStackScene = {
 	descriptor: BlankStackDescriptor;
 };
 
-// We want it to be an empty object because navigator does not have any additional props
-type BlankStackNavigationConfig = {};
+type BlankStackNavigationConfig = {
+	DISABLE_NATIVE_SCREENS?: boolean;
+};
 
 /**
  * Props passed to overlay components in blank-stack.

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

@@ -0,0 +1,40 @@
+import type * as React from "react";
+import { StyleSheet, type View } from "react-native";
+import Animated, {
+	useAnimatedProps,
+	useAnimatedRef,
+} from "react-native-reanimated";
+import { LayoutAnchorProvider } from "../../shared/providers/layout-anchor.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+
+interface ScreenProps {
+	routeKey: string;
+	children: React.ReactNode;
+}
+const POINT_NONE = "none" as const;
+const POINT_BOX_NONE = "box-none" as const;
+
+export const ComponentScreen = ({ routeKey, children }: ScreenProps) => {
+	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
+	const screenRef = useAnimatedRef<View>();
+
+	const animatedProps = useAnimatedProps(() => {
+		return {
+			pointerEvents: sceneClosing.get() ? POINT_NONE : POINT_BOX_NONE,
+		};
+	});
+
+	const ComponentScreenComponent = Animated.View;
+
+	return (
+		<ComponentScreenComponent
+			ref={screenRef}
+			style={StyleSheet.absoluteFill}
+			animatedProps={animatedProps}
+		>
+			<LayoutAnchorProvider anchorRef={screenRef}>
+				{children}
+			</LayoutAnchorProvider>
+		</ComponentScreenComponent>
+	);
+};

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

@@ -0,0 +1,74 @@
+import {
+	NavigationContext,
+	NavigationRouteContext,
+} from "@react-navigation/native";
+import * as React from "react";
+import { Fragment } from "react";
+import { Overlay } from "../../shared/components/overlay";
+import { ManagedLifecycle } from "../../shared/controller/managed-lifecycle";
+import { ScreenComposer } from "../../shared/providers/screen/screen-composer";
+import { withStackCore } from "../../shared/providers/stack/core.provider";
+import { withManagedStack } from "../../shared/providers/stack/managed.provider";
+import { StackType } from "../../shared/types/stack.types";
+import type {
+	ComponentStackDescriptor,
+	ComponentStackNavigationHelpers,
+} from "../types";
+import { ComponentScreen } from "./component-screen";
+
+type SceneViewProps = {
+	descriptor: ComponentStackDescriptor;
+};
+
+const SceneView = React.memo(function SceneView({
+	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 = withStackCore(
+	{ TRANSITIONS_ALWAYS_ON: true, STACK_TYPE: StackType.COMPONENT },
+	withManagedStack<ComponentStackDescriptor, ComponentStackNavigationHelpers>(
+		({ scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+
+					<Fragment>
+						{scenes.map((scene, sceneIndex) => {
+							const descriptor = scene.descriptor;
+							const route = scene.route;
+
+							const previousDescriptor =
+								scenes[sceneIndex - 1]?.descriptor ?? undefined;
+							const nextDescriptor =
+								scenes[sceneIndex + 1]?.descriptor ?? undefined;
+
+							return (
+								<ComponentScreen key={route.key} routeKey={route.key}>
+									<ScreenComposer
+										previous={previousDescriptor}
+										current={descriptor}
+										next={nextDescriptor}
+										LifecycleController={ManagedLifecycle}
+									>
+										<SceneView key={route.key} descriptor={descriptor} />
+									</ScreenComposer>
+								</ComponentScreen>
+							);
+						})}
+					</Fragment>
+				</Fragment>
+			);
+		},
+	),
+);

package/src/component-stack/index.ts

@@ -1,16 +1,10 @@
-export { useComponentNavigation } from "./hooks/use-component-navigation";
-export { createComponentNavigator } from "./navigators/create-component-navigator";
+export { createComponentStackNavigator } from "../component-stack/navigators/create-component-stack-navigator";
 export type {
-	ComponentNavigation,
-	ComponentNavigatorProps,
-	ComponentRoute,
-	ComponentScreenConfig,
-	ComponentScreenProps,
-	ComponentStackDescriptor,
+	ComponentStackNavigationEventMap,
 	ComponentStackNavigationOptions,
+	ComponentStackNavigationProp,
+	ComponentStackNavigatorProps,
+	ComponentStackOptionsArgs,
 	ComponentStackOverlayProps,
-	ComponentStackScene,
 	ComponentStackScreenProps,
-	ComponentStackScreenTransitionConfig,
-	ComponentStackState,
-} from "./types";
+} from "../component-stack/types";

package/src/component-stack/navigators/create-component-stack-navigator.tsx

@@ -0,0 +1,119 @@
+import {
+	createNavigatorFactory,
+	NavigationContainer,
+	NavigationIndependentTree,
+	type NavigatorTypeBagBase,
+	type ParamListBase,
+	type StackActionHelpers,
+	type StackNavigationState,
+	StackRouter,
+	type StackRouterOptions,
+	type StaticConfig,
+	type TypedNavigator,
+	useNavigationBuilder,
+} from "@react-navigation/native";
+import * as React from "react";
+import { StackView } from "../components/stack-view";
+import type {
+	ComponentStackNavigationEventMap,
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationProp,
+	ComponentStackNavigatorProps,
+} from "../types";
+
+/**
+ * Context to detect if we're inside a ComponentStack.
+ * Used to avoid double-wrapping nested ComponentStacks in NavigationIndependentTree.
+ */
+const ComponentStackContext = React.createContext<boolean>(false);
+ComponentStackContext.displayName = "ComponentStackContext";
+
+const ComponentStackNavigatorInner = React.memo(
+	function ComponentStackNavigatorInner({
+		id,
+		initialRouteName,
+		children,
+		layout,
+		screenListeners,
+		screenOptions,
+		screenLayout,
+		...rest
+	}: ComponentStackNavigatorProps) {
+		const { state, describe, descriptors, navigation, NavigationContent } =
+			useNavigationBuilder<
+				StackNavigationState<ParamListBase>,
+				StackRouterOptions,
+				StackActionHelpers<ParamListBase>,
+				ComponentStackNavigationOptions,
+				ComponentStackNavigationEventMap
+			>(StackRouter, {
+				id,
+				initialRouteName,
+				children,
+				layout,
+				screenListeners,
+				screenOptions,
+				screenLayout,
+			});
+
+		return (
+			<NavigationContent>
+				<StackView
+					{...rest}
+					state={state}
+					navigation={navigation}
+					descriptors={descriptors}
+					describe={describe}
+				/>
+			</NavigationContent>
+		);
+	},
+);
+
+/**
+ * ComponentStackNavigator conditionally wraps in NavigationIndependentTree.
+ * - If already inside a ComponentStack (nested), just render the inner navigator
+ *   so it participates in the parent's navigation tree and goBack() works.
+ * - If top-level, wrap in NavigationIndependentTree + NavigationContainer
+ *   to isolate from Expo Router / React Navigation.
+ */
+function IsolatedComponentStackNavigator(props: ComponentStackNavigatorProps) {
+	const isNested = React.useContext(ComponentStackContext);
+
+	if (isNested) {
+		return <ComponentStackNavigatorInner {...props} />;
+	}
+
+	return (
+		<NavigationIndependentTree>
+			<NavigationContainer>
+				<ComponentStackContext.Provider value={true}>
+					<ComponentStackNavigatorInner {...props} />
+				</ComponentStackContext.Provider>
+			</NavigationContainer>
+		</NavigationIndependentTree>
+	);
+}
+
+export function createComponentStackNavigator<
+	const ParamList extends ParamListBase,
+	const NavigatorID extends string | undefined = undefined,
+	const TypeBag extends NavigatorTypeBagBase = {
+		ParamList: ParamList;
+		NavigatorID: NavigatorID;
+		State: StackNavigationState<ParamList>;
+		ScreenOptions: ComponentStackNavigationOptions;
+		EventMap: ComponentStackNavigationEventMap;
+		NavigationList: {
+			[RouteName in keyof ParamList]: ComponentStackNavigationProp<
+				ParamList,
+				RouteName,
+				NavigatorID
+			>;
+		};
+		Navigator: typeof IsolatedComponentStackNavigator;
+	},
+	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+	return createNavigatorFactory(IsolatedComponentStackNavigator)(config);
+}