react-native-screen-transitions 2.4.2 → 3.0.0-beta.0

package/src/blank-stack/navigators/createBlankStackNavigator.tsx

@@ -0,0 +1,111 @@
+import {
+	createNavigatorFactory,
+	type EventArg,
+	type NavigatorTypeBagBase,
+	type ParamListBase,
+	type StackActionHelpers,
+	StackActions,
+	type StackNavigationState,
+	StackRouter,
+	type StackRouterOptions,
+	type StaticConfig,
+	type TypedNavigator,
+	useNavigationBuilder,
+} from "@react-navigation/native";
+import * as React from "react";
+import { StackView } from "../components/StackView";
+import type {
+	BlankStackNavigationEventMap,
+	BlankStackNavigationOptions,
+	BlankStackNavigationProp,
+	BlankStackNavigatorProps,
+} from "../types";
+
+function BlankStackNavigator({
+	id,
+	initialRouteName,
+	children,
+	layout,
+	screenListeners,
+	screenOptions,
+	screenLayout,
+	...rest
+}: BlankStackNavigatorProps) {
+	const { state, describe, descriptors, navigation, NavigationContent } =
+		useNavigationBuilder<
+			StackNavigationState<ParamListBase>,
+			StackRouterOptions,
+			StackActionHelpers<ParamListBase>,
+			BlankStackNavigationOptions,
+			BlankStackNavigationEventMap
+		>(StackRouter, {
+			id,
+			initialRouteName,
+			children,
+			layout,
+			screenListeners,
+			screenOptions,
+			screenLayout,
+		});
+
+	React.useEffect(
+		() =>
+			// @ts-expect-error: there may not be a tab navigator in parent
+			navigation?.addListener?.("tabPress", (e: any) => {
+				const isFocused = navigation.isFocused();
+
+				// Run the operation in the next frame so we're sure all listeners have been run
+				// This is necessary to know if preventDefault() has been called
+				requestAnimationFrame(() => {
+					if (
+						state.index > 0 &&
+						isFocused &&
+						!(e as EventArg<"tabPress", true>).defaultPrevented
+					) {
+						// When user taps on already focused tab and we're inside the tab,
+						// reset the stack to replicate native behaviour
+						navigation.dispatch({
+							...StackActions.popToTop(),
+							target: state.key,
+						});
+					}
+				});
+			}),
+		[navigation, state.index, state.key],
+	);
+
+	return (
+		<NavigationContent>
+			<StackView
+				{...rest}
+				state={state}
+				navigation={navigation}
+				descriptors={descriptors}
+				describe={describe}
+			/>
+		</NavigationContent>
+	);
+}
+
+export function createBlankStackNavigator<
+	const ParamList extends ParamListBase,
+	const NavigatorID extends string | undefined = undefined,
+	const TypeBag extends NavigatorTypeBagBase = {
+		ParamList: ParamList;
+		NavigatorID: NavigatorID;
+		State: StackNavigationState<ParamList>;
+		ScreenOptions: BlankStackNavigationOptions;
+		EventMap: BlankStackNavigationEventMap;
+		NavigationList: {
+			[RouteName in keyof ParamList]: BlankStackNavigationProp<
+				ParamList,
+				RouteName,
+				NavigatorID
+			>;
+		};
+		Navigator: typeof BlankStackNavigator;
+	},
+	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+	return createNavigatorFactory(BlankStackNavigator)(config);
+}

package/src/blank-stack/types.ts

