@react-navigation/native 6.1.6 → 7.0.0-alpha.1

package/src/NavigationContainer.tsx

@@ -10,14 +10,14 @@ import {
 } from '@react-navigation/core';
 import * as React from 'react';
 
-import LinkingContext from './LinkingContext';
-import DefaultTheme from './theming/DefaultTheme';
-import ThemeProvider from './theming/ThemeProvider';
+import { LinkingContext } from './LinkingContext';
+import { DefaultTheme } from './theming/DefaultTheme';
+import { ThemeProvider } from './theming/ThemeProvider';
 import type { DocumentTitleOptions, LinkingOptions, Theme } from './types';
-import useBackButton from './useBackButton';
-import useDocumentTitle from './useDocumentTitle';
-import useLinking from './useLinking';
-import useThenable from './useThenable';
+import { useBackButton } from './useBackButton';
+import { useDocumentTitle } from './useDocumentTitle';
+import { useLinking } from './useLinking';
+import { useThenable } from './useThenable';
 
 declare global {
   var REACT_NAVIGATION_DEVTOOLS: WeakMap<
@@ -33,7 +33,6 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
   linking?: LinkingOptions<ParamList>;
   fallback?: React.ReactNode;
   documentTitle?: DocumentTitleOptions;
-  onReady?: () => void;
 };
 
 /**
@@ -43,6 +42,7 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
  * @param props.initialState Initial state object for the navigation tree. When deep link handling is enabled, this will override deep links when specified. Make sure that you don't specify an `initialState` when there's a deep link (`Linking.getInitialURL()`).
  * @param props.onReady Callback which is called after the navigation tree mounts.
  * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
+ * @param props.onUnhandledAction Callback which is called when an action is not handled.
  * @param props.theme Theme object for the navigators.
  * @param props.linking Options for deep linking. Deep link handling is enabled when this prop is provided, unless `linking.enabled` is `false`.
  * @param props.fallback Fallback component to render until we have finished getting initial state when linking is enabled. Defaults to `null`.
@@ -56,7 +56,6 @@ function NavigationContainerInner(
     linking,
     fallback = null,
     documentTitle,
-    onReady,
     ...rest
   }: Props<ParamListBase>,
   ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
@@ -74,7 +73,6 @@ function NavigationContainerInner(
   useDocumentTitle(refContainer, documentTitle);
 
   const { getInitialState } = useLinking(refContainer, {
-    independent: rest.independent,
     enabled: isLinkingEnabled,
     prefixes: [],
     ...linking,
@@ -106,21 +104,10 @@ function NavigationContainerInner(
 
   const linkingContext = React.useMemo(() => ({ options: linking }), [linking]);
 
-  const isReady = rest.initialState != null || !isLinkingEnabled || isResolved;
+  const isLinkingReady =
+    rest.initialState != null || !isLinkingEnabled || isResolved;
 
-  const onReadyRef = React.useRef(onReady);
-
-  React.useEffect(() => {
-    onReadyRef.current = onReady;
-  });
-
-  React.useEffect(() => {
-    if (isReady) {
-      onReadyRef.current?.();
-    }
-  }, [isReady]);
-
-  if (!isReady) {
+  if (!isLinkingReady) {
     // This is temporary until we have Suspense for data-fetching
     // Then the fallback will be handled by a parent `Suspense` component
     return fallback as React.ReactElement;
@@ -141,12 +128,10 @@ function NavigationContainerInner(
   );
 }
 
-const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
-  RootParamList extends {} = ReactNavigation.RootParamList
->(
+export const NavigationContainer = React.forwardRef(
+  NavigationContainerInner
+) as <RootParamList extends {} = ReactNavigation.RootParamList>(
   props: Props<RootParamList> & {
     ref?: React.Ref<NavigationContainerRef<RootParamList>>;
   }
 ) => React.ReactElement;
-
-export default NavigationContainer;

package/src/ServerContainer.tsx

@@ -1,7 +1,7 @@
 import { CurrentRenderContext } from '@react-navigation/core';
 import * as React from 'react';
 
-import ServerContext, { ServerContextType } from './ServerContext';
+import { ServerContext, ServerContextType } from './ServerContext';
 import type { ServerContainerRef } from './types';
 
 type Props = ServerContextType & {
@@ -15,7 +15,7 @@ type Props = ServerContextType & {
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which contains helper methods.
  */
