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

package/src/Link.tsx

@@ -1,72 +1,161 @@
 import { type RootParamList, useTheme } from '@react-navigation/core';
 import * as React from 'react';
-import {
-  type GestureResponderEvent,
-  Platform,
-  Text,
-  type TextProps,
-} from 'react-native';
+import type { GestureResponderEvent, TextProps, TextStyle } from 'react-native';
 
 import { type LinkProps, useLinkProps } from './useLinkProps';
 
-type Props<
+type PressEvent =
+  | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  | GestureResponderEvent;
+
+type LinkBaseProps = {
+  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+  disabled?: boolean | undefined;
+  id?: string | undefined;
+  testID?: string | undefined;
+  onPress?: (e: PressEvent) => void;
+  numberOfLines?: number | undefined;
+  className?: React.AnchorHTMLAttributes<HTMLAnchorElement>['className'];
+  style?: (React.CSSProperties & TextStyle) | undefined;
+  children: React.ReactNode;
+} & Pick<
+  TextProps,
+  | 'aria-busy'
+  | 'aria-expanded'
+  | 'aria-hidden'
+  | 'aria-label'
+  | 'aria-labelledby'
+  | 'aria-live'
+>;
+
+export type Props<
   ParamList extends {} = RootParamList,
-  RouteName extends keyof ParamList = keyof ParamList,
-> = LinkProps<ParamList, RouteName> &
-  Omit<TextProps, 'disabled'> & {
-    target?: string;
-    onPress?: (
-      e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-    ) => void;
-    disabled?: boolean | null;
-    children: React.ReactNode;
-  };
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    keyof ParamList,
+    string
+  >,
+> = LinkProps<NoInfer<ParamList>, RouteName> & LinkBaseProps;
 
 /**
  * Component to render link to another screen using a path.
  * Uses an anchor tag on the web.
  *
+ * @param props.in Name of the current or parent screen whose navigator contains the target screen.
  * @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.
+ * @param props.action Optional action to override the in-page navigation. The `href` is still derived from `screen`, so this can be used to render a link while dispatching a different action (e.g. a `replace`).
  * @param props.children Child elements to render the content.
  */
 export function Link<
