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

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

@@ -0,0 +1,10 @@
+export { createComponentStackNavigator } from "../component-stack/navigators/create-component-stack-navigator";
+export type {
+	ComponentStackNavigationEventMap,
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationProp,
+	ComponentStackNavigatorProps,
+	ComponentStackOptionsArgs,
+	ComponentStackOverlayProps,
+	ComponentStackScreenProps,
+} 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);
+}

package/src/component-stack/types.ts

@@ -0,0 +1,101 @@
+import type {
+	DefaultNavigatorOptions,
+	Descriptor,
+	NavigationHelpers,
+	NavigationProp,
+	ParamListBase,
+	Route,
+	RouteProp,
+	StackActionHelpers,
+	StackNavigationState,
+	StackRouterOptions,
+	Theme,
+} from "@react-navigation/native";
+import type { ScreenTransitionConfig } from "../shared";
+import type { OverlayProps } from "../shared/types/overlay.types";
+
+export type ComponentStackNavigationEventMap = {};
+
+export type ComponentStackNavigationProp<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = string,
+	NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+	ParamList,
+	RouteName,
+	NavigatorID,
+	StackNavigationState<ParamList>,
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationEventMap
+> &
+	StackActionHelpers<ParamList>;
+
+export type ComponentStackScreenProps<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = string,
+	NavigatorID extends string | undefined = undefined,
+> = {
+	navigation: ComponentStackNavigationProp<ParamList, RouteName, NavigatorID>;
+	route: RouteProp<ParamList, RouteName>;
+};
+
+export type ComponentStackOptionsArgs<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = keyof ParamList,
+	NavigatorID extends string | undefined = undefined,
+> = ComponentStackScreenProps<ParamList, RouteName, NavigatorID> & {
+	theme: Theme;
+};
+
+export type ComponentStackNavigationHelpers = NavigationHelpers<
+	ParamListBase,
+	ComponentStackNavigationEventMap
+>;
+
+export type ComponentStackScene = {
+	route: Route<string>;
+	descriptor: ComponentStackDescriptor;
+};
+
+type ComponentStackNavigationConfig = {};
+
+/**
+ * Props passed to overlay components in component-stack.
+ * Uses the shared OverlayProps type with component-stack's navigation type.
+ */
+export type ComponentStackOverlayProps = OverlayProps<
+	ComponentStackNavigationProp<ParamListBase>
+>;
+
+type ComponentStackScreenTransitionConfig = 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`.
+	 */
+	detachPreviousScreen?: boolean;
+};
+
+export type ComponentStackNavigationOptions =
+	ComponentStackScreenTransitionConfig & {};
+
+export type ComponentStackNavigatorProps = DefaultNavigatorOptions<
+	ParamListBase,
+	string | undefined,
+	StackNavigationState<ParamListBase>,
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationEventMap,
+	ComponentStackNavigationProp<ParamListBase>
+> &
+	StackRouterOptions &
+	ComponentStackNavigationConfig;
+
+export type ComponentStackDescriptor = Descriptor<
+	ComponentStackNavigationOptions,
+	ComponentStackNavigationProp<ParamListBase>,
+	RouteProp<ParamListBase>
+>;
+
+export type ComponentStackDescriptorMap = {
+	[key: string]: ComponentStackDescriptor;
+};

package/src/{shared/components → native-stack}/controllers/native-stack-lifecycle.tsx

@@ -1,16 +1,16 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: <Lifecycles are rendered right under the gesture provider> */
 import { useEffect, useLayoutEffect } from "react";
 import { useDerivedValue } from "react-native-reanimated";
-import type { NativeStackDescriptor } from "../../../native-stack/types";
-import { useSharedValueState } from "../../hooks/reanimated/use-shared-value-state";
-import useStableCallback from "../../hooks/use-stable-callback";
-import { useGestureContext } from "../../providers/gestures.provider";
-import { useKeys } from "../../providers/keys.provider";
-import { AnimationStore } from "../../stores/animation.store";
-import { TRUE } from "../../types/state.types";
-import type { Any } from "../../types/utils.types";
-import { startScreenTransition } from "../../utils/animation/start-screen-transition";
-import { resetStoresForScreen } from "../../utils/reset-stores-for-screen";
+import { useHighRefreshRate } from "../../shared/hooks/animation/use-high-refresh-rate";
+import { useSharedValueState } from "../../shared/hooks/reanimated/use-shared-value-state";
+import useStableCallback from "../../shared/hooks/use-stable-callback";
+import { useGestureContext } from "../../shared/providers/gestures.provider";
+import { useKeys } from "../../shared/providers/screen/keys.provider";
+import { AnimationStore } from "../../shared/stores/animation.store";
+import { TRUE } from "../../shared/types/state.types";
+import { startScreenTransition } from "../../shared/utils/animation/start-screen-transition";
+import { resetStoresForScreen } from "../../shared/utils/reset-stores-for-screen";
+import type { NativeStackDescriptor } from "../types";
 
 export interface Props {
 	children: React.ReactNode;
@@ -34,7 +34,10 @@ export const NativeStackScreenLifecycleController = ({ children }: Props) => {
 
 	const animations = AnimationStore.getAll(current.route.key);
 
-	const handleBeforeRemove = useStableCallback((e: Any) => {
+	const { deactivateHighRefreshRate, activateHighRefreshRate } =
+		useHighRefreshRate(current);
+
+	const handleBeforeRemove = useStableCallback((e: any) => {
 		const isEnabled = current.options.enableTransitions;
 
 		const isFirstScreen = current.navigation.getState().index === 0;
@@ -47,7 +50,9 @@ export const NativeStackScreenLifecycleController = ({ children }: Props) => {
 		}
 
 		e.preventDefault();
+		activateHighRefreshRate();
 		const onAnimationFinish = (finished: boolean) => {
+			deactivateHighRefreshRate();
 			if (finished) {
 				current.navigation.dispatch(e.data.action);
 
@@ -67,10 +72,12 @@ export const NativeStackScreenLifecycleController = ({ children }: Props) => {
 	});
 
 	const handleInitialize = useStableCallback(() => {
+		activateHighRefreshRate();
 		startScreenTransition({
 			target: "open",
 			spec: current.options.transitionSpec,
 			animations,
+			onAnimationFinish: deactivateHighRefreshRate,
 		});
 	});
 

package/src/native-stack/index.ts

@@ -8,5 +8,6 @@ export type {
 	NativeStackNavigationProp,
 	NativeStackNavigatorProps,
 	NativeStackOptionsArgs,
+	NativeStackOverlayProps,
 	NativeStackScreenProps,
 } from "./types";

package/src/native-stack/types.ts

@@ -22,12 +22,8 @@ import type {
 	ScreenStackHeaderConfigProps,
 	SearchBarProps,
 } from "react-native-screens";
-import type { ScreenTransitionConfig } from "../shared/types/core.types";
-
-export type Layout = {
-	width: number;
-	height: number;
-};
+import type { OverlayProps } from "../shared/types/overlay.types";
+import type { ScreenTransitionConfig } from "../shared/types/screen.types";
 
 export type NativeStackNavigationEventMap = {
 	/**
@@ -90,7 +86,7 @@ export type NativeStackNavigationHelpers = NavigationHelpers<
 >;
 
 // We want it to be an empty object because navigator does not have any additional props
-export type NativeStackNavigationConfig = {};
+type NativeStackNavigationConfig = {};
 
 export type NativeStackHeaderProps = {
 	/**
@@ -143,6 +139,14 @@ export type NativeStackHeaderLeftProps = NativeStackHeaderRightProps & {
 	href?: string;
 };
 
+/**
+ * Props passed to overlay components in native-stack.
+ * Uses the shared OverlayProps type with native-stack's navigation type.
+ */
+export type NativeStackOverlayProps = OverlayProps<
+	NativeStackNavigationProp<ParamListBase>
+>;
+
 export type NativeStackScreenTransitionConfig = ScreenTransitionConfig & {
 	/**
 	 * Whether to enable transitions. It sets the presentation to containedTransparentModal, animation none, and headerShown to false.