@react-navigation/native 8.0.0-alpha.4 → 8.0.0-alpha.41

package/src/theming/fonts.tsx

@@ -1,62 +1,23 @@
 import type { Theme } from '@react-navigation/core';
-import { Platform } from 'react-native';
 
 const WEB_FONT_STACK =
   'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
 
-export const fonts = Platform.select({
-  web: {
-    regular: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '400',
-    },
-    medium: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '500',
-    },
-    bold: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: WEB_FONT_STACK,
-      fontWeight: '700',
-    },
+export const fonts = {
+  regular: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '400',
   },
-  ios: {
-    regular: {
-      fontFamily: 'System',
-      fontWeight: '400',
-    },
-    medium: {
-      fontFamily: 'System',
-      fontWeight: '500',
-    },
-    bold: {
-      fontFamily: 'System',
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: 'System',
-      fontWeight: '700',
-    },
+  medium: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '500',
   },
-  default: {
-    regular: {
-      fontFamily: 'sans-serif',
-      fontWeight: 'normal',
-    },
-    medium: {
-      fontFamily: 'sans-serif-medium',
-      fontWeight: 'normal',
-    },
-    bold: {
-      fontFamily: 'sans-serif',
-      fontWeight: '600',
-    },
-    heavy: {
-      fontFamily: 'sans-serif',
-      fontWeight: '700',
-    },
+  bold: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '600',
   },
-} as const satisfies Record<string, Theme['fonts']>);
+  heavy: {
+    fontFamily: WEB_FONT_STACK,
+    fontWeight: '700',
+  },
+} as const satisfies Theme['fonts'];

package/src/types.tsx

@@ -68,7 +68,7 @@ export type LinkingOptions<ParamList extends {}> = {
    *
    * Defaults to `true` when a linking config is specified.
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * The prefixes to match to determine whether to handle a URL.
    *
@@ -96,7 +96,7 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  prefixes?: LinkingPrefix[];
+  prefixes?: LinkingPrefix[] | undefined;
   /**
    * Optional function which takes an incoming URL returns a boolean
    * indicating whether React Navigation should handle it.
@@ -114,7 +114,7 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  filter?: (url: string) => boolean;
+  filter?: ((url: string) => boolean) | undefined;
   /**
    * Config to fine-tune how to parse the path.
    *
@@ -128,23 +128,25 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  config?: {
-    /**
-     * Path string to match against for the whole navigation tree.
-     * It's not possible to specify params here since this doesn't belong to a screen.
-     * This is useful when the whole app is under a specific path.
-     * e.g. all of the screens are under `/admin` in `https://example.com/admin`
-     */
-    path?: string;
-    /**
-     * Path configuration for child screens.
-     */
-    screens: PathConfigMap<ParamList>;
-    /**
-     * Name of the initial route to use for the root navigator.
-     */
-    initialRouteName?: keyof ParamList;
-  };
+  config?:
+    | {
+        /**
+         * Path string to match against for the whole navigation tree.
+         * It's not possible to specify params here since this doesn't belong to a screen.
+         * This is useful when the whole app is under a specific path.
+         * e.g. all of the screens are under `/admin` in `https://example.com/admin`
+         */
+        path?: string | undefined;
+        /**
+         * Path configuration for child screens.
+         */
+        screens: PathConfigMap<ParamList>;
+        /**
+         * Name of the initial route to use for the root navigator.
+         */
+        initialRouteName?: Extract<keyof ParamList, string> | undefined;
+      }
+    | undefined;
   /**
    * Custom function to get the initial URL used for linking.
    * Uses `Linking.getInitialURL()` by default.
@@ -158,11 +160,9 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  getInitialURL?: () =>
-    | string
-    | null
-    | undefined
-    | Promise<string | null | undefined>;
+  getInitialURL?:
+    | (() => string | null | undefined | Promise<string | null | undefined>)
+    | undefined;
   /**
    * Custom function to get subscribe to URL updates.
    * Uses `Linking.addEventListener('url', callback)` by default.
@@ -184,46 +184,53 @@ export type LinkingOptions<ParamList extends {}> = {
    * }
    * ```
    */
-  subscribe?: (
-    listener: (url: string) => void
-  ) => undefined | void | (() => void);
+  subscribe?:
+    | ((listener: (url: string) => void) => undefined | void | (() => void))
+    | undefined;
   /**
    * Custom function to parse the URL to a valid navigation state (advanced).
    */
-  getStateFromPath?: typeof getStateFromPathDefault;
+  getStateFromPath?: typeof getStateFromPathDefault | undefined;
   /**
    * Custom function to convert the state object to a valid URL (advanced).
    * Only applicable on Web.
    */
-  getPathFromState?: typeof getPathFromStateDefault;
+  getPathFromState?: typeof getPathFromStateDefault | undefined;
   /**
    * Custom function to convert the state object to a valid action (advanced).
    */
