@react-navigation/native 8.0.0-alpha.5 → 8.0.0-alpha.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "8.0.0-alpha.5",
+  "version": "8.0.0-alpha.51",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -22,20 +22,35 @@
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.tsx",
+      "@react-navigation/source": "./src/index.tsx",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
+    "./server": {
+      "@react-navigation/source": "./src/server/index.tsx",
+      "types": "./lib/typescript/src/server/index.d.ts",
+      "default": "./lib/module/server/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "src",
-    "assets",
     "lib",
-    "ios",
     "android",
-    "ReactNavigation.podspec",
-    "!**/__tests__"
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -46,28 +61,35 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^8.0.0-alpha.2",
-    "escape-string-regexp": "^4.0.0",
+    "@react-navigation/core": "^8.0.0-alpha.41",
+    "@react-navigation/material-symbols": "^8.0.0-alpha.1",
+    "escape-string-regexp": "^5.0.0",
     "fast-deep-equal": "^3.1.3",
-    "nanoid": "^3.3.11",
+    "nanoid": "^5.1.11",
     "sf-symbols-typescript": "^2.2.0",
-    "use-latest-callback": "^0.3.2"
+    "standard-navigation": "^0.0.8",
+    "use-latest-callback": "^0.3.5",
+    "warn-once": "^0.1.1"
   },
   "devDependencies": {
-    "@jest/globals": "^30.0.0",
-    "@testing-library/react-native": "^13.2.1",
-    "@types/react": "~19.1.10",
-    "@types/react-dom": "~19.1.7",
-    "del-cli": "^6.0.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-native": "0.81.4",
-    "react-native-builder-bob": "^0.40.12",
-    "react-test-renderer": "19.1.0",
-    "typescript": "^5.9.2"
+    "@jest/globals": "^30.4.1",
+    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/react-native": "^14.0.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "~19.2.17",
+    "@types/react-dom": "~19.2.3",
+    "del-cli": "^7.0.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.85.3",
+    "react-native-builder-bob": "^0.43.0",
+    "react-native-web": "~0.21.2",
+    "test-renderer": "1.2.0",
+    "typescript": "^6.0.3"
   },
   "peerDependencies": {
-    "react": ">= 19.0.0",
+    "react": ">= 19.2.0",
     "react-native": "*"
   },
   "react-native-builder-bob": {
@@ -103,9 +125,12 @@
       "components": {
         "ReactNavigationSFSymbolView": {
           "className": "ReactNavigationSFSymbolView"
+        },
+        "ReactNavigationCornerInsetView": {
+          "className": "ReactNavigationCornerInsetView"
         }
       }
     }
   },
-  "gitHead": "e70fcf951732df83d28fe5157408974346a1abbc"
+  "gitHead": "7db23d23b7808c2cc6e8fae82982f0b60d5a0003"
 }

package/src/Link.native.tsx

@@ -0,0 +1,69 @@
+import { type RootParamList, useTheme } from '@react-navigation/core';
+import { type GestureResponderEvent, Text } from 'react-native';
+
+// eslint-disable-next-line import-x/extensions
+import type { Props } from './Link.tsx';
+import { useLinkProps } from './useLinkProps';
+
+export function Link<
+  ParamList extends {} = RootParamList,
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    keyof ParamList,
+    string
+  >,
+>({
+  in: parent,
+  screen,
+  params,
+  action,
+  href,
+  style,
+  disabled,
+  children,
+  onPress,
+  id,
+  numberOfLines,
+  testID,
+  '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();
+
+  const onLinkPress = (e: GestureResponderEvent) => {
+    onPress?.(e);
+
+    // Let user prevent default behavior
+    if (!e.defaultPrevented) {
+      props.onPress(e);
+    }
+  };
+
+  return (
+    <Text
+      {...props}
+      aria-busy={ariaBusy}
+      aria-expanded={ariaExpanded}
+      aria-hidden={ariaHidden}
+      aria-label={ariaLabel}
+      accessibilityLabelledBy={ariaLabelledBy}
+      accessibilityLiveRegion={ariaLive === 'off' ? 'none' : ariaLive}
+      disabled={disabled}
+      id={id}
+      testID={testID}
+      numberOfLines={numberOfLines}
+      onPress={onLinkPress}
+      style={[{ color: colors.primary }, fonts.regular, style]}
+    >
+      {children}
+    </Text>
+  );
+}

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) | undefined;
+  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/LinkingContext.tsx

@@ -6,7 +6,7 @@ import type { LinkingOptions } from './types';
 const MISSING_CONTEXT_ERROR = "Couldn't find a LinkingContext context.";
 
 export const LinkingContext = React.createContext<{
-  options?: LinkingOptions<ParamListBase>;
+  options?: LinkingOptions<ParamListBase> | undefined;
 }>({
   get options(): any {
     throw new Error(MISSING_CONTEXT_ERROR);