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

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,21 @@ 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 warnOnce from 'warn-once';
 
+import { checkSerializable } from './checkSerializable';
+import { DEFAULT_DIRECTION, IS_NATIVE } from './constants';
+import { getStateBreadcrumb } from './getStateBreadcrumb';
 import { LinkingContext } from './LinkingContext';
 import { LocaleDirContext } from './LocaleDirContext';
-import { DefaultTheme } from './theming/DefaultTheme';
+import { LightTheme } from './theming/LightTheme';
 import type {
   DocumentTitleOptions,
   LinkingOptions,
@@ -30,8 +34,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
+      >;
+    }
   >;
 }
 
@@ -68,12 +81,16 @@ type Props<ParamList extends {}> = NavigationContainerProps & {
    * ```ts
    * const persistor = {
    *   async persist(state) {
-   *     await AsyncStorage.setItem('state-key-v1', JSON.stringify(state));
+   *     if (state == null) {
+   *       await AsyncStorage.removeItem('state-key-v1');
+   *     } else {
+   *       await AsyncStorage.setItem('state-key-v1', state);
+   *     }
    *   },
    *   async restore() {
    *     const state = await AsyncStorage.getItem('state-key-v1');
    *
-   *     return state ? JSON.parse(state) : undefined;
+   *     return state ?? undefined;
    *   },
    * };
    *
@@ -95,30 +112,40 @@ 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 PARSE_STATE_ERROR =
+  'Failed to parse the restored navigation state. The state will be initialized based on the navigation tree.';
+
+const PERSIST_STATE_ERROR = 'Failed to persist the navigation state.';
+
+const STRINGIFY_STATE_ERROR =
+  'Failed to stringify the navigation state. The state will not be persisted.';
 
-  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 +159,10 @@ function NavigationContainerInner(
       };
     }
 
+    if (linking?.config) {
+      validatePathConfig(linking.config);
+    }
+
     return {
       options: {
         ...linking,
@@ -150,10 +181,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,11 +203,10 @@ function NavigationContainerInner(
     return getInitialState();
   });
 
-  const isPersistenceSupported =
-    Platform.OS === 'web' ? !linkingConfig.options.enabled : true;
+  const isPersistenceSupported = IS_NATIVE || !linkingConfig.options.enabled;
 
   const [isPersistedStateResolved, initialStateFromPersisted] = useThenable(
-    () => {
+    (): InitialState | undefined | Thenable<InitialState | undefined> => {
       if (
         isPersistenceSupported === false ||
         rest.initialState != null ||
@@ -179,42 +215,88 @@ function NavigationContainerInner(
         return undefined;
       }
 
-      let restoredState;
+      const parse = (
+        serializedState: string | undefined
+      ): InitialState | undefined => {
+        if (serializedState == null) {
+          return undefined;
+        }
+
+        try {
+          return persistor.parse
+            ? persistor.parse(serializedState)
+            : JSON.parse(serializedState);
+        } catch (e) {
+          console.error(PARSE_STATE_ERROR, e);
+
+          return undefined;
+        }
+      };
 
       try {
-        restoredState = persistor.restore();
+        const result = persistor.restore();
+
+        return result != null && typeof result === 'object' && 'then' in result
+          ? result.then(parse, (e) => {
+              console.error(RESTORE_STATE_ERROR, e);
+
+              return undefined;
+            })
+          : parse(result);
       } catch (e) {
         console.error(RESTORE_STATE_ERROR, e);
 
         return undefined;
       }
+    }
+  );
 
-      if (restoredState == null) {
-        return undefined;
-      }
+  const onPersistState = (state: Readonly<NavigationState> | undefined) => {
+    if (persistor == null) {
+      return;
+    }
 
-      if ('then' in restoredState) {
-        return restoredState.then(
-          (state) => state,
-          (error) => {
-            console.error(RESTORE_STATE_ERROR, error);
+    let serializedState: string | undefined;
 
-            return undefined;
-          }
-        );
+    try {
+      serializedState = persistor.stringify
+        ? persistor.stringify(state)
+        : JSON.stringify(state);
+    } catch (e) {
+      console.error(STRINGIFY_STATE_ERROR, e);
+
+      return;
+    }
+
+    try {
+      const value = persistor.persist(serializedState);
+
+      if (value != null && typeof value === 'object' && 'then' in value) {
+        // eslint-disable-next-line promise/catch-or-return
+        value.then(undefined, (e) => {
+          console.error(PERSIST_STATE_ERROR, e);
+        });
       }
+    } catch (e) {
+      console.error(PERSIST_STATE_ERROR, e);
+    }
+  };
 
-      const thenable: Thenable<InitialState | undefined> = {
-        then(onfulfilled) {
-          return Promise.resolve(
-            onfulfilled ? onfulfilled(restoredState) : restoredState
-          );
-        },
-      };
+  const onSerializableCheck = (
+    state: Readonly<NavigationState> | undefined
+  ) => {
+    if (process.env.NODE_ENV !== 'production' && state != null) {
+      const result = checkSerializable(state);
 
-      return thenable;
+      if (!result.serializable) {
+        const breadcrumb = getStateBreadcrumb(state, result.location);
+
+        const message = `Non-serializable values were found in the navigation state. Check:\n\n${breadcrumb} (${result.reason})\n\nThis can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.`;
+
+        warnOnce(true, message);
+      }
     }
-  );
+  };
 
   // FIXME
   // @ts-expect-error not sure why this is not working
@@ -245,7 +327,8 @@ function NavigationContainerInner(
           }
           onStateChange={(state) => {
             onStateChange?.(state);
-            persistor?.persist(state);
+            onPersistState(state);
+            onSerializableCheck(state);
           }}
           ref={refContainer}
         />
@@ -253,16 +336,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);