-export default React.forwardRef(function ServerContainer(
+export const ServerContainer = React.forwardRef(function ServerContainer(
   { children, location }: Props,
   ref: React.Ref<ServerContainerRef>
 ) {

package/src/ServerContext.tsx

@@ -7,8 +7,6 @@ export type ServerContextType = {
   };
 };
 
-const ServerContext = React.createContext<ServerContextType | undefined>(
+export const ServerContext = React.createContext<ServerContextType | undefined>(
   undefined
 );
-
-export default ServerContext;

package/src/__mocks__/createStackNavigator.tsx

@@ -0,0 +1,19 @@
+import {
+  createNavigatorFactory,
+  StackRouter,
+  useNavigationBuilder,
+} from '@react-navigation/core';
+import * as React from 'react';
+
+export const createStackNavigator = createNavigatorFactory((props) => {
+  const { state, descriptors, NavigationContent } = useNavigationBuilder(
+    StackRouter,
+    props
+  );
+
+  return (
+    <NavigationContent>
+      {descriptors[state.routes[state.index].key].render()}
+    </NavigationContent>
+  );
+});

package/src/__mocks__/window.tsx

@@ -63,7 +63,7 @@ const removeEventListener = (type: 'popstate', listener: () => void) => {
   }
 };
 
-const window = {
+export const window = {
   document: { title: '' },
   location,
   history,
@@ -73,5 +73,3 @@ const window = {
     return window;
   },
 };
-
-export default window;

package/src/createMemoryHistory.tsx

@@ -10,7 +10,7 @@ type HistoryRecord = {
   path: string;
 };
 
-export default function createMemoryHistory() {
+export function createMemoryHistory() {
   let index = 0;
   let items: HistoryRecord[] = [];
 

package/src/createStaticNavigation.tsx

@@ -0,0 +1,47 @@
+import {
+  createComponentForStaticNavigation,
+  createPathConfigForStaticNavigation,
+  ParamListBase,
+  StaticNavigation,
+} from '@react-navigation/core';
+import * as React from 'react';
+
+import { NavigationContainer } from './NavigationContainer';
+import type { LinkingOptions } from './types';
+
+type Props = Omit<
+  React.ComponentProps<typeof NavigationContainer>,
+  'linking' | 'children'
+> & {
+  /**
+   * Options for deep linking.
+   */
+  linking?: Omit<LinkingOptions<ParamListBase>, 'config'>;
+};
+
+/**
+ * Create a navigation component from a static navigation config.
+ * The returned component is a wrapper around `NavigationContainer`.
+ *
+ * @param tree Static navigation config.
+ * @returns Navigation component to use in your app.
+ */
+export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
+  const Component = createComponentForStaticNavigation(tree, 'RootNavigator');
+  const linkingConfig = {
+    screens: tree.config.screens
+      ? createPathConfigForStaticNavigation(tree)
+      : {},
+  };
+
+  return function Navigation({ linking, ...rest }: Props) {
+    return (
+      <NavigationContainer
+        {...rest}
+        linking={linking ? { ...linking, config: linkingConfig } : undefined}
+      >
+        <Component />
+      </NavigationContainer>
+    );
+  };
+}

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

package/src/index.tsx

@@ -1,14 +1,14 @@
-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 { ThemeProvider } from './theming/ThemeProvider';
+export { useTheme } from './theming/useTheme';
 export * from './types';
-export { default as useLinkBuilder } from './useLinkBuilder';
-export { default as useLinkProps } from './useLinkProps';
-export { default as useLinkTo } from './useLinkTo';
-export { default as useScrollToTop } from './useScrollToTop';
+export { useLinkProps } from './useLinkProps';
+export { useLinkTools } from './useLinkTools';
+export { useScrollToTop } from './useScrollToTop';
 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/ThemeContext.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react';
 
 import type { Theme } from '../types';
-import DefaultTheme from './DefaultTheme';
+import { DefaultTheme } from './DefaultTheme';
 
-const ThemeContext = React.createContext<Theme>(DefaultTheme);
+export const ThemeContext = React.createContext<Theme>(DefaultTheme);
 
 ThemeContext.displayName = 'ThemeContext';
-
-export default ThemeContext;

package/src/theming/ThemeProvider.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 
 import type { Theme } from '../types';
-import ThemeContext from './ThemeContext';
+import { ThemeContext } from './ThemeContext';
 
 type Props = {
   value: Theme;
   children: React.ReactNode;
 };
 
-export default function ThemeProvider({ value, children }: Props) {
+export function ThemeProvider({ value, children }: Props) {
   return (
     <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
   );

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/theming/useTheme.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import ThemeContext from './ThemeContext';
+import { ThemeContext } from './ThemeContext';
 
-export default function useTheme() {
+export function useTheme() {
   const theme = React.useContext(ThemeContext);
 
   return theme;

package/src/types.tsx

@@ -6,6 +6,22 @@ import type {
   Route,
 } from '@react-navigation/core';
 
+type FontStyle = {
+  fontFamily: string;
+  fontWeight:
+    | 'normal'
+    | 'bold'
+    | '100'
+    | '200'
+    | '300'
+    | '400'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
+};
+
 export type Theme = {
   dark: boolean;
   colors: {
@@ -16,6 +32,12 @@ export type Theme = {
     border: string;
     notification: string;
   };
+  fonts: {
+    regular: FontStyle;
+    medium: FontStyle;
+    bold: FontStyle;
+    heavy: FontStyle;
+  };
 };
 
 export type LinkingOptions<ParamList extends {}> = {

package/src/useBackButton.tsx

@@ -5,7 +5,7 @@ import type {
 import * as React from 'react';
 import { BackHandler } from 'react-native';
 
-export default function useBackButton(
+export function useBackButton(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>
 ) {
   React.useEffect(() => {

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/useLinkProps.tsx

@@ -10,16 +10,28 @@ import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
 import { GestureResponderEvent, Platform } from 'react-native';
 
-import LinkingContext from './LinkingContext';
-import useLinkTo, { To } from './useLinkTo';
+import { LinkingContext } from './LinkingContext';
 
-type Props<ParamList extends ReactNavigation.RootParamList> = {
-  to: To<ParamList>;
-  action?: NavigationAction;
-};
+export type Props<
+  ParamList extends ReactNavigation.RootParamList,
+  RouteName extends keyof ParamList = keyof ParamList
+> =
+  | ({
+      screen: Extract<RouteName, string>;
+      href?: string;
+      action?: NavigationAction;
+    } & (undefined extends ParamList[RouteName]
+      ? { params?: ParamList[RouteName] }
+      : { params: ParamList[RouteName] }))
+  | {
+      href?: string;
+      action: NavigationAction;
+      screen?: undefined;
+      params?: undefined;
+    };
 
 const getStateFromParams = (
-  params: NavigatorScreenParams<ParamListBase, NavigationState> | undefined
+  params: NavigatorScreenParams<ParamListBase> | undefined
 ): PartialState<NavigationState> | NavigationState | undefined => {
   if (params?.state) {
     return params.state;
@@ -35,7 +47,7 @@ const getStateFromParams = (
           state: params.screen
             ? getStateFromParams(
                 params.params as
-                  | NavigatorScreenParams<ParamListBase, NavigationState>
+                  | NavigatorScreenParams<ParamListBase>
                   | undefined
               )
             : undefined,
@@ -50,16 +62,20 @@ const getStateFromParams = (
 /**
  * Hook to get props for an anchor tag so it can work with in page navigation.
  *
- * @param props.to Absolute path to screen (e.g. `/feeds/hot`).
+ * @param props.screen Name of the screen to navigate to (e.g. `'Feeds'`).
+ * @param props.params Params to pass to the screen to navigate to (e.g. `{ sort: 'hot' }`).
+ * @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
->({ to, 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);
-  const linkTo = useLinkTo<ParamList>();
 
   const onPress = (
     e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
@@ -93,33 +109,33 @@ export default function useLinkProps<
           );
         }
       } else {
-        linkTo(to);
+        // @ts-expect-error: This is already type-checked by the prop types
+        navigation?.navigate(screen, params);
       }
     }
   };
 
   const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
 
-  const href =
-    typeof to === 'string'
-      ? to
-      : getPathFromStateHelper(
-          {
-            routes: [
-              {
-                name: to.screen,
-                // @ts-expect-error
-                params: to.params,
-                // @ts-expect-error
-                state: getStateFromParams(to.params),
-              },
-            ],
-          },
-          options?.config
-        );
-
   return {
-    href,
+    href:
+      href ??
+      (Platform.OS === 'web' && screen != null
+        ? getPathFromStateHelper(
+            {
+              routes: [
+                {
+                  name: screen,
+                  // @ts-expect-error
+                  params: params,
+                  // @ts-expect-error
+                  state: getStateFromParams(params),
+                },
+              ],
+            },
+            options?.config
+          )
+        : undefined),
     accessibilityRole: 'link' as const,
     onPress,
   };

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

@@ -1,5 +1,8 @@
 import {
+  CommonActions,
+  getActionFromState,
   getPathFromState,
+  getStateFromPath,
   NavigationHelpers,
   NavigationHelpersContext,
   NavigationProp,
@@ -7,7 +10,7 @@ import {
 } from '@react-navigation/core';
 import * as React from 'react';
 
-import LinkingContext from './LinkingContext';
+import { LinkingContext } from './LinkingContext';
 
 type NavigationObject =
   | NavigationHelpers<ParamListBase>
@@ -45,11 +48,11 @@ const getRootStateForNavigate = (
  * Build destination link for a navigate action.
  * Useful for showing anchor tags on the web for buttons that perform navigation.
  */
-export default function useLinkBuilder() {
+export function useLinkTools() {
   const navigation = React.useContext(NavigationHelpersContext);
   const linking = React.useContext(LinkingContext);
 
-  const buildLink = React.useCallback(
+  const buildHref = React.useCallback(
     (name: string, params?: object) => {
       const { options } = linking;
 
@@ -78,5 +81,31 @@ export default function useLinkBuilder() {
     [linking, navigation]
   );
 
-  return buildLink;
+  const buildAction = React.useCallback(
+    (href: string) => {
+      if (!href.startsWith('/')) {
+        throw new Error(`The path must start with '/' (${href}).`);
+      }
+
+      const { options } = linking;
+
+      const state = options?.getStateFromPath
+        ? options.getStateFromPath(href, options.config)
+        : getStateFromPath(href, options?.config);
+
+      if (state) {
+        const action = getActionFromState(state, options?.config);
+
+        return action ?? CommonActions.reset(state);
+      } else {
+        throw new Error('Failed to parse the path to a navigation state.');
+      }
+    },
+    [linking]
+  );
+
+  return {
+    buildHref,
+    buildAction,
+  };
 }