@react-navigation/native 8.0.0-alpha.3 → 8.0.0-alpha.30

package/src/theming/MaterialFallbackTheme.tsx

@@ -0,0 +1,29 @@
+import type { Theme } from '@react-navigation/core';
+
+import { fonts } from './fonts';
+
+export const MaterialLightFallbackTheme = {
+  dark: false,
+  colors: {
+    primary: '#6750a4',
+    background: '#f3edf7',
+    card: '#fef7ff',
+    text: '#1d1b20',
+    border: '#cac4d0',
+    notification: '#ba1a1a',
+  },
+  fonts,
+} as const satisfies Theme;
+
+export const MaterialDarkFallbackTheme = {
+  dark: true,
+  colors: {
+    primary: '#d0bcff',
+    background: '#211f26',
+    card: '#141218',
+    text: '#e6e0e9',
+    border: '#49454f',
+    notification: '#ffb4ab',
+  },
+  fonts,
+} as const satisfies Theme;

package/src/theming/MaterialTheme.android.tsx

@@ -0,0 +1,45 @@
+import type { Theme } from '@react-navigation/core';
+import { Platform, PlatformColor } from 'react-native';
+
+import { fonts } from './fonts';
+import {
+  MaterialDarkFallbackTheme,
+  MaterialLightFallbackTheme,
+} from './MaterialFallbackTheme';
+
+const isDynamicThemeSupported =
+  Platform.OS === 'android' && Platform.Version >= 34;
+
+const MaterialLightDynamicTheme = {
+  dark: false,
+  colors: {
+    primary: PlatformColor('@android:color/system_primary_light'),
+    background: PlatformColor('@android:color/system_surface_container_light'),
+    card: PlatformColor('@android:color/system_background_light'),
+    text: PlatformColor('@android:color/system_on_surface_light'),
+    border: PlatformColor('@android:color/system_outline_variant_light'),
+    notification: PlatformColor('@android:color/system_error_light'),
+  },
+  fonts,
+} as const satisfies Theme;
+
+const MaterialDarkDynamicTheme = {
+  dark: true,
+  colors: {
+    primary: PlatformColor('@android:color/system_primary_dark'),
+    background: PlatformColor('@android:color/system_surface_container_dark'),
+    card: PlatformColor('@android:color/system_background_dark'),
+    text: PlatformColor('@android:color/system_on_surface_dark'),
+    border: PlatformColor('@android:color/system_outline_variant_dark'),
+    notification: PlatformColor('@android:color/system_error_dark'),
+  },
+  fonts,
+} as const satisfies Theme;
+
+export const MaterialLightTheme = isDynamicThemeSupported
+  ? MaterialLightDynamicTheme
+  : MaterialLightFallbackTheme;
+
+export const MaterialDarkTheme = isDynamicThemeSupported
+  ? MaterialDarkDynamicTheme
+  : MaterialDarkFallbackTheme;

package/src/theming/MaterialTheme.tsx

@@ -0,0 +1,4 @@
+export {
+  MaterialDarkFallbackTheme as MaterialDarkTheme,
+  MaterialLightFallbackTheme as MaterialLightTheme,
+} from './MaterialFallbackTheme';

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,30 +184,32 @@ 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 = {
@@ -223,7 +225,3 @@ export type Persistor = {
    */
   restore(): PromiseLike<InitialState | undefined> | InitialState | undefined;
 };
-
-export type ServerContainerRef = {
-  getCurrentOptions(): Record<string, any> | undefined;
-};

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/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

@@ -3,6 +3,7 @@ import {
   findFocusedRoute,
   getActionFromState,
   getPathFromState,
+  NavigationContainerRefContext,
   NavigationHelpersContext,
   NavigationRouteContext,
   useStateForPath,
@@ -13,17 +14,23 @@ 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 navigation = React.use(NavigationHelpersContext);
+  const route = React.use(NavigationRouteContext);
 
-  const { options } = React.useContext(LinkingContext);
+  const { options } = React.use(LinkingContext);
 
   const focusedRouteState = useStateForPath();
 
@@ -103,14 +110,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 +130,7 @@ export function useBuildAction() {
         );
       }
     },
-    [options, getActionFromStateHelper]
+    [navigation, options, getActionFromStateHelper]
   );
 
   return buildAction;

package/src/useLinkProps.tsx

@@ -3,11 +3,8 @@ import {
   type NavigationAction,
   NavigationContainerRefContext,
   NavigationHelpersContext,
-  type NavigatorScreenParams,
-  type ParamListBase,
   type RootParamList,
 } from '@react-navigation/core';
-import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
 import { type GestureResponderEvent, Platform } from 'react-native';
 
@@ -32,35 +29,6 @@ export type LinkProps<
       params?: undefined;
     };
 
