react-native-screen-transitions 2.4.1 → 2.4.2-beta.1

package/src/integrations/blank-stack/utils/with-stack-navigation/_utils/routes-are-identical.ts

@@ -0,0 +1,11 @@
+import type { Route } from "@react-navigation/native";
+
+export const routesAreIdentical = (
+	a: Route<string>[],
+	b: Route<string>[],
+): boolean => {
+	if (a === b) return true;
+	if (a.length !== b.length) return false;
+
+	return a.every((route, index) => route === b[index]);
+};

package/src/integrations/blank-stack/utils/with-stack-navigation/index.tsx

@@ -0,0 +1,93 @@
+import {
+  type ComponentType,
+  createContext,
+  memo,
+  useContext,
+  useMemo,
+} from "react";
+import { Header } from "../../components/Header";
+import type { BlankStackScene } from "../../../../types/blank-stack.navigator";
+import { useStackNavigationState } from "./_hooks/use-stack-navigation-state";
+import type {
+  StackNavigationContextProps,
+  StackNavigationContextValue,
+} from "./_types";
+import { calculateActiveScreensLimit } from "./_utils/calculate-active-screens-limit";
+
+export const StackNavigationContext =
+  createContext<StackNavigationContextValue | null>(null);
+
+export function withStackNavigationProvider(
+  Component: ComponentType<StackNavigationContextValue>
+) {
+  return function StackNavigationWrapper(props: StackNavigationContextProps) {
+    const { state, handleCloseRoute, closingRouteKeys } =
+      useStackNavigationState(props);
+
+    const scenes = useMemo(() => {
+      return state.routes.reduce((acc, route) => {
+        acc.push({
+          route,
+          descriptor: state.descriptors[route.key],
+        });
+        return acc;
+      }, [] as BlankStackScene[]);
+    }, [state.routes, state.descriptors]);
+
+    const activeScreensLimit = useMemo(() => {
+      return calculateActiveScreensLimit(state.routes, state.descriptors);
+    }, [state.routes, state.descriptors]);
+
+    const FloatHeader = memo(() => {
+      const shouldShowFloatHeader = props.state.routes.some((route) => {
+        const options = props.descriptors[route.key]?.options;
+        return options?.headerMode === "float" && options?.headerShown;
+      });
+
+      if (!shouldShowFloatHeader) {
+        return null;
+      }
+
+      return <Header.Float />;
+    });
+
+    const contextValue = useMemo<StackNavigationContextValue>(() => {
+      return {
+        routes: state.routes,
+        focusedIndex: props.state.index,
+        descriptors: state.descriptors,
+        closingRouteKeysShared: closingRouteKeys.shared,
+        activeScreensLimit,
+        handleCloseRoute,
+        scenes,
+        FloatHeader,
+      };
+    }, [
+      state,
+      scenes,
+      activeScreensLimit,
+      closingRouteKeys,
+      handleCloseRoute,
+      props.state.index,
+      FloatHeader,
+    ]);
+
+    return (
+      <StackNavigationContext.Provider value={contextValue}>
+        <Component {...contextValue} />
+      </StackNavigationContext.Provider>
+    );
+  };
+}
+
+export const useStackNavigationContext = () => {
+  const context = useContext(StackNavigationContext);
+
+  if (!context) {
+    throw new Error(
+      "StackNavigationContext.Provider is missing in the component tree."
+    );
+  }
+
+  return context;
+};

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

@@ -1,112 +1,112 @@
 import {
-	createNavigatorFactory,
-	type EventArg,
-	type NavigatorTypeBagBase,
-	type ParamListBase,
-	type StackActionHelpers,
-	StackActions,
-	type StackNavigationState,
-	StackRouter,
-	type StackRouterOptions,
-	type StaticConfig,
-	type TypedNavigator,
-	useNavigationBuilder,
+  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";
+  NativeStackNavigationEventMap,
+  NativeStackNavigationOptions,
+  NativeStackNavigationProp,
+  NativeStackNavigatorProps,
+} from "../../../types/native-stack.navigator";
 import { NativeStackView } from "../views/NativeStackView";
 
 function NativeStackNavigator({
-	id,
-	initialRouteName,
-	children,
-	layout,
-	screenListeners,
-	screenOptions,
-	screenLayout,
-	...rest
+  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,
-		});
+  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();
+  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],
-	);
+        // 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>
-	);
+  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>,
+  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);
+  return createNavigatorFactory(NativeStackNavigator)(config);
 }

package/src/integrations/native-stack/providers/screen-transition-provider.tsx

@@ -0,0 +1,8 @@
+import type { NativeStackDescriptor } from "../../../types/native-stack.navigator";
+import { ScreenLifecycleController } from "../../../components/controllers/screen-lifecycle";
+import { createScreenTransitionProvider } from "../../../providers/create-screen-transition-provider";
+
+export const ScreenTransitionProvider =
+  createScreenTransitionProvider<NativeStackDescriptor>(
+    ScreenLifecycleController
+  );

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

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

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

@@ -1,31 +1,31 @@
 import { usePreventRemoveContext } from "@react-navigation/native";
 import * as React from "react";
 
-import type { NativeStackDescriptorMap } from "../../../types/navigator";
+import type { NativeStackDescriptorMap } from "../../../types/native-stack.navigator";
 
 export function useInvalidPreventRemoveError(
-	descriptors: NativeStackDescriptorMap,
+  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;
+  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,
-	]);
+  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,
+  ]);
 }