-  getActionFromState?: typeof getActionFromStateDefault;
+  getActionFromState?: typeof getActionFromStateDefault | undefined;
 };
 
 export type DocumentTitleOptions = {
-  enabled?: boolean;
-  formatter?: (
-    options: Record<string, any> | undefined,
-    route: Route<string> | undefined
-  ) => string;
+  enabled?: boolean | undefined;
+  formatter?:
+    | ((
+        options: Record<string, any> | undefined,
+        route: Route<string> | undefined
+      ) => string)
+    | undefined;
 };
 
 export type Persistor = {
   /**
-   * Callback to persist the navigation state.
+   * Callback to persist the serialized navigation state.
    */
-  persist(state: NavigationState | undefined): void;
+  persist: (state: string | undefined) => void | PromiseLike<void>;
   /**
-   * Callback to restore the navigation state.
-   * Should return the restored state or a Promise which resolves to the restored state.
+   * Callback to restore the serialized navigation state.
+   *
+   * Should return the serialized state or a Promise which resolves to the serialized state.
    *
    * If a Promise is returned, providing a `fallback` component is recommended.
    */
-  restore(): PromiseLike<InitialState | undefined> | InitialState | undefined;
-};
-
-export type ServerContainerRef = {
-  getCurrentOptions(): Record<string, any> | undefined;
+  restore: () => PromiseLike<string | undefined> | string | undefined;
+  /**
+   * Optional callback to serialize the navigation state.
+   */
+  stringify?: (state: NavigationState | undefined) => string | undefined;
+  /**
+   * Optional callback to parse the serialized navigation state.
+   */
+  parse?: (state: string | undefined) => InitialState | undefined;
 };

package/src/useBackButton.native.tsx

@@ -9,8 +9,10 @@ export function useBackButton(
   ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>
 ) {
   React.useEffect(() => {
+    // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
     const subscription = BackHandler.addEventListener(
       'hardwareBackPress',
+      // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
       () => {
         const navigation = ref.current;
 

package/src/useBackButton.tsx

@@ -3,8 +3,8 @@ import type {
   ParamListBase,
 } from '@react-navigation/core';
 
-export function useBackButton(
-  _: React.RefObject<NavigationContainerRef<ParamListBase> | null>
+export function useBackButton<ParamList extends ParamListBase>(
+  _: React.RefObject<NavigationContainerRef<ParamList> | null>
 ) {
   // No-op
   // BackHandler is not available on web

package/src/useDeepStableValue.tsx

@@ -0,0 +1,12 @@
+import isEqual from 'fast-deep-equal';
+import * as React from 'react';
+
+export function useDeepStableValue<T>(value: T): T {
+  const valueRef = React.useRef(value);
+
+  if (!isEqual(valueRef.current, value)) {
+    valueRef.current = value;
+  }
+
+  return valueRef.current;
+}

package/src/useDocumentTitle.tsx

@@ -9,8 +9,8 @@ import type { DocumentTitleOptions } from './types';
 /**
  * Set the document title for the active screen
  */
-export function useDocumentTitle(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
+export function useDocumentTitle<ParamList extends ParamListBase>(
+  ref: React.RefObject<NavigationContainerRef<ParamList> | null>,
   {
     enabled = true,
     formatter = (options, route) => options?.title ?? route?.name,

package/src/useLinkBuilder.tsx

@@ -1,10 +1,9 @@
 import {
   CommonActions,
-  findFocusedRoute,
   getActionFromState,
   getPathFromState,
-  NavigationHelpersContext,
-  NavigationRouteContext,
+  IsScreenContext,
+  NavigationContainerRefContext,
   useStateForPath,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -13,17 +12,22 @@ import { getStateFromHref } from './getStateFromHref';
 import { LinkingContext } from './LinkingContext';
 
 type MinimalState = {
-  routes: [{ name: string; params?: object; state?: MinimalState }];
+  routes: [
+    {
+      name: string;
+      params?: object | undefined;
+      state?: MinimalState | undefined;
+    },
+  ];
 };
 
 /**
  * Helper to build a href for a screen based on the linking options.
  */
 export function useBuildHref() {
-  const navigation = React.useContext(NavigationHelpersContext);
-  const route = React.useContext(NavigationRouteContext);
+  const isScreen = React.use(IsScreenContext);
 
-  const { options } = React.useContext(LinkingContext);
+  const { options } = React.use(LinkingContext);
 
   const focusedRouteState = useStateForPath();
 
@@ -35,17 +39,6 @@ export function useBuildHref() {
         return undefined;
       }
 
-      // Check that we're inside:
-      // - navigator's context
-      // - route context of the navigator (could be a screen, tab, etc.)
-      // - route matches the state for path (from the screen's context)
-      // This ensures that we're inside a screen
-      const isScreen =
-        navigation && route?.key && focusedRouteState
-          ? route.key === findFocusedRoute(focusedRouteState)?.key &&
-            navigation.getState().routes.some((r) => r.key === route.key)
-          : false;
-
       const stateForRoute: MinimalState = {
         routes: [{ name, params }],
       };
@@ -89,8 +82,7 @@ export function useBuildHref() {
     [
       options?.enabled,
       options?.config,
-      route?.key,
-      navigation,
+      isScreen,
       focusedRouteState,
       getPathFromStateHelper,
     ]
@@ -103,14 +95,15 @@ export function useBuildHref() {
  * Helper to build a navigation action from a href based on the linking options.
  */
 export function useBuildAction() {
-  const { options } = React.useContext(LinkingContext);
+  const navigation = React.use(NavigationContainerRefContext);
+  const { options } = React.use(LinkingContext);
 
   const getActionFromStateHelper =
     options?.getActionFromState ?? getActionFromState;
 
   const buildAction = React.useCallback(
     (href: string) => {
-      const state = getStateFromHref(href, options);
+      const state = getStateFromHref(href, options, navigation?.getRootState());
 
       if (state) {
         const action = getActionFromStateHelper(state, options?.config);
@@ -122,7 +115,7 @@ export function useBuildAction() {
         );
       }
     },
-    [options, getActionFromStateHelper]
+    [navigation, options, getActionFromStateHelper]
   );
 
   return buildAction;