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

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-container.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet, View } from "react-native";
+
+interface Props {
+	children: React.ReactNode;
+}
+
+export const ComponentScreenContainer = ({ children }: Props) => {
+	return <View style={styles.container}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+});

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;
+}
+
+export const ComponentScreen = ({ routeKey, children }: ScreenProps) => {
+	const sceneClosing = AnimationStore.getAnimation(routeKey, "closing");
+	const screenRef = useAnimatedRef<View>();
+
+	const animatedProps = useAnimatedProps(() => {
+		return {
+			pointerEvents: sceneClosing.get()
+				? ("none" as const)
+				: ("box-none" as const),
+		};
+	});
+
+	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 type {
+	ComponentStackDescriptor,
+	ComponentStackNavigationHelpers,
+} from "../types";
+import { ComponentScreen } from "./component-screen";
+import { ComponentScreenContainer } from "./component-screen-container";
+
+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 },
+	withManagedStack<ComponentStackDescriptor, ComponentStackNavigationHelpers>(
+		({ scenes, shouldShowFloatOverlay }) => {
+			return (
+				<Fragment>
+					{shouldShowFloatOverlay ? <Overlay.Float /> : null}
+
+					<ComponentScreenContainer>
+						{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>
+							);
+						})}
+					</ComponentScreenContainer>
+				</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,88 @@
+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 { StackView } from "../components/stack-view";
+import type {
+	ComponentStackNavigationEventMap,
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationProp,
+	ComponentStackNavigatorProps,
+} from "../types";
+
+function ComponentStackNavigator({
+	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 (
+		<NavigationIndependentTree>
+			<NavigationContainer>
+				<NavigationContent>
+					<StackView
+						{...rest}
+						state={state}
+						navigation={navigation}
+						descriptors={descriptors}
+						describe={describe}
+					/>
+				</NavigationContent>
+			</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 ComponentStackNavigator;
+	},
+	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+	return createNavigatorFactory(ComponentStackNavigator)(config);
+}