@react-navigation/native 7.1.28 → 8.0.0-alpha.1

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -0,0 +1,19 @@
+/* eslint-disable import-x/no-default-export */
+
+import {
+  codegenNativeComponent,
+  CodegenTypes,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  name: string;
+  variant: string;
+  size: CodegenTypes.Float;
+  color: ColorValue;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNavigationMaterialSymbolView'
+);

package/src/native/NativeMaterialSymbolModule.ts

@@ -0,0 +1,19 @@
+/* eslint-disable import-x/no-default-export */
+
+import { type TurboModule, TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  getImageSource(
+    name: string,
+    variant: string,
+    size: number,
+    // Codegen requires using `Object` instead of `object
+    // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
+    color: Object,
+    hash: string
+  ): string;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'ReactNavigationMaterialSymbolModule'
+);

package/src/native/SFSymbol.ios.tsx

@@ -0,0 +1,30 @@
+import type { ViewProps } from 'react-native';
+
+import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
+import type { SFSymbolOptions } from './types';
+
+export type SFSymbolProps = SFSymbolOptions & ViewProps;
+
+export function SFSymbol({
+  name,
+  size = 24,
+  color = 'black',
+  style,
+  ...rest
+}: SFSymbolProps): React.ReactElement {
+  return (
+    <SFSymbolViewNativeComponent
+      name={name}
+      size={size}
+      color={color}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}

package/src/native/SFSymbol.tsx

@@ -0,0 +1,9 @@
+import type { ViewProps } from 'react-native';
+
+import type { SFSymbolOptions } from './types';
+
+export type SFSymbolProps = SFSymbolOptions & ViewProps;
+
+export function SFSymbol(_: SFSymbolProps): React.ReactElement {
+  throw new Error('SFSymbol is only supported on iOS.');
+}

package/src/native/SFSymbolViewNativeComponent.ts

@@ -0,0 +1,18 @@
+/* eslint-disable import-x/no-default-export */
+
+import {
+  codegenNativeComponent,
+  CodegenTypes,
+  type ColorValue,
+  type ViewProps,
+} from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  name: string;
+  size: CodegenTypes.Float;
+  color: ColorValue;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'ReactNavigationSFSymbolView'
+);

package/src/native/types.tsx

@@ -0,0 +1,47 @@
+import type { ColorValue } from 'react-native';
+
+import type { MaterialSymbolName } from './MaterialSymbolData';
+
+type MaterialSymbolVariant = 'outlined' | 'rounded' | 'sharp';
+
+export type MaterialSymbolOptions = {
+  /**
+   * The name of the Material Symbol to display.
+   */
+  name: MaterialSymbolName;
+  /**
+   * The variant of the symbol.
+   *
+   * @default 'outlined'
+   */
+  variant?: MaterialSymbolVariant;
+  /**
+   * The size of the symbol.
+   *
+   * @default 24
+   */
+  size?: number;
+  /**
+   * The color of the symbol.
+   *
+   * @default 'black'
+   */
+  color?: ColorValue;
+};
+
+export type SFSymbolOptions = {
+  /**
+   * The name of the SF Symbol to display.
+   */
+  name: import('sf-symbols-typescript').SFSymbol;
+  /**
+   * The size of the symbol.
+   * @default 24
+   */
+  size?: number;
+  /**
+   * The color of the symbol.
+   * @default 'black'
+   */
+  color?: ColorValue;
+};

package/src/theming/DarkTheme.tsx

@@ -1,7 +1,8 @@
-import type { Theme } from '../types';
+import type { Theme } from '@react-navigation/core';
+
 import { fonts } from './fonts';
 