@@ -0,0 +1,267 @@
+import type {
+	DefaultNavigatorOptions,
+	Descriptor,
+	NavigationHelpers,
+	NavigationProp,
+	ParamListBase,
+	Route,
+	RouteProp,
+	StackActionHelpers,
+	StackNavigationState,
+	StackRouterOptions,
+	Theme,
+} from "@react-navigation/native";
+import type { DerivedValue } from "react-native-reanimated";
+import type { EdgeInsets } from "react-native-safe-area-context";
+import type { ScreenProps } from "react-native-screens";
+import type {
+	OverlayInterpolationProps,
+	ScreenStyleInterpolator,
+	TransitionSpec,
+} from "../shared/types/animation";
+import type {
+	GestureActivationArea,
+	GestureDirection,
+} from "../shared/types/gesture";
+
+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 BlankStackNavigationProp<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = string,
+	NavigatorID extends string | undefined = undefined,
+> = NavigationProp<
+	ParamList,
+	RouteName,
+	NavigatorID,
+	StackNavigationState<ParamList>,
+	BlankStackNavigationOptions,
+	BlankStackNavigationEventMap
+> &
+	StackActionHelpers<ParamList>;
+
+export type BlankStackScreenProps<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = string,
+	NavigatorID extends string | undefined = undefined,
+> = {
+	navigation: BlankStackNavigationProp<ParamList, RouteName, NavigatorID>;
+	route: RouteProp<ParamList, RouteName>;
+};
+
+export type BlankStackOptionsArgs<
+	ParamList extends ParamListBase,
+	RouteName extends keyof ParamList = keyof ParamList,
+	NavigatorID extends string | undefined = undefined,
+> = BlankStackScreenProps<ParamList, RouteName, NavigatorID> & {
+	theme: Theme;
+};
+
+export type BlankStackNavigationHelpers = NavigationHelpers<
+	ParamListBase,
+	BlankStackNavigationEventMap
+>;
+
+export type BlankStackScene = {
+	route: Route<string>;
+	descriptor: BlankStackDescriptor;
+};
+
+// We want it to be an empty object because navigator does not have any additional props
+export type BlankStackNavigationConfig = {};
+
+export type BlankStackOverlayProps = {
+	/**
+	 * Options for the back button.
+	 */
+	back?: {
+		/**
+		 * Title of the previous screen.
+		 */
+		title: string;
+	};
+	/**
+	 * Route object for the current screen.
+	 */
+	route: Route<string>;
+	/**
+	 * Navigation prop for the overlay.
+	 */
+	navigation: BlankStackNavigationProp<ParamListBase>;
+	/**
+	 * Safe area insets for the screen.
+	 */
+	insets: EdgeInsets;
+	/**
+	 * Accumulated progress across the stack for the overlay owner and subsequent screens.
+	 */
+	animation: DerivedValue<OverlayInterpolationProps>;
+	/**
+	 * Index of the active route
+	 */
+	focusedIndex: number;
+};
+
+export type BlankStackScreenTransitionConfig = {
+	/**
+	 * The user-provided function to calculate styles based on animation progress.
+	 */
+	screenStyleInterpolator?: ScreenStyleInterpolator;
+	/**
+	 * The Reanimated animation config for opening and closing transitions.
+	 */
+	transitionSpec?: TransitionSpec;
+	/**
+	 * Whether the gesture is enabled.
+	 */
+	gestureEnabled?: boolean;
+	/**
+	 * The direction of the swipe gesture used to dismiss the screen.
+	 */
+	gestureDirection?: GestureDirection | GestureDirection[];
+	/**
+	 * How much the gesture's final velocity impacts the dismiss decision.
+	 */
+	gestureVelocityImpact?: number;
+	/**
+	 * 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;
+	/**
+	 * Distance threshold for gesture recognition throughout the screen.
+	 */
+	gestureResponseDistance?: number;
+	/**
+	 * Whether the gesture drives the progress.
+	 */
+	gestureDrivesProgress?: boolean;
+	/**
+	 * The area of the screen where the gesture is activated.
+	 */
+	gestureActivationArea?: GestureActivationArea;
+};
+
+export type BlankStackNavigationOptions = BlankStackScreenTransitionConfig & {
+	/**
+	 * Function that given `OverlayProps` returns a React Element to display as a overlay.
+	 */
+	overlay?: (props: BlankStackOverlayProps) => React.ReactNode;
+	/**
+	 * Layout: How the Overlay is positioned
+	 * - 'float': Single persistent overlay above all screens (like iOS)
+	 * - 'screen': Per-screen overlay that transitions with content
+	 * @default 'screen'
+	 */
+	overlayMode?: "float" | "screen";
+	/**
+	 * Whether to show the overlay. The overlay is shown by default.
+	 * Setting this to `false` hides the overlay.
+	 */
+	overlayShown?: boolean;
+
+	/**
+	 * Whether the home indicator should prefer to stay hidden on this screen. Defaults to `false`.
+	 *
+	 * @platform ios
+	 */
+	autoHideHomeIndicator?: boolean;
+	/**
+	 * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`.
+	 *
+	 * @platform ios
+	 */
+	keyboardHandlingEnabled?: boolean;
+	/**
+	 * Sets the visibility of the navigation bar. Defaults to `false`.
+	 *
+	 * @platform android
+	 */
+	navigationBarHidden?: boolean;
+	/**
+	 * Sets the status bar animation (similar to the `StatusBar` component).
+	 * On Android, setting either `fade` or `slide` will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar.
+	 * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
+	 *
+	 * Defaults to `fade` on iOS and `none` on Android.
+	 *
+	 * Only supported on Android and iOS.
+	 *
+	 * @platform android, ios
+	 */
+	statusBarAnimation?: ScreenProps["statusBarAnimation"];
+	/**
+	 * Whether the status bar should be hidden on this screen.
+	 * Requires setting `View controller-based status bar appearance -> YES` in your Info.plist file.
+	 *
+	 * Only supported on Android and iOS.
+	 *
+	 * @platform android, ios
+	 */
+	statusBarHidden?: boolean;
+	/**
+	 * Sets the status bar color (similar to the `StatusBar` component).
+	 * Requires setting `View controller-based status bar appearance -> YES` (or removing the config) in your `Info.plist` file.
+	 * `auto` and `inverted` are supported only on iOS. On Android, they will fallback to `light`.
+	 *
+	 * Defaults to `auto` on iOS and `light` on Android.
+	 *
+	 * Only supported on Android and iOS.
+	 *
+	 * @platform android, ios
+	 */
+	statusBarStyle?: ScreenProps["statusBarStyle"];
+	/**
+	 * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
+	 * Defaults to `true` when `enableFreeze()` is run at the top of the application.
+	 * Requires `react-native-screens` version >=3.16.0.
+	 *
+	 * Only supported on iOS and Android.
+	 */
+	freezeOnBlur?: boolean;
+};
+
+export type BlankStackNavigatorProps = DefaultNavigatorOptions<
+	ParamListBase,
+	string | undefined,
+	StackNavigationState<ParamListBase>,
+	BlankStackNavigationOptions,
+	BlankStackNavigationEventMap,
+	BlankStackNavigationProp<ParamListBase>
+> &
+	StackRouterOptions &
+	BlankStackNavigationConfig;
+
+export type BlankStackDescriptor = Descriptor<
+	BlankStackNavigationOptions,
+	BlankStackNavigationProp<ParamListBase>,
+	RouteProp<ParamListBase>
+>;
+
+export type BlankStackDescriptorMap = {
+	[key: string]: BlankStackDescriptor;
+};

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