-const getStateFromParams = (
-  params: NavigatorScreenParams<ParamListBase> | undefined
-): PartialState<NavigationState> | NavigationState | undefined => {
-  if (params?.state) {
-    return params.state;
-  }
-
-  if (params?.screen) {
-    return {
-      routes: [
-        {
-          name: params.screen,
-          params: params.params,
-          // @ts-expect-error this is fine 🔥
-          state: params.screen
-            ? getStateFromParams(
-                params.params as
-                  | NavigatorScreenParams<ParamListBase>
-                  | undefined
-              )
-            : undefined,
-        },
-      ],
-    };
-  }
-
-  return undefined;
-};
-
 /**
  * Hook to get props for an anchor tag so it can work with in page navigation.
  *
@@ -73,9 +41,9 @@ 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);
+  const root = React.use(NavigationContainerRefContext);
+  const navigation = React.use(NavigationHelpersContext);
+  const { options } = React.use(LinkingContext);
 
   const onPress = (
     e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
@@ -162,17 +130,16 @@ export function useLinkProps<
   return {
     href:
       href ??
-      (Platform.OS === 'web' && screen != null
+      (Platform.OS === 'web' && typeof screen === 'string'
         ? getPathFromStateHelper(
             {
               routes: [
                 {
-                  // @ts-expect-error this is fine 🔥
                   name: screen,
-                  // @ts-expect-error this is fine 🔥
-                  params: params,
-                  // @ts-expect-error this is fine 🔥
-                  state: getStateFromParams(params),
+                  params:
+                    typeof params === 'object' && params != null
+                      ? params
+                      : undefined,
                 },
               ],
             },

package/src/useLinkTo.tsx

@@ -9,7 +9,7 @@ import { useBuildAction } from './useLinkBuilder';
  * @returns function that receives the href to navigate to.
  */
 export function useLinkTo() {
-  const navigation = React.useContext(NavigationContainerRefContext);
+  const navigation = React.use(NavigationContainerRefContext);
   const buildAction = useBuildAction();
 
   const linkTo = React.useCallback(

package/src/useLinking.native.tsx

@@ -2,6 +2,7 @@ import {
   getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
   type NavigationContainerRef,
+  type NavigationState,
   type ParamListBase,
   useNavigationIndependentTree,
 } from '@react-navigation/core';
@@ -14,12 +15,10 @@ import type { Thenable } from './useThenable';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
-type Options = LinkingOptions<ParamListBase>;
-
 const linkingHandlers = new Set<symbol>();
 
-export function useLinking(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
+export function useLinking<ParamList extends ParamListBase>(
+  ref: React.RefObject<NavigationContainerRef<ParamList> | null>,
   {
     enabled = true,
     prefixes = ['*'],
@@ -45,7 +44,7 @@ export function useLinking(
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: LinkingOptions<ParamListBase>
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -58,28 +57,39 @@ export function useLinking(
       return undefined;
     }
 
-    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:',
-          "- 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.add(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.size &&
+        !(linkingHandlers.size === 1 && linkingHandlers.has(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);
       linkingHandlers.delete(handler);
     };
   }, [enabled, independent]);
@@ -106,18 +116,22 @@ export function useLinking(
   });
 
   const getStateFromURL = React.useCallback(
-    (url: string | null | undefined) => {
+    (url: string | null | undefined, previous: NavigationState | undefined) => {
       if (!url) {
         return undefined;
       }
 
       try {
-        return getStateFromHref(url, {
-          prefixes: prefixesRef.current,
-          filter: filterRef.current,
-          config: configRef.current,
-          getStateFromPath: getStateFromPathRef.current,
-        });
+        return getStateFromHref(
+          url,
+          {
+            prefixes: prefixesRef.current,
+            filter: filterRef.current,
+            config: configRef.current,
+            getStateFromPath: getStateFromPathRef.current,
+          },
+          previous
+        );
       } catch (e) {
         return undefined;
       }
@@ -134,14 +148,14 @@ export function useLinking(
       if (url != null) {
         if (typeof url !== 'string') {
           return url.then((url) => {
-            const state = getStateFromURL(url);
+            const state = getStateFromURL(url, undefined);
 
             return state;
           });
         }
       }
 
-      state = getStateFromURL(url);
+      state = getStateFromURL(url, undefined);
     }
 
     const thenable: Thenable<ResultState | undefined> = {
@@ -160,7 +174,21 @@ export function useLinking(
       }
 
       const navigation = ref.current;
-      const state = navigation ? getStateFromURL(url) : undefined;
+      const state = navigation
+        ? getStateFromURL(url, navigation.getRootState())
+        : undefined;
+
+      if (navigation) {
+        REACT_NAVIGATION_DEVTOOLS.get(navigation)?.listeners.forEach(
+          (listener) => {
+            listener({
+              type: 'link',
+              url,
+              state,
+            });
+          }
+        );
+      }
 
       if (navigation && state) {
         const action = getActionFromStateRef.current(state, configRef.current);