@react-navigation/native 7.2.5 → 7.3.0

package/src/createStandardNavigationFactories.tsx

@@ -0,0 +1,294 @@
+import {
+  CommonActions,
+  createNavigatorFactory,
+  createScreenFactory,
+  type DefaultNavigatorOptions,
+  type DefaultRouterOptions,
+  type EventMapBase,
+  type NavigationAction,
+  type NavigationProp,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type RouterFactory,
+  type StaticConfig,
+  type StaticParamList,
+  type StaticScreenFactory,
+  type TypedNavigator,
+  useNavigationBuilder,
+} from '@react-navigation/core';
+import * as React from 'react';
+import type {
+  createStandardNavigator,
+  NavigatorArgs as StandardNavigationArgs,
+} from 'standard-navigation';
+
+import { useBuildHref } from './useLinkBuilder';
+import { useMemoArray } from './useMemoArray';
+
+type StandardEventMap<EventMap extends EventMapBase> = {
+  [EventName in keyof EventMap]: {
+    data: EventMap[EventName] extends { data?: infer Data }
+      ? Data extends object | undefined
+        ? Data
+        : object | undefined
+      : undefined;
+    canPreventDefault: EventMap[EventName] extends { canPreventDefault: true }
+      ? true
+      : false;
+  };
+};
+
+type ActionHelpersOf<T> =
+  T extends Record<string, (...args: never[]) => unknown> ? T : {};
+
+type StandardNavigationNavigatorProps<
+  TypeBag extends StandardNavigationTypeBagBase,
+> = TypeBag['RouterOptions'] &
+  DefaultNavigatorOptions<
+    ParamListBase,
+    string | undefined,
+    StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'],
+    TypeBag['ScreenOptions'],
+    TypeBag['EventMap'],
+    StandardNavigation<TypeBag>
+  >;
+
+type StandardNavigationTypeBagFor<
+  TypeBag extends StandardNavigationTypeBagBase,
+  ParamList extends ParamListBase,
+  NavigatorID extends string | undefined = string | undefined,
+> = TypeBag & {
+  ParamList: ParamList;
+  NavigatorID: NavigatorID;
+};
+
+type StandardNavigation<TypeBag extends StandardNavigationTypeBagBase> =
+  StandardNavigationTypeBagFor<
+    TypeBag,
+    ParamListBase
+  >['NavigationList'][keyof StandardNavigationTypeBagFor<
+    TypeBag,
+    ParamListBase
+  >['NavigationList']];
+
+type StandardNavigationPropsMapper<
+  TypeBag extends StandardNavigationTypeBagBase,
+  NavigatorProps extends object,
+> = (props: {
+  state: StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'];
+  navigation: StandardNavigation<TypeBag>;
+}) => Partial<NavigatorProps>;
+
+type StandardNavigationDefaultBag<
+  TypeBag extends StandardNavigationTypeBagBase,
+> = StandardNavigationTypeBagFor<TypeBag, ParamListBase, string | undefined>;
+
+type StandardNavigationFactories<
+  TypeBag extends StandardNavigationTypeBagBase,
+> = {
+  createNavigator: StandardNavigationCreateNavigator<TypeBag>;
+  createScreen: StaticScreenFactory<StandardNavigationDefaultBag<TypeBag>>;
+};
+
+export type StandardNavigationCreateNavigator<
+  TypeBag extends StandardNavigationTypeBagBase,
+> = {
+  <
+    const ParamList extends ParamListBase,
+    const NavigatorID extends string | undefined = string | undefined,
+  >(): TypedNavigator<
+    StandardNavigationTypeBagFor<TypeBag, ParamList, NavigatorID>,
+    undefined
+  >;
+  <const Config extends StaticConfig<StandardNavigationDefaultBag<TypeBag>>>(
+    config: Config & StaticConfig<StandardNavigationDefaultBag<TypeBag>>
+  ): TypedNavigator<
+    StandardNavigationTypeBagFor<
+      TypeBag,
+      StaticParamList<{ config: Config }> & ParamListBase,
+      string | undefined
+    >,
+    Config
+  >;
+};
+
+export interface StandardNavigationTypeBagBase extends NavigatorTypeBagBase {
+  ActionHelpers: {};
+  ScreenOptions: {};
+  EventMap: EventMapBase;
+  RouterOptions: DefaultRouterOptions;
+  NavigationList: {
+    [RouteName in keyof this['ParamList']]: NavigationProp<
+      this['ParamList'],
+      RouteName,
+      this['NavigatorID'],
+      this['State'],
+      this['ScreenOptions'],
+      this['EventMap']
+    > &
+      ActionHelpersOf<this['ActionHelpers']>;
+  };
+  Navigator: React.ComponentType<{}>;
+}
+
+export function createStandardNavigationFactories<
+  TypeBag extends StandardNavigationTypeBagBase,
+  NavigatorProps extends object = {},
+>(
+  navigator: ReturnType<
+    typeof createStandardNavigator<
+      TypeBag['ScreenOptions'],
+      StandardEventMap<TypeBag['EventMap']>,
+      NavigatorProps
+    >
+  >,
+  router: RouterFactory<
+    StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'],
+    NavigationAction,
+    TypeBag['RouterOptions']
+  >,
+  mapper?: StandardNavigationPropsMapper<TypeBag, NavigatorProps>
+): StandardNavigationFactories<TypeBag> {
+  const { type, version, NavigatorContent } = navigator;
+
+  if (type !== 'standard') {
+    throw new Error(
+      `createStandardNavigationFactories only works with standard navigator objects, but got navigator of ${typeof type === 'string' ? `type "${type}".` : 'unknown type.'}`
+    );
+  }
+
+  if (version !== 1) {
+    throw new Error(
+      `createStandardNavigationFactories only works with version 1 of standard navigator objects, but got version ${version}.`
+    );
+  }
+
+  type Bag = StandardNavigationTypeBagFor<TypeBag, ParamListBase>;
+  type StandardArgs = StandardNavigationArgs<
+    TypeBag['ScreenOptions'],
+    StandardEventMap<TypeBag['EventMap']>
+  >;
+
+  function StandardNavigationNavigator(
+    props: StandardNavigationNavigatorProps<TypeBag>
+  ) {
+    const builder = useNavigationBuilder<
+      Bag['State'],
+      TypeBag['RouterOptions'],
+      ActionHelpersOf<Bag['ActionHelpers']>,
+      TypeBag['ScreenOptions'],
+      TypeBag['EventMap']
+    >(router, props);
+
+    const buildHref = useBuildHref();
+
+    const routes = useMemoArray(
+      ('preloadedRoutes' in builder.state &&
+      Array.isArray(builder.state.preloadedRoutes)
+        ? builder.state.routes.concat(builder.state.preloadedRoutes)
+        : builder.state.routes
+      ).map((route) => {
+        const href = buildHref(route.name, route.params);
+
+        return [
+          {
+            key: route.key,
+            name: route.name,
+            params: route.params,
+            href,
+          },
+          [route.key, route.name, route.params, href],
+        ];
+      })
+    );
+
+    const state = React.useMemo(
+      (): StandardArgs['state'] => ({
+        index: builder.state.index,
+        routes,
+      }),
+      [builder.state.index, routes]
+    );
+
+    const descriptors: StandardArgs['descriptors'] = {};
+
+    for (const route of state.routes) {
+      const descriptor =
+        builder.descriptors[route.key] ?? builder.describe(route, true);
+
+      descriptors[route.key] = {
+        options: descriptor.options,
+        render: descriptor.render,
+      };
+    }
+
+    const actions = React.useMemo<StandardArgs['actions']>(
+      () => ({
+        navigate(name, params) {
+          builder.navigation.dispatch({
+            ...CommonActions.navigate(name, params),
+            target: builder.state.key,
+          });
+        },
+        back() {
+          builder.navigation.goBack();
+        },
+      }),
+      [builder.navigation, builder.state.key]
+    );
+
+    const emitter = React.useMemo<StandardArgs['emitter']>(
+      () => ({
+        // @ts-expect-error - they are compatible
+        emit: builder.navigation.emit,
+      }),
+      [builder.navigation]
+    );
+
+    const mapped = mapper?.({
+      state: builder.state,
+      navigation: builder.navigation as StandardNavigation<TypeBag>,
+    });
+
+    // Omit props used by useNavigationBuilder and routers internally
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      children,
+      id,
+      initialRouteName,
+      layout,
+      screenLayout,
+      screenListeners,
+      screenOptions,
+      UNSTABLE_routeNamesChangeBehavior,
+      UNSTABLE_router,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = props;
+
+    return (
+      <builder.NavigationContent>
+        <NavigatorContent
+          {...(rest as NavigatorProps)}
+          {...mapped}
+          state={state}
+          descriptors={descriptors}
+          actions={actions}
+          emitter={emitter}
+        />
+      </builder.NavigationContent>
+    );
+  }
+
+  const createNavigator = createNavigatorFactory(
+    StandardNavigationNavigator
+  ) as StandardNavigationCreateNavigator<TypeBag>;
+
+  const createScreen =
+    createScreenFactory<StandardNavigationDefaultBag<TypeBag>>();
+
+  return {
+    createNavigator,
+    createScreen,
+  };
+}

