react-native-screen-transitions 2.0.1 → 2.0.3

package/src/integrations/native-stack/navigators/createNativeStackNavigator.tsx

@@ -0,0 +1,112 @@
+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 type {
+	NativeStackNavigationEventMap,
+	NativeStackNavigationOptions,
+	NativeStackNavigationProp,
+	NativeStackNavigatorProps,
+} from "../../../types/navigator";
+import { NativeStackView } from "../views/NativeStackView";
+
+function NativeStackNavigator({
+	id,
+	initialRouteName,
+	children,
+	layout,
+	screenListeners,
+	screenOptions,
+	screenLayout,
+	...rest
+}: NativeStackNavigatorProps) {
+	const { state, describe, descriptors, navigation, NavigationContent } =
+		useNavigationBuilder<
+			StackNavigationState<ParamListBase>,
+			StackRouterOptions,
+			StackActionHelpers<ParamListBase>,
+			NativeStackNavigationOptions,
+			NativeStackNavigationEventMap
+		>(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>
+			<NativeStackView
+				{...rest}
+				state={state}
+				navigation={navigation}
+				descriptors={descriptors}
+				describe={describe}
+			/>
+		</NavigationContent>
+	);
+}
+
+export function createNativeStackNavigator<
+	const ParamList extends ParamListBase,
+	const NavigatorID extends string | undefined = undefined,
+	const TypeBag extends NavigatorTypeBagBase = {
+		ParamList: ParamList;
+		NavigatorID: NavigatorID;
+		State: StackNavigationState<ParamList>;
+		ScreenOptions: NativeStackNavigationOptions;
+		EventMap: NativeStackNavigationEventMap;
+		NavigationList: {
+			[RouteName in keyof ParamList]: NativeStackNavigationProp<
+				ParamList,
+				RouteName,
+				NavigatorID
+			>;
+		};
+		Navigator: typeof NativeStackNavigator;
+	},
+	const Config extends StaticConfig<TypeBag> = StaticConfig<TypeBag>,
+>(config?: Config): TypedNavigator<TypeBag, Config> {
+	return createNavigatorFactory(NativeStackNavigator)(config);
+}

package/src/integrations/native-stack/utils/debounce.tsx

@@ -0,0 +1,14 @@
+export function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  duration: number
+): T {
+  let timeout: ReturnType<typeof setTimeout>;
+
+  return function (this: unknown, ...args) {
+    clearTimeout(timeout);
+
+    timeout = setTimeout(() => {
+      func.apply(this, args);
+    }, duration);
+  } as T;
+}

package/src/integrations/native-stack/utils/getModalRoutesKeys.ts

@@ -0,0 +1,21 @@
+import type { Route } from "@react-navigation/native";
+
+import type { NativeStackDescriptorMap } from "../../../types/navigator";
+
+export const getModalRouteKeys = (
+	routes: Route<string>[],
+	descriptors: NativeStackDescriptorMap,
+) =>
+	routes.reduce<string[]>((acc, route) => {
+		const { presentation } = descriptors[route.key]?.options ?? {};
+
+		if (
+			(acc.length && !presentation) ||
+			presentation === "modal" ||
+			presentation === "transparentModal"
+		) {
+			acc.push(route.key);
+		}
+
+		return acc;
+	}, []);

package/src/integrations/native-stack/utils/useAnimatedHeaderHeight.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { Animated } from 'react-native';
+
+export const AnimatedHeaderHeightContext = React.createContext<
+  Animated.AnimatedInterpolation<number> | undefined
+>(undefined);
+
+export function useAnimatedHeaderHeight() {
+  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
+
+  if (animatedValue === undefined) {
+    throw new Error(
+      "Couldn't find the header height. Are you inside a screen in a native stack navigator?"
+    );
+  }
+
+  return animatedValue;
+}

package/src/integrations/native-stack/utils/useDismissedRouteError.tsx

@@ -0,0 +1,30 @@
+import type {
+  ParamListBase,
+  StackNavigationState,
+} from '@react-navigation/native';
+import * as React from 'react';
+
+export function useDismissedRouteError(
+  state: StackNavigationState<ParamListBase>
+) {
+  const [nextDismissedKey, setNextDismissedKey] = React.useState<string | null>(
+    null
+  );
+
+  const dismissedRouteName = nextDismissedKey
+    ? state.routes.find((route) => route.key === nextDismissedKey)?.name
+    : null;
+
+  React.useEffect(() => {
+    if (dismissedRouteName) {
+      const message =
+        `The screen '${dismissedRouteName}' was removed natively but didn't get removed from JS state. ` +
+        `This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.\n\n` +
+        `Consider using a 'usePreventRemove' hook with 'headerBackButtonMenuEnabled: false' to prevent users from natively going back multiple screens.`;
+
+      console.error(message);
+    }
+  }, [dismissedRouteName]);
+
+  return { setNextDismissedKey };
+}

package/src/integrations/native-stack/utils/useInvalidPreventRemoveError.tsx

@@ -0,0 +1,31 @@
+import { usePreventRemoveContext } from "@react-navigation/native";
+import * as React from "react";
+
+import type { NativeStackDescriptorMap } from "../../../types/navigator";
+
+export function useInvalidPreventRemoveError(
+	descriptors: NativeStackDescriptorMap,
+) {
+	const { preventedRoutes } = usePreventRemoveContext();
+	const preventedRouteKey = Object.keys(preventedRoutes)[0];
+	const preventedDescriptor = descriptors[preventedRouteKey];
+	const isHeaderBackButtonMenuEnabledOnPreventedScreen =
+		preventedDescriptor?.options?.headerBackButtonMenuEnabled;
+	const preventedRouteName = preventedDescriptor?.route?.name;
+
+	React.useEffect(() => {
+		if (
+			preventedRouteKey != null &&
+			isHeaderBackButtonMenuEnabledOnPreventedScreen
+		) {
+			const message =
+				`The screen ${preventedRouteName} uses 'usePreventRemove' hook alongside 'headerBackButtonMenuEnabled: true', which is not supported. \n\n` +
+				`Consider removing 'headerBackButtonMenuEnabled: true' from ${preventedRouteName} screen to get rid of this error.`;
+			console.error(message);
+		}
+	}, [
+		preventedRouteKey,
+		isHeaderBackButtonMenuEnabledOnPreventedScreen,
+		preventedRouteName,
+	]);
+}

package/src/integrations/native-stack/views/FontProcessor.native.tsx

@@ -0,0 +1,12 @@
+// @ts-expect-error importing private module
+import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
+
+export function processFonts(
+  fontFamilies: (string | undefined)[]
+): (string | undefined)[] {
+  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
+  if (typeof fontFamilyProcessor === 'function') {
+    return fontFamilies.map(fontFamilyProcessor);
+  }
+  return fontFamilies;
+}

package/src/integrations/native-stack/views/FontProcessor.tsx

@@ -0,0 +1,5 @@
+export function processFonts(
+  _: (string | undefined)[]
+): (string | undefined)[] {
+  throw new Error('Not supported on Web');
+}

package/src/integrations/native-stack/views/FooterComponent.tsx

@@ -0,0 +1,10 @@
+import type React from "react";
+import { ScreenFooter } from "react-native-screens";
+
+type FooterProps = {
+	children?: React.ReactNode;
+};
+
+export function FooterComponent({ children }: FooterProps) {
+	return <ScreenFooter collapsable={false}>{children}</ScreenFooter>;
+}