-export const DarkTheme: Theme = {
+export const DarkTheme = {
   dark: true,
   colors: {
     primary: 'rgb(10, 132, 255)',
@@ -12,4 +13,4 @@ export const DarkTheme: Theme = {
     notification: 'rgb(255, 69, 58)',
   },
   fonts,
-};
+} as const satisfies Theme;

package/src/theming/DefaultTheme.tsx

@@ -1,15 +1,16 @@
-import type { Theme } from '../types';
+import type { Theme } from '@react-navigation/core';
+
 import { fonts } from './fonts';
 
-export const DefaultTheme: Theme = {
+export const DefaultTheme = {
   dark: false,
   colors: {
     primary: 'rgb(0, 122, 255)',
     background: 'rgb(242, 242, 242)',
     card: 'rgb(255, 255, 255)',
     text: 'rgb(28, 28, 30)',
-    border: 'rgb(216, 216, 216)',
+    border: 'rgb(178, 178, 178)',
     notification: 'rgb(255, 59, 48)',
   },
   fonts,
-};
+} as const satisfies Theme;

package/src/theming/fonts.tsx

@@ -1,7 +1,6 @@
+import type { Theme } from '@react-navigation/core';
 import { Platform } from 'react-native';
 
-import type { Theme } from '../types';
-
 const WEB_FONT_STACK =
   'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"';
 

package/src/types.tsx

@@ -2,16 +2,23 @@ import type {
   getActionFromState as getActionFromStateDefault,
   getPathFromState as getPathFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
+  InitialState,
+  NavigationState,
   PathConfigMap,
   Route,
 } from '@react-navigation/core';
+import type { ColorValue as ReactNativeColorValue } from 'react-native';
 
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace ReactNavigation {
-    interface Theme extends NativeTheme {}
-  }
-}
+type ColorValue =
+  | `#${string}`
+  | `rgb(${string})`
+  | `rgba(${string})`
+  | `hsl(${string})`
+  | `hsla(${string})`
+  | `hwb(${string})`
+  | `hwba(${string})`
+  | `var(--${string})`
+  | ReactNativeColorValue;
 
 type FontStyle = {
   fontFamily: string;
@@ -32,12 +39,12 @@ type FontStyle = {
 interface NativeTheme {
   dark: boolean;
   colors: {
-    primary: string;
-    background: string;
-    card: string;
-    text: string;
-    border: string;
-    notification: string;
+    primary: ColorValue;
+    background: ColorValue;
+    card: ColorValue;
+    text: ColorValue;
+    border: ColorValue;
+    notification: ColorValue;
   };
   fonts: {
     regular: FontStyle;
@@ -47,19 +54,34 @@ interface NativeTheme {
   };
 }
 
-export type Theme = NativeTheme;
+declare module '@react-navigation/core' {
+  interface Theme extends NativeTheme {}
+}
 
 export type LocaleDirection = 'ltr' | 'rtl';
 
+export type LinkingPrefix = '*' | (string & {});
+
 export type LinkingOptions<ParamList extends {}> = {
   /**
    * Whether deep link handling should be enabled.
-   * Defaults to true.
+   *
+   * Defaults to `true` when a linking config is specified.
    */
   enabled?: boolean;
   /**
-   * The prefixes are stripped from the URL before parsing them.
-   * Usually they are the `scheme` + `host` (e.g. `myapp://chat?user=jane`)
+   * The prefixes to match to determine whether to handle a URL.
+   *
+   * Supported prefix formats:
+   * - `${scheme}://` - App-specific scheme, e.g. `myapp://`
+   * - `${protocol}://${host}` - Universal links or app links, e.g. `https://example.com`, `https://subdomain.example.com`
+   * - `${protocol}://*.${domain}` - Any subdomain of given domain, e.g. `https://*.example.com`
+   * - `${protocol}://${host}/${path}` - Subpath of given host, e.g. `https://example.com/app`
+   * - `*` - Any domain or subdomain with `http://` and `https://` as well as any app-specific scheme
+   *
+   * The prefix will be stripped from the URL before it's parsed.
+   *
+   * Defaults to `[*]`.
    *
    * This is not supported on Web.
    *
@@ -67,14 +89,14 @@ export type LinkingOptions<ParamList extends {}> = {
    * ```js
    * {
    *    prefixes: [
-   *      "myapp://", // App-specific scheme
-   *      "https://example.com", // Prefix for universal links
-   *      "https://*.example.com" // Prefix which matches any subdomain
+   *      "myapp://",
+   *      "https://example.com",
+   *      "https://*.example.com"
    *    ]
    * }
    * ```
    */
-  prefixes: string[];
+  prefixes?: LinkingPrefix[];
   /**
    * Optional function which takes an incoming URL returns a boolean
    * indicating whether React Navigation should handle it.
@@ -153,9 +175,11 @@ export type LinkingOptions<ParamList extends {}> = {
    *    subscribe: (listener) => {
    *      const onReceiveURL = ({ url }) => listener(url);
    *
-   *      Linking.addEventListener('url', onReceiveURL);
+   *      const subscription = Linking.addEventListener('url', onReceiveURL);
    *
-   *      return () => Linking.removeEventListener('url', onReceiveURL);
+   *      return () => {
+   *        subscription.remove();
+   *      };
    *   }
    * }
    * ```
@@ -186,6 +210,20 @@ export type DocumentTitleOptions = {
   ) => string;
 };
 
+export type Persistor = {
+  /**
+   * Callback to persist the navigation state.
+   */
+  persist(state: NavigationState | undefined): void;
+  /**
+   * Callback to restore the navigation state.
+   * Should return the restored state or a Promise which resolves to the restored 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;
 };

package/src/useLinkBuilder.tsx

@@ -3,13 +3,13 @@ import {
   findFocusedRoute,
   getActionFromState,
   getPathFromState,
-  getStateFromPath,
   NavigationHelpersContext,
   NavigationRouteContext,
   useStateForPath,
 } from '@react-navigation/core';
 import * as React from 'react';
 
+import { getStateFromHref } from './getStateFromHref';
 import { LinkingContext } from './LinkingContext';
 
 type MinimalState = {
@@ -102,34 +102,31 @@ export function useBuildHref() {
 /**
  * Helper to build a navigation action from a href based on the linking options.
  */
-export const useBuildAction = () => {
+export function useBuildAction() {
   const { options } = React.useContext(LinkingContext);
 
-  const getStateFromPathHelper = options?.getStateFromPath ?? getStateFromPath;
   const getActionFromStateHelper =
     options?.getActionFromState ?? getActionFromState;
 
   const buildAction = React.useCallback(
     (href: string) => {
-      if (!href.startsWith('/')) {
-        throw new Error(`The href must start with '/' (${href}).`);
-      }
-
-      const state = getStateFromPathHelper(href, options?.config);
+      const state = getStateFromHref(href, options);
 
       if (state) {
         const action = getActionFromStateHelper(state, options?.config);
 
         return action ?? CommonActions.reset(state);
       } else {
-        throw new Error('Failed to parse the href to a navigation state.');
+        throw new Error(
+          `Failed to parse href '${href}' to a navigation state.`
+        );
       }
     },
-    [options?.config, getStateFromPathHelper, getActionFromStateHelper]
+    [options, getActionFromStateHelper]
   );
 
   return buildAction;
-};
+}
 
 /**
  * Helpers to build href or action based on the linking options.

package/src/useLinkProps.tsx

@@ -5,6 +5,7 @@ import {
   NavigationHelpersContext,
   type NavigatorScreenParams,
   type ParamListBase,
+  type RootParamList,
 } from '@react-navigation/core';
 import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
@@ -13,7 +14,7 @@ import { type GestureResponderEvent, Platform } from 'react-native';
 import { LinkingContext } from './LinkingContext';
 
 export type LinkProps<
-  ParamList extends ReactNavigation.RootParamList,
+  ParamList extends {} = RootParamList,
   RouteName extends keyof ParamList = keyof ParamList,
 > =
   | ({
@@ -68,12 +69,10 @@ const getStateFromParams = (
  * @param props.href Optional absolute path to use for the href (e.g. `/feeds/hot`).
  * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
  */
-export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
-  screen,
-  params,
-  href,
-  action,
-}: LinkProps<ParamList>) {
+export function useLinkProps<
+  const ParamList extends {} = RootParamList,
+  const RouteName extends keyof ParamList = keyof ParamList,
+>({ screen, params, href, action }: LinkProps<ParamList, RouteName>) {
   const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationHelpersContext);
   const { options } = React.useContext(LinkingContext);
@@ -130,6 +129,36 @@ export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
 
   const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
 
+  if (Platform.OS === 'web') {
+    if (screen == null && action != null && options?.config != null) {
+      switch (action.type) {
+        case 'NAVIGATE':
+        case 'PUSH':
+        case 'REPLACE':
+        case 'POP_TO':
+        case 'JUMP_TO': {
+          if (
+            action.payload != null &&
+            'name' in action.payload &&
+            typeof action.payload.name === 'string' &&
+            action.payload.name in options.config.screens
+          ) {
+            screen = action.payload.name;
+
+            if (
+              'params' in action.payload &&
+              typeof action.payload.params === 'object' &&
+              action.payload.params != null
+            ) {
+              // @ts-expect-error this is fine 🔥
+              params = action.payload.params;
+            }
+          }
+        }
+      }
+    }
+  }
+
   return {
     href:
       href ??

package/src/useLinking.native.tsx

@@ -8,20 +8,21 @@ import {
 import * as React from 'react';
 import { Linking, Platform } from 'react-native';
 
-import { extractPathFromURL } from './extractPathFromURL';
+import { getStateFromHref } from './getStateFromHref';
 import type { LinkingOptions } from './types';
+import type { Thenable } from './useThenable';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
 type Options = LinkingOptions<ParamListBase>;
 
-const linkingHandlers: symbol[] = [];
+const linkingHandlers = new Set<symbol>();
 
 export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
   {
     enabled = true,
-    prefixes,
+    prefixes = ['*'],
     filter,
     config,
     getInitialURL = () =>
@@ -36,27 +37,15 @@ export function useLinking(
     subscribe = (listener) => {
       const callback = ({ url }: { url: string }) => listener(url);
 
-      const subscription = Linking.addEventListener('url', callback) as
-        | { remove(): void }
-        | undefined;
-
-      // Storing this in a local variable stops Jest from complaining about import after teardown
-      // @ts-expect-error: removeEventListener is not present in newer RN versions
-      const removeEventListener = Linking.removeEventListener?.bind(Linking);
+      const subscription = Linking.addEventListener('url', callback);
 
       return () => {
-        // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
-        if (subscription?.remove) {
-          subscription.remove();
-        } else {
-          removeEventListener?.('url', callback);
-        }
+        subscription.remove();
       };
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -69,7 +58,7 @@ export function useLinking(
       return undefined;
     }
 
-    if (enabled !== false && linkingHandlers.length) {
+    if (enabled !== false && linkingHandlers.size) {
       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:',
@@ -87,15 +76,11 @@ export function useLinking(
     const handler = Symbol();
 
     if (enabled !== false) {
-      linkingHandlers.push(handler);
+      linkingHandlers.add(handler);
     }
 
     return () => {
-      const index = linkingHandlers.indexOf(handler);
-
-      if (index > -1) {
-        linkingHandlers.splice(index, 1);
-      }
+      linkingHandlers.delete(handler);
     };
   }, [enabled, independent]);
 
@@ -122,15 +107,20 @@ export function useLinking(
 
   const getStateFromURL = React.useCallback(
     (url: string | null | undefined) => {
-      if (!url || (filterRef.current && !filterRef.current(url))) {
+      if (!url) {
         return undefined;
       }
 
-      const path = extractPathFromURL(prefixesRef.current, url);
-
-      return path !== undefined
-        ? getStateFromPathRef.current(path, configRef.current)
-        : undefined;
+      try {
+        return getStateFromHref(url, {
+          prefixes: prefixesRef.current,
+          filter: filterRef.current,
+          config: configRef.current,
+          getStateFromPath: getStateFromPathRef.current,
+        });
+      } catch (e) {
+        return undefined;
+      }
     },
     []
   );
@@ -146,32 +136,22 @@ 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));
         }
       }
 
       state = getStateFromURL(url);
     }
 
-    const thenable = {
+    const thenable: Thenable<ResultState | undefined> = {
       then(onfulfilled?: (state: ResultState | undefined) => void) {
         return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
       },
-      catch() {
-        return thenable;
-      },
     };
 
-    return thenable as PromiseLike<ResultState | undefined>;
-  }, [getStateFromURL, onUnhandledLinking, prefixes]);
+    return thenable;
+  }, [getStateFromURL]);
 
   React.useEffect(() => {
     const listener = (url: string) => {
@@ -183,9 +163,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) {
@@ -209,7 +186,7 @@ export function useLinking(
     };
 
     return subscribe(listener);
-  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe]);
+  }, [enabled, getStateFromURL, prefixes, ref, subscribe]);
 
   return {
     getInitialState,