@@ -0,0 +1,71 @@
+import { useMemo, useRef } from "react";
+import { useSharedValue } from "react-native-reanimated";
+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) => {
+		const keys = keysRef.current;
+		if (keys.has(key)) {
+			return;
+		}
+
+		finishedRef.current.delete(key);
+		keys.add(key);
+		shared.modify((prev) => {
+			"worklet";
+			if (!prev.includes(key)) {
+				prev.push(key);
+			}
+			return prev;
+		});
+	});
+
+	const remove = useStableCallback((key: string) => {
+		const keys = keysRef.current;
+		if (!keys.delete(key)) {
+			finishedRef.current.delete(key);
+			return;
+		}
+
+		finishedRef.current.delete(key);
+		shared.modify((prev) => {
+			"worklet";
+			const index = prev.indexOf(key);
+			if (index !== -1) {
+				prev.splice(index, 1);
+			}
+			return prev;
+		});
+	});
+
+	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;
+			return prev;
+		});
+	});
+
+	return useMemo(
+		() => ({
+			ref: keysRef,
+			shared,
+			add,
+			remove,
+			clear,
+		}),
+		[shared, add, remove, clear],
+	);
+};

package/src/blank-stack/utils/with-stack-navigation/_hooks/use-previous.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+
+export const usePrevious = <T,>(value: T): T | null => {
+	const ref = useRef<T>(null);
+
+	useEffect(() => {
+		ref.current = value;
+	});
+
+	return ref.current;
+};