@react-navigation/native 7.0.0-alpha.0 → 7.0.0-alpha.10

package/src/createStaticNavigation.tsx

@@ -1,12 +1,12 @@
 import {
   createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
-  ParamListBase,
-  StaticNavigation,
+  type ParamListBase,
+  type StaticNavigation,
 } from '@react-navigation/core';
 import * as React from 'react';
 
-import NavigationContainer from './NavigationContainer';
+import { NavigationContainer } from './NavigationContainer';
 import type { LinkingOptions } from './types';
 
 type Props = Omit<
@@ -26,9 +26,7 @@ type Props = Omit<
  * @param tree Static navigation config.
  * @returns Navigation component to use in your app.
  */
-export default function createStaticNavigation(
-  tree: StaticNavigation<any, any, any>
-) {
+export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
   const Component = createComponentForStaticNavigation(tree, 'RootNavigator');
   const linkingConfig = {
     screens: tree.config.screens
@@ -36,7 +34,7 @@ export default function createStaticNavigation(
       : {},
   };
 
-  return function Navigation({ linking, ...rest }: Props) {
+  function Navigation({ linking, ...rest }: Props) {
     return (
       <NavigationContainer
         {...rest}
@@ -45,5 +43,7 @@ export default function createStaticNavigation(
         <Component />
       </NavigationContainer>
     );
-  };
+  }
+
+  return React.forwardRef(Navigation);
 }

package/src/extractPathFromURL.tsx

@@ -1,6 +1,6 @@
 import escapeStringRegexp from 'escape-string-regexp';
 
-export default function extractPathFromURL(prefixes: string[], url: string) {
+export function extractPathFromURL(prefixes: string[], url: string) {
   for (const prefix of prefixes) {
     const protocol = prefix.match(/^[^:]+:/)?.[0] ?? '';
     const host = prefix
@@ -15,7 +15,10 @@ export default function extractPathFromURL(prefixes: string[], url: string) {
         .join('\\.')}`
     );
 
-    const normalizedURL = url.replace(/\/+/g, '/');
+    const [originAndPath, searchParams] = url.split('?');
+    const normalizedURL = originAndPath
+      .replace(/\/+/g, '/')
+      .concat(searchParams ? `?${searchParams}` : '');
 
     if (prefixRegex.test(normalizedURL)) {
       return normalizedURL.replace(prefixRegex, '');

package/src/index.tsx

@@ -1,14 +1,14 @@
-export { default as createStaticNavigation } from './createStaticNavigation';
-export { default as Link } from './Link';
-export { default as LinkingContext } from './LinkingContext';
-export { default as NavigationContainer } from './NavigationContainer';
-export { default as ServerContainer } from './ServerContainer';
-export { default as DarkTheme } from './theming/DarkTheme';
-export { default as DefaultTheme } from './theming/DefaultTheme';
-export { default as ThemeProvider } from './theming/ThemeProvider';
-export { default as useTheme } from './theming/useTheme';
+export { createStaticNavigation } from './createStaticNavigation';
+export { Link } from './Link';
+export { LinkingContext } from './LinkingContext';
+export { NavigationContainer } from './NavigationContainer';
+export { ServerContainer } from './ServerContainer';
+export { DarkTheme } from './theming/DarkTheme';
+export { DefaultTheme } from './theming/DefaultTheme';
 export * from './types';
-export { default as useLinkProps } from './useLinkProps';
-export { default as useLinkTools } from './useLinkTools';
-export { default as useScrollToTop } from './useScrollToTop';
+export { useLinkBuilder } from './useLinkBuilder';
+export { useLinkProps } from './useLinkProps';
+export { useLocale } from './useLocale';
+export { useScrollToTop } from './useScrollToTop';
+export { UNSTABLE_useUnhandledLinking } from './useUnhandledLinking';
 export * from '@react-navigation/core';

package/src/theming/DarkTheme.tsx

@@ -1,6 +1,7 @@
 import type { Theme } from '../types';
+import { fonts } from './fonts';
 
-const DarkTheme: Theme = {
+export const DarkTheme: Theme = {
   dark: true,
   colors: {
     primary: 'rgb(10, 132, 255)',
@@ -10,6 +11,5 @@ const DarkTheme: Theme = {
     border: 'rgb(39, 39, 41)',
     notification: 'rgb(255, 69, 58)',
   },
+  fonts,
 };
-
-export default DarkTheme;

package/src/theming/DefaultTheme.tsx

@@ -1,6 +1,7 @@
 import type { Theme } from '../types';
+import { fonts } from './fonts';
 
-const DefaultTheme: Theme = {
+export const DefaultTheme: Theme = {
   dark: false,
   colors: {
     primary: 'rgb(0, 122, 255)',
@@ -10,6 +11,5 @@ const DefaultTheme: Theme = {
     border: 'rgb(216, 216, 216)',
     notification: 'rgb(255, 59, 48)',
   },
+  fonts,
 };
-
-export default DefaultTheme;

package/src/theming/fonts.tsx

@@ -0,0 +1,63 @@
+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"';
+
+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',
+    },
+  },
+  ios: {
+    regular: {
+      fontFamily: 'System',
+      fontWeight: '400',
+    },
+    medium: {
+      fontFamily: 'System',
+      fontWeight: '500',
+    },
+    bold: {
+      fontFamily: 'System',
+      fontWeight: '600',
+    },
+    heavy: {
+      fontFamily: 'System',
+      fontWeight: '700',
+    },
+  },
+  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',
+    },
+  },
+} as const satisfies Record<string, Theme['fonts']>);

package/src/types.tsx

@@ -6,18 +6,49 @@ import type {
   Route,
 } from '@react-navigation/core';
 
-export type Theme = {
-  dark: boolean;
-  colors: {
-    primary: string;
-    background: string;
-    card: string;
-    text: string;
-    border: string;
-    notification: string;
-  };
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace ReactNavigation {
+    interface Theme {
+      dark: boolean;
+      colors: {
+        primary: string;
+        background: string;
+        card: string;
+        text: string;
+        border: string;
+        notification: string;
+      };
+      fonts: {
+        regular: FontStyle;
+        medium: FontStyle;
+        bold: FontStyle;
+        heavy: FontStyle;
+      };
+    }
+  }
+}
+
+export type LocaleDirection = 'ltr' | 'rtl';
+
+type FontStyle = {
+  fontFamily: string;
+  fontWeight:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
 };
 
+export type Theme = ReactNavigation.Theme;
+
 export type LinkingOptions<ParamList extends {}> = {
   /**
    * Whether deep link handling should be enabled.
@@ -74,8 +105,21 @@ export type LinkingOptions<ParamList extends {}> = {
    * ```
    */
   config?: {
-    initialRouteName?: keyof ParamList;
+    /**
+     * 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;
   };
   /**
    * Custom function to get the initial URL used for linking.

package/src/useBackButton.native.tsx

@@ -0,0 +1,33 @@
+import type {
+  NavigationContainerRef,
+  ParamListBase,
+} from '@react-navigation/core';
+import * as React from 'react';
+import { BackHandler } from 'react-native';
+
+export function useBackButton(
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>
+) {
+  React.useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        const navigation = ref.current;
+
+        if (navigation == null) {
+          return false;
+        }
+
+        if (navigation.canGoBack()) {
+          navigation.goBack();
+
+          return true;
+        }
+
+        return false;
+      }
+    );
+
+    return () => subscription.remove();
+  }, [ref]);
+}

package/src/useBackButton.tsx

@@ -2,32 +2,10 @@ import type {
   NavigationContainerRef,
   ParamListBase,
 } from '@react-navigation/core';
-import * as React from 'react';
-import { BackHandler } from 'react-native';
 
-export default function useBackButton(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase>>
+export function useBackButton(
+  _: React.RefObject<NavigationContainerRef<ParamListBase>>
 ) {
-  React.useEffect(() => {
-    const subscription = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        const navigation = ref.current;
-
-        if (navigation == null) {
-          return false;
-        }
-
-        if (navigation.canGoBack()) {
-          navigation.goBack();
-
-          return true;
-        }
-
-        return false;
-      }
-    );
-
-    return () => subscription.remove();
-  }, [ref]);
+  // No-op
+  // BackHandler is not available on web
 }

package/src/useDocumentTitle.native.tsx

@@ -1,3 +1,3 @@
-export default function useDocumentTitle() {
+export function useDocumentTitle() {
   // Noop for React Native
 }

package/src/useDocumentTitle.tsx

@@ -9,7 +9,7 @@ import type { DocumentTitleOptions } from './types';
 /**
  * Set the document title for the active screen
  */
-export default function useDocumentTitle(
+export function useDocumentTitle(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,

package/src/{useLinkTools.tsx → useLinkBuilder.tsx}

@@ -3,14 +3,14 @@ import {
   getActionFromState,
   getPathFromState,
   getStateFromPath,
-  NavigationHelpers,
+  type NavigationHelpers,
   NavigationHelpersContext,
-  NavigationProp,
-  ParamListBase,
+  type NavigationProp,
+  type ParamListBase,
 } from '@react-navigation/core';
 import * as React from 'react';
 
-import LinkingContext from './LinkingContext';
+import { LinkingContext } from './LinkingContext';
 
 type NavigationObject =
   | NavigationHelpers<ParamListBase>
@@ -45,10 +45,10 @@ const getRootStateForNavigate = (
 };
 
 /**
- * Build destination link for a navigate action.
- * Useful for showing anchor tags on the web for buttons that perform navigation.
+ * Helpers to build href or action based on the linking options.
+ * @returns `buildHref` to build an `href` for screen and `buildAction` to build an action from an `href`.
  */
-export default function useLinkTools() {
+export function useLinkBuilder() {
   const navigation = React.useContext(NavigationHelpersContext);
   const linking = React.useContext(LinkingContext);
 
@@ -84,7 +84,7 @@ export default function useLinkTools() {
   const buildAction = React.useCallback(
     (href: string) => {
       if (!href.startsWith('/')) {
-        throw new Error(`The path must start with '/' (${href}).`);
+        throw new Error(`The href must start with '/' (${href}).`);
       }
 
       const { options } = linking;
@@ -98,7 +98,7 @@ export default function useLinkTools() {
 
         return action ?? CommonActions.reset(state);
       } else {
-        throw new Error('Failed to parse the path to a navigation state.');
+        throw new Error('Failed to parse the href to a navigation state.');
       }
     },
     [linking]

package/src/useLinkProps.tsx

@@ -1,20 +1,20 @@
 import {
   getPathFromState,
-  NavigationAction,
+  type NavigationAction,
   NavigationContainerRefContext,
   NavigationHelpersContext,
-  NavigatorScreenParams,
-  ParamListBase,
+  type NavigatorScreenParams,
+  type ParamListBase,
 } from '@react-navigation/core';
 import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
-import { GestureResponderEvent, Platform } from 'react-native';
+import { type GestureResponderEvent, Platform } from 'react-native';
 
-import LinkingContext from './LinkingContext';
+import { LinkingContext } from './LinkingContext';
 
 export type Props<
   ParamList extends ReactNavigation.RootParamList,
-  RouteName extends keyof ParamList = keyof ParamList
+  RouteName extends keyof ParamList = keyof ParamList,
 > =
   | ({
       screen: Extract<RouteName, string>;
@@ -43,7 +43,7 @@ const getStateFromParams = (
         {
           name: params.screen,
           params: params.params,
-          // @ts-expect-error
+          // @ts-expect-error this is fine 🔥
           state: params.screen
             ? getStateFromParams(
                 params.params as
@@ -67,9 +67,12 @@ 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 default function useLinkProps<
-  ParamList extends ReactNavigation.RootParamList
->({ screen, params, href, action }: Props<ParamList>) {
+export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
+  screen,
+  params,
+  href,
+  action,
+}: Props<ParamList>) {
   const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationHelpersContext);
   const { options } = React.useContext(LinkingContext);
@@ -77,19 +80,20 @@ export default function useLinkProps<
   const onPress = (
     e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
   ) => {
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const isLeftClick = e.button == null || e.button === 0; // only handle left clicks
+    const isSelfTarget = [undefined, null, '', 'self'].includes(
+      // @ts-expect-error: these properties exist on web, but not in React Native
+      e.currentTarget?.target
+    ); // let browser handle "target=_blank" etc.
+
     let shouldHandle = false;
 
     if (Platform.OS !== 'web' || !e) {
-      shouldHandle = e ? !e.defaultPrevented : true;
-    } else if (
-      !e.defaultPrevented && // onPress prevented default
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      (e.button == null || e.button === 0) && // ignore everything but left clicks
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      [undefined, null, '', 'self'].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc.
-    ) {
+      shouldHandle = true;
+    } else if (!hasModifierKey && isLeftClick && isSelfTarget) {
       e.preventDefault();
       shouldHandle = true;
     }
@@ -106,7 +110,7 @@ export default function useLinkProps<
           );
         }
       } else {
-        // @ts-expect-error: This is already type-checked by the prop types
+        // @ts-expect-error This is already type-checked by the prop types
         navigation?.navigate(screen, params);
       }
     }
@@ -123,9 +127,9 @@ export default function useLinkProps<
               routes: [
                 {
                   name: screen,
-                  // @ts-expect-error
+                  // @ts-expect-error this is fine 🔥
                   params: params,
-                  // @ts-expect-error
+                  // @ts-expect-error this is fine 🔥
                   state: getStateFromParams(params),
                 },
               ],

package/src/useLinkTo.tsx

@@ -0,0 +1,30 @@
+import { NavigationContainerRefContext } from '@react-navigation/core';
+import * as React from 'react';
+
+import { useLinkBuilder } from './useLinkBuilder';
+
+/**
+ * Helper to navigate to a screen using a href based on the linking options.
+ * @returns function that receives the href to navigate to.
+ */
+export function useLinkTo() {
+  const navigation = React.useContext(NavigationContainerRefContext);
+  const { buildAction } = useLinkBuilder();
+
+  const linkTo = React.useCallback(
+    (href: string) => {
+      if (navigation === undefined) {
+        throw new Error(
+          "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+        );
+      }
+
+      const action = buildAction(href);
+
+      navigation.dispatch(action);
+    },
+    [buildAction, navigation]
+  );
+
+  return linkTo;
+}

package/src/useLinking.native.tsx

@@ -1,23 +1,23 @@
 import {
   getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
-  NavigationContainerRef,
-  ParamListBase,
+  type NavigationContainerRef,
+  type ParamListBase,
   useNavigationIndependentTree,
 } from '@react-navigation/core';
 import * as React from 'react';
 import { Linking, Platform } from 'react-native';
 
-import extractPathFromURL from './extractPathFromURL';
+import { extractPathFromURL } from './extractPathFromURL';
 import type { LinkingOptions } from './types';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
 type Options = LinkingOptions<ParamListBase>;
 
-let linkingHandlers: Symbol[] = [];
+const linkingHandlers: symbol[] = [];
 
-export default function useLinking(
+export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
   {
     enabled = true,
@@ -27,11 +27,11 @@ export default function useLinking(
     getInitialURL = () =>
       Promise.race([
         Linking.getInitialURL(),
-        new Promise<undefined>((resolve) =>
+        new Promise<undefined>((resolve) => {
           // Timeout in 150ms if `getInitialState` doesn't resolve
           // Workaround for https://github.com/facebook/react-native/issues/25675
-          setTimeout(resolve, 150)
-        ),
+          setTimeout(resolve, 150);
+        }),
       ]),
     subscribe = (listener) => {
       const callback = ({ url }: { url: string }) => listener(url);
@@ -55,7 +55,8 @@ export default function useLinking(
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: Options,
+  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -140,12 +141,21 @@ export default function useLinking(
     if (enabledRef.current) {
       const url = getInitialURLRef.current();
 
-      if (url != null && typeof url !== 'string') {
-        return url.then((url) => {
-          const state = getStateFromURL(url);
+      if (url != null) {
+        if (typeof url !== 'string') {
+          return url.then((url) => {
+            const state = getStateFromURL(url);
 
-          return state;
-        });
+            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);
@@ -161,7 +171,7 @@ export default function useLinking(
     };
 
     return thenable as PromiseLike<ResultState | undefined>;
-  }, [getStateFromURL]);
+  }, [getStateFromURL, onUnhandledLinking, prefixes]);
 
   React.useEffect(() => {
     const listener = (url: string) => {
@@ -173,14 +183,10 @@ export default function useLinking(
       const state = navigation ? getStateFromURL(url) : undefined;
 
       if (navigation && state) {
-        // Make sure that the routes in the state exist in the root navigator
-        // Otherwise there's an error in the linking configuration
+        // If the link were handled, it gets cleared in NavigationContainer
+        onUnhandledLinking(extractPathFromURL(prefixes, url));
         const rootState = navigation.getRootState();
-
         if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
-          console.warn(
-            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
-          );
           return;
         }
 
@@ -207,7 +213,7 @@ export default function useLinking(
     };
 
     return subscribe(listener);
-  }, [enabled, getStateFromURL, ref, subscribe]);
+  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe]);
 
   return {
     getInitialState,