package/src/index.tsx

@@ -1,3 +1,8 @@
+export {
+  createStandardNavigationFactories,
+  type StandardNavigationCreateNavigator,
+  type StandardNavigationTypeBagBase,
+} from './createStandardNavigationFactories';
 export { createStaticNavigation } from './createStaticNavigation';
 export { Link } from './Link';
 export { LinkingContext } from './LinkingContext';

package/src/useLinking.native.tsx

@@ -55,8 +55,7 @@ export function useLinking(
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -69,28 +68,40 @@ export function useLinking(
       return undefined;
     }
 
-    if (enabled !== false && linkingHandlers.length) {
-      console.error(
-        [
-          'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
-          "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
-          '- Only a single instance of the root component is rendered',
-          Platform.OS === 'android'
-            ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
-            : '',
-        ]
-          .join('\n')
-          .trim()
-      );
-    }
-
     const handler = Symbol();
 
     if (enabled !== false) {
       linkingHandlers.push(handler);
     }
 
+    // In some cases, the effect cleanup may get called out of order
+    // This may result in multiple linking handlers being registered
+    // For example, when changing the wallpaper on Android
+    // Showing the error in a delay avoids false positives
+    const timer = setTimeout(() => {
+      if (
+        enabled !== false &&
+        linkingHandlers.length &&
+        !(linkingHandlers.length === 1 && linkingHandlers.includes(handler))
+      ) {
+        console.error(
+          [
+            'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
+            "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
+            '- Only a single instance of the root component is rendered',
+            Platform.OS === 'android'
+              ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
+              : '',
+          ]
+            .join('\n')
+            .trim()
+        );
+      }
+    }, 1000);
+
     return () => {
+      clearTimeout(timer);
+
       const index = linkingHandlers.indexOf(handler);
 
       if (index > -1) {
@@ -152,15 +163,8 @@ export function useLinking(
           return url.then((url) => {
             const state = getStateFromURL(url);
 
-            if (typeof url === 'string') {
-              // If the link were handled, it gets cleared in NavigationContainer
-              onUnhandledLinking(extractPathFromURL(prefixes, url));
-            }
-
             return state;
           });
-        } else {
-          onUnhandledLinking(extractPathFromURL(prefixes, url));
         }
       }
 
@@ -177,7 +181,7 @@ export function useLinking(
     };
 
     return thenable as PromiseLike<ResultState | undefined>;
-  }, [getStateFromURL, onUnhandledLinking, prefixes]);
+  }, [getStateFromURL]);
 
   React.useEffect(() => {
     const listener = (url: string) => {
@@ -189,9 +193,6 @@ export function useLinking(
       const state = navigation ? getStateFromURL(url) : undefined;
 
       if (navigation && state) {
-        // If the link were handled, it gets cleared in NavigationContainer
-        onUnhandledLinking(extractPathFromURL(prefixes, url));
-
         const action = getActionFromStateRef.current(state, configRef.current);
 
         if (action !== undefined) {
@@ -215,7 +216,7 @@ export function useLinking(
     };
 
     return subscribe(listener);
-  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe]);
+  }, [enabled, getStateFromURL, ref, subscribe]);
 
   return {
     getInitialState,

package/src/useLinking.tsx

@@ -110,8 +110,7 @@ export function useLinking(
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -202,9 +201,6 @@ export function useLinking(
           value = undefined;
         }
       }
-
-      // If the link were handled, it gets cleared in NavigationContainer
-      onUnhandledLinking(path);
     }
 
     const thenable = {
@@ -287,8 +283,6 @@ export function useLinking(
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
       if (state) {
-        // If the link were handled, it gets cleared in NavigationContainer
-        onUnhandledLinking(path);
         // Make sure that the routes in the state exist in the root navigator
         // Otherwise there's an error in the linking configuration
         if (validateRoutesNotExistInRootState(state)) {
@@ -326,13 +320,7 @@ export function useLinking(
         navigation.resetRoot(state);
       }
     });
-  }, [
-    enabled,
-    history,
-    onUnhandledLinking,
-    ref,
-    validateRoutesNotExistInRootState,
-  ]);
+  }, [enabled, history, ref, validateRoutesNotExistInRootState]);
 
   React.useEffect(() => {
     if (!enabled) {

package/src/useMemoArray.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+export function useMemoArray<T>(
+  entries: [item: T, deps: readonly unknown[]][]
+): T[] {
+  const previousRef = React.useRef<
+    | {
+        entries: { item: T; deps: readonly unknown[] }[];
+        items: T[];
+      }
+    | undefined
+  >(undefined);
+
+  const previous = previousRef.current;
+  const next = entries.map(([item, deps], index) => {
+    const previousEntry = previous?.entries[index];
+    const depsEqual =
+      previousEntry &&
+      previousEntry.deps.length === deps.length &&
+      previousEntry.deps.every((it, index) => Object.is(it, deps[index]));
+
+    return depsEqual ? previousEntry : { item, deps };
+  });
+
+  if (
+    previous &&
+    previous.entries.length === next.length &&
+    next.every((entry, index) => entry === previous.entries[index])
+  ) {
+    return previous.items;
+  }
+
+  const items = next.map((entry) => entry.item);
+
+  previousRef.current = {
+    entries: next,
+    items,
+  };
+
+  return items;
+}