-  const ParamList extends {} = RootParamList,
-  const RouteName extends keyof ParamList = keyof ParamList,
+  ParamList extends {} = RootParamList,
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    keyof ParamList,
+    string
+  >,
 >({
+  in: parent,
   screen,
   params,
   action,
   href,
+  target,
+  disabled,
+  id,
+  testID,
+  onPress,
+  className,
   style,
-  ...rest
+  children,
+  'aria-label': ariaLabel,
+  'aria-busy': ariaBusy,
+  'aria-expanded': ariaExpanded,
+  'aria-hidden': ariaHidden,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-live': ariaLive,
 }: Props<ParamList, RouteName>) {
+  // @ts-expect-error: destructuring loses the relationship between target props
+  const props = useLinkProps({ in: parent, screen, params, action, href });
+
+  // Keep usage of `useTheme` after `useLinkProps`
+  // This ensures proper error when used outside of navigation container
   const { colors, fonts } = useTheme();
-  // @ts-expect-error: This is already type-checked by the prop types
-  const props = useLinkProps<ParamList>({ screen, params, action, href });
 
-  const onPress = (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => {
-    if ('onPress' in rest) {
-      rest.onPress?.(e);
+  if (typeof colors.primary !== 'string') {
+    throw new Error('Invalid color format.');
+  }
+
+  const onClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
     }
 
+    onPress?.(e);
+
     // Let user prevent default behavior
     if (!e.defaultPrevented) {
       props.onPress(e);
     }
   };
 
-  return React.createElement(Text, {
-    ...props,
-    ...rest,
-    ...Platform.select({
-      web: { onClick: onPress } as any,
-      default: { onPress },
-    }),
-    style: [{ color: colors.primary }, fonts.regular, style],
-  });
+  return (
+    <a
+      aria-busy={ariaBusy}
+      aria-disabled={disabled}
+      aria-expanded={ariaExpanded}
+      aria-hidden={ariaHidden}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-live={ariaLive}
+      id={id}
+      data-testid={testID}
+      tabIndex={props.href == null ? 0 : undefined}
+      target={target}
+      role={props.role}
+      href={props.href}
+      onAuxClick={
+        disabled
+          ? (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          : undefined
+      }
+      onClick={onClick}
+      onKeyDown={
+        props.href == null
+          ? (e) => {
+              // On browser, pressing Enter on a link triggers a click event
+              // So we simulate browser behavior when href is not provided
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                e.currentTarget.click();
+              }
+            }
+          : undefined
+      }
+      className={className}
+      style={{
+        backgroundColor: 'transparent',
+        boxSizing: 'border-box',
+        color: colors.primary,
+        cursor: disabled ? 'default' : 'pointer',
+        display: 'inline',
+        fontSize: 14,
+        margin: 0,
+        overflowWrap: 'break-word',
+        padding: 0,
+        position: 'relative',
+        textAlign: 'start',
+        textDecoration: 'none',
+        whiteSpace: 'pre-wrap',
+        ...fonts.regular,
+        ...style,
+      }}
+    >
+      {children}
+    </a>
+  );
 }

package/src/NavigationContainer.tsx

@@ -6,17 +6,18 @@ import {
   type InitialState,
   type NavigationContainerProps,
   type NavigationContainerRef,
-  type ParamListBase,
+  type NavigationState,
+  type PartialState,
   type RootParamList,
   ThemeProvider,
   validatePathConfig,
 } from '@react-navigation/core';
 import * as React from 'react';
-import { I18nManager, Platform } from 'react-native';
 
+import { DEFAULT_DIRECTION, IS_NATIVE } from './constants';
 import { LinkingContext } from './LinkingContext';
 import { LocaleDirContext } from './LocaleDirContext';
-import { DefaultTheme } from './theming/DefaultTheme';
+import { LightTheme } from './theming/LightTheme';
 import type {
   DocumentTitleOptions,
   LinkingOptions,
@@ -30,8 +31,17 @@ import { type Thenable, useThenable } from './useThenable';
 
 declare global {
   var REACT_NAVIGATION_DEVTOOLS: WeakMap<
-    NavigationContainerRef<any>,
-    { readonly linking: LinkingOptions<any> }
+    object,
+    {
+      readonly linking: LinkingOptions<any>;
+      readonly listeners: Set<
+        (data: {
+          type: 'link';
+          url: string;
+          state: PartialState<NavigationState> | undefined;
+        }) => void
+      >;
+    }
   >;
 }
 
@@ -95,30 +105,32 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
    * unless `documentTitle.enabled` is `false`.
    */
   documentTitle?: DocumentTitleOptions;
+  /**
+   * Ref object which refers to the navigation object containing helper methods.
+   */
+  ref?: React.Ref<NavigationContainerRef<ParamList>> | undefined;
 };
 
 const RESTORE_STATE_ERROR =
   'Failed to restore navigation state. The state will be initialized based on the navigation tree.';
 
-function NavigationContainerInner(
-  {
-    direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
-    theme = DefaultTheme,
-    linking,
-    persistor,
-    fallback = null,
-    documentTitle,
-    onStateChange,
-    ...rest
-  }: Props<ParamListBase>,
-  ref?: React.Ref<NavigationContainerRef<ParamListBase> | null>
-) {
-  if (linking?.config) {
-    validatePathConfig(linking.config);
-  }
-
-  const refContainer =
-    React.useRef<NavigationContainerRef<ParamListBase>>(null);
+/**
+ * Container component that manages the navigation state.
+ *
+ * This should be rendered at the root wrapping the whole app.
+ */
+export function NavigationContainer<ParamList extends {} = RootParamList>({
+  direction = DEFAULT_DIRECTION,
+  theme = LightTheme,
+  linking,
+  persistor,
+  fallback = null,
+  documentTitle,
+  onStateChange,
+  ref,
+  ...rest
+}: Props<ParamList>) {
+  const refContainer = React.useRef<NavigationContainerRef<ParamList>>(null);
 
   useBackButton(refContainer);
   useDocumentTitle(refContainer, documentTitle);
@@ -132,6 +144,10 @@ function NavigationContainerInner(
       };
     }
 
+    if (linking?.config) {
+      validatePathConfig(linking.config);
+    }
+
     return {
       options: {
         ...linking,
@@ -150,10 +166,16 @@ function NavigationContainerInner(
   // This will be used by the devtools
   React.useEffect(() => {
     if (refContainer.current) {
+      const previous = REACT_NAVIGATION_DEVTOOLS.get(refContainer.current);
+      const listeners = previous?.listeners ?? new Set();
+
       REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
         get linking() {
           return linkingConfig.options;
         },
+        get listeners() {
+          return listeners;
+        },
       });
     }
   });
@@ -166,8 +188,7 @@ function NavigationContainerInner(
     return getInitialState();
   });
 
-  const isPersistenceSupported =
-    Platform.OS === 'web' ? !linkingConfig.options.enabled : true;
+  const isPersistenceSupported = IS_NATIVE || !linkingConfig.options.enabled;
 
   const [isPersistedStateResolved, initialStateFromPersisted] = useThenable(
     () => {
@@ -253,16 +274,3 @@ function NavigationContainerInner(
     </LocaleDirContext.Provider>
   );
 }
-
-/**
- * Container component that manages the navigation state.
- *
- * This should be rendered at the root wrapping the whole app.
- */
-export const NavigationContainer = React.forwardRef(
-  NavigationContainerInner
-) as <ParamList extends {} = RootParamList>(
-  props: Props<ParamList> & {
-    ref?: React.Ref<NavigationContainerRef<ParamList>>;
-  }
-) => React.ReactElement;

package/src/__stubs__/createStackNavigator.tsx

@@ -1,11 +1,10 @@
 import {
   createNavigatorFactory,
   type DefaultNavigatorOptions,
-  type NavigationListBase,
+  type NavigatorTypeBagBase,
   type ParamListBase,
   type StackNavigationState,
   StackRouter,
-  type TypedNavigator,
   useNavigationBuilder,
 } from '@react-navigation/core';
 
@@ -23,22 +22,25 @@ const StackNavigator = (
     props
   );
 
-  return (
-    <NavigationContent>
-      {descriptors[state.routes[state.index].key].render()}
-    </NavigationContent>
-  );
+  const route = state.routes[state.index];
+
+  if (route == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const descriptor = descriptors[route.key];
+
+  if (descriptor == null) {
+    throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+  }
+
+  return <NavigationContent>{descriptor.render()}</NavigationContent>;
 };
 
-export function createStackNavigator<
-  ParamList extends ParamListBase,
->(): TypedNavigator<{
-  ParamList: ParamList;
-  State: StackNavigationState<ParamList>;
-  ScreenOptions: {};
-  EventMap: {};
-  NavigationList: NavigationListBase<ParamList>;
+interface StubStackTypeBag extends NavigatorTypeBagBase {
+  State: StackNavigationState<this['ParamList']>;
   Navigator: typeof StackNavigator;
-}> {
-  return createNavigatorFactory(StackNavigator)();
 }
+
+export const createStackNavigator =
+  createNavigatorFactory<StubStackTypeBag>(StackNavigator);

package/src/constants.native.tsx

@@ -0,0 +1,10 @@
+import { I18nManager } from 'react-native';
+
+import type { LocaleDirection } from './types';
+
+export const DEFAULT_DIRECTION: LocaleDirection = I18nManager.getConstants()
+  .isRTL
+  ? 'rtl'
+  : 'ltr';
+
+export const IS_NATIVE = true;

package/src/constants.tsx

@@ -0,0 +1,5 @@
+import type { LocaleDirection } from './types';
+
+export const DEFAULT_DIRECTION: LocaleDirection = 'ltr';
+
+export const IS_NATIVE = false;

package/src/createMemoryHistory.tsx

@@ -10,6 +10,8 @@ type HistoryRecord = {
   path: string;
 };
 
+const getPathWithoutHash = (path: string) => path.split('#')[0] ?? '';
+
 export function createMemoryHistory() {
   let index = 0;
   let items: HistoryRecord[] = [];
@@ -48,11 +50,17 @@ export function createMemoryHistory() {
     },
 
     backIndex({ path }: { path: string }) {
+      const pathWithoutHash = getPathWithoutHash(path);
+
       // We need to find the index from the element before current to get closest path to go back to
       for (let i = index - 1; i >= 0; i--) {
         const item = items[i];
 
-        if (item.path === path) {
+        if (item == null) {
+          continue;
+        }
+
+        if (item.path === pathWithoutHash) {
           return i;
         }
       }
@@ -64,12 +72,13 @@ export function createMemoryHistory() {
       interrupt();
 
       const id = nanoid();
+      const pathWithoutHash = getPathWithoutHash(path);
 
       // When a new entry is pushed, all the existing entries after index will be inaccessible
       // So we remove any existing entries after the current index to clean them up
       items = items.slice(0, index + 1);
 
-      items.push({ path, state, id });
+      items.push({ path: pathWithoutHash, state, id });
       index = items.length - 1;
 
       // We pass empty string for title because it's ignored in all browsers except safari
@@ -83,6 +92,7 @@ export function createMemoryHistory() {
       interrupt();
 
       const id = window.history.state?.id ?? nanoid();
+      const pathWithoutHash = getPathWithoutHash(path);
 
       // Need to keep the hash part of the path if there was no previous history entry
       // or the previous history entry had the same path
@@ -98,13 +108,16 @@ export function createMemoryHistory() {
         //   So we need to push the entry as there's nothing to replace
 
         pathWithHash = pathWithHash + hash;
-        items = [{ path: pathWithHash, state, id }];
+        items = [{ path: pathWithoutHash, state, id }];
         index = 0;
       } else {
-        if (items[index].path === path) {
+        const item = items[index];
+
+        if (item?.path === pathWithoutHash) {
           pathWithHash = pathWithHash + hash;
         }
-        items[index] = { path, state, id };
+
+        items[index] = { path: pathWithoutHash, state, id };
       }
 
       window.history.replaceState({ id }, '', pathWithHash);
@@ -138,6 +151,8 @@ export function createMemoryHistory() {
         return;
       }
 
+      const targetId = items[index]?.id;
+
       // When we call `history.go`, `popstate` will fire when there's history to go back to
       // So we need to somehow handle following cases:
       // - There's history to go back, `history.go` is called, and `popstate` fires
@@ -147,7 +162,11 @@ export function createMemoryHistory() {
         const done = (interrupted?: boolean) => {
           clearTimeout(timer);
 
-          if (interrupted) {
+          // The current entry may not be the one we intended to land on:
+          // - The traversal didn't happen yet, e.g. it took longer than the timeout
+          // - The user navigated in the browser while our traversal was in-flight
+          // So we treat it the same as the operation being interrupted
+          if (interrupted || window.history.state?.id !== targetId) {
             reject(new Error('History was changed during navigation.'));
             return;
           }
@@ -176,10 +195,12 @@ export function createMemoryHistory() {
         // But on Firefox, it seems to take much longer, around 50ms from our testing
         // We're using a hacky timeout since there doesn't seem to be way to know for sure
         const timer = setTimeout(() => {
+          window.removeEventListener('popstate', onPopState);
+
           const foundIndex = pending.findIndex((it) => it.ref === done);
 
           if (foundIndex > -1) {
-            pending[foundIndex].cb();
+            pending[foundIndex]?.cb();
             pending.splice(foundIndex, 1);
           }