@react-navigation/native 8.0.0-alpha.35 → 8.0.0-alpha.36

package/src/Link.tsx

@@ -9,47 +9,58 @@ import {
 
 import { type LinkProps, useLinkProps } from './useLinkProps';
 
-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;
-  };
+type PressEvent =
+  | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  | GestureResponderEvent;
+
+type LinkBaseProps = Omit<TextProps, 'disabled'> & {
+  target?: string;
+  onPress?: (e: PressEvent) => void;
+  disabled?: boolean | undefined;
+  children: React.ReactNode;
+};
 
 /**
  * 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,
   style,
+  target,
   ...rest
-}: Props<ParamList, RouteName>) {
+}: LinkProps<NoInfer<ParamList>, RouteName> & LinkBaseProps) {
+  // @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
-  ) => {
+  const onPress = (e: PressEvent) => {
+    if (rest.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
     if ('onPress' in rest) {
       rest.onPress?.(e);
     }
@@ -64,7 +75,17 @@ export function Link<
     ...props,
     ...rest,
     ...Platform.select({
-      web: { onClick: onPress } as any,
+      web: {
+        'aria-disabled': rest.disabled,
+        onAuxClick: rest.disabled
+          ? (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          : undefined,
+        onClick: onPress,
+        hrefAttrs: { target },
+      },
       default: { onPress },
     }),
     style: [{ color: colors.primary }, fonts.regular, style],

package/src/createMemoryHistory.tsx

@@ -195,6 +195,8 @@ 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) {

package/src/native/ReactNavigationCornerInsetViewNativeComponent.ts

@@ -29,4 +29,4 @@ export default codegenNativeComponent<NativeProps>(
   {
     interfaceOnly: true,
   }
-) as HostComponent<NativeProps>;
+);

package/src/useDeepStableValue.tsx

@@ -0,0 +1,12 @@
+import isEqual from 'fast-deep-equal';
+import * as React from 'react';
+
+export function useDeepStableValue<T>(value: T): T {
+  const valueRef = React.useRef(value);
+
+  if (!isEqual(valueRef.current, value)) {
+    valueRef.current = value;
+  }
+
+  return valueRef.current;
+}

package/src/useLinkProps.tsx

@@ -1,151 +1,436 @@
 import {
+  CommonActions,
+  type FocusedRouteState,
   getPathFromState,
   type NavigationAction,
+  type NavigationContainerRef,
   NavigationContainerRefContext,
+  NavigationContext,
+  NavigationFocusedRouteStateContext,
+  type NavigationHelpers,
   NavigationHelpersContext,
+  type NavigationProp,
+  type NavigatorScreenParams,
+  type ParamListBase,
+  type ParamListForNavigator,
   type RootParamList,
 } from '@react-navigation/core';
 import * as React from 'react';
 import { type GestureResponderEvent, Platform } from 'react-native';
+import useLatestCallback from 'use-latest-callback';
 
 import { LinkingContext } from './LinkingContext';
+import { useDeepStableValue } from './useDeepStableValue';
+
+type LinkScreenTargetProps<
+  ParamList extends {},
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    keyof ParamList,
+    string
+  >,
+> = RouteName extends unknown
+  ? undefined extends ParamList[RouteName]
+    ? {
+        href?: string | undefined;
+        action?: NavigationAction | undefined;
+        in?: Extract<keyof ParamList, string> | undefined;
+        screen: RouteName;
+        params?: ParamList[RouteName] | undefined;
+      }
+    : {
+        href?: string | undefined;
+        action?: NavigationAction | undefined;
+        in?: Extract<keyof ParamList, string> | undefined;
+        screen: RouteName;
+        params: ParamList[RouteName];
+      }
+  : never;
+
+type LinkScreenTargetPropsWithIn<
+  ParamList extends {},
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    keyof ParamList,
+    string
+  >,
+> = RouteName extends unknown
+  ? undefined extends ParamList[RouteName]
+    ? {
+        href?: string | undefined;
+        action?: NavigationAction | undefined;
+        in: Extract<keyof ParamList, string>;
+        screen: RouteName;
+        params?: ParamList[RouteName] | undefined;
+      }
+    : {
+        href?: string | undefined;
+        action?: NavigationAction | undefined;
+        in: Extract<keyof ParamList, string>;
+        screen: RouteName;
+        params: ParamList[RouteName];
+      }
+  : never;
+
+type LinkPropsWithInForParams<Params> = [Params] extends [never]
+  ? never
+  : [Params] extends [NavigatorScreenParams<infer Navigator>]
+    ? ParamListForNavigator<Navigator> extends infer NestedParamList extends {}
+      ?
+          | LinkScreenTargetPropsWithIn<NestedParamList>
+          | LinkPropsWithIn<NestedParamList>
+      : never
+    : never;
+
+type LinkPropsWithIn<ParamList extends {}> = string extends keyof ParamList
+  ? never
+  : {
+      [RouteName in keyof ParamList]: LinkPropsWithInForParams<
+        Exclude<ParamList[RouteName], undefined>
+      >;
+    }[keyof ParamList];
 
 export type LinkProps<
   ParamList extends {} = RootParamList,
-  RouteName extends keyof ParamList = keyof ParamList,
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    keyof ParamList,
+    string
+  >,
 > =
-  | ({
-      href?: string | undefined;
-      action?: NavigationAction | undefined;
-    } & (RouteName extends unknown
-      ? undefined extends ParamList[RouteName]
-        ? { screen: RouteName; params?: ParamList[RouteName] | undefined }
-        : { screen: RouteName; params: ParamList[RouteName] }
-      : never))
+  | LinkScreenTargetProps<ParamList, RouteName>
+  | LinkPropsWithIn<ParamList>
   | {
       href?: string | undefined;
       action: NavigationAction;
+      in?: undefined;
       screen?: undefined;
       params?: undefined;
     };
 
+const NESTED_KEYS = ['payload', 'params', 'state', 'routes'] as const;
+const NESTED_PARAMS_KEYS = ['params', 'state'] as const;
+const NAVIGATE_ACTION_TYPES = [
+  'NAVIGATE',
+  'PUSH',
+  'REPLACE',
+  'POP_TO',
+  'JUMP_TO',
+];
+/**
+ * Nested params are tracked as consumed after handling
+ * So navigating with same params again won't work
+ * This can happen if the action or params are memoized
+ * Or component hasn't re-renderd to re-create inline objects
+ * So we clone the action and params when necessary before dispatch
+ */
+function clone<T>(value: T): T;
+function clone(
+  value: unknown,
+  keys: typeof NESTED_KEYS | typeof NESTED_PARAMS_KEYS,
+  clones: WeakMap<object, object>
+): unknown;
+function clone(
+  value: unknown,
+  keys: typeof NESTED_KEYS | typeof NESTED_PARAMS_KEYS = NESTED_KEYS,
+  clones?: WeakMap<object, object>
+): unknown {
+  if (typeof value !== 'object' || value == null) {
+    return value;
+  }
+
+  const existing = clones?.get(value);
+
+  if (existing) {
+    return existing;
+  }
+
+  const isArray = Array.isArray(value);
+
+  if (
+    keys === NESTED_PARAMS_KEYS &&
+    'screen' in value &&
+    typeof value.screen !== 'string' &&
+    !(
+      'state' in value &&
+      typeof value.state === 'object' &&
+      value.state != null &&
+      'routes' in value.state &&
+      Array.isArray(value.state.routes)
+    )
+  ) {
+    return value;
+  }
+
+  let copy: object | undefined =
+    keys === NESTED_PARAMS_KEYS ? { ...value } : undefined;
+
+  clones ??= new WeakMap();
+  clones.set(value, copy ?? value);
+
+  for (const key of isArray ? value.keys() : keys) {
+    const nested: unknown = Reflect.get(value, key);
+
+    const cloned = clone(
+      nested,
+      key === 'params' ? NESTED_PARAMS_KEYS : NESTED_KEYS,
+      clones
+    );
+
+    if (cloned !== nested) {
+      copy ??= isArray ? [...value] : { ...value };
+      clones.set(value, copy);
+
+      Reflect.set(copy, key, cloned);
+    }
+  }
+
+  return copy ?? value;
+}
+
+const getTargetFromAction = (
+  action: NavigationAction | undefined,
+  screens: Record<string, unknown> | undefined
+) => {
+  if (action === undefined || screens === undefined) {
+    return undefined;
+  }
+
+  const { payload } = action;
+
+  if (
+    !NAVIGATE_ACTION_TYPES.includes(action.type) ||
+    payload === undefined ||
+    !('name' in payload) ||
+    typeof payload.name !== 'string' ||
+    !(payload.name in screens)
+  ) {
+    return undefined;
+  }
+
+  return {
+    screen: payload.name,
+    params:
+      'params' in payload &&
+      typeof payload.params === 'object' &&
+      payload.params != null
+        ? payload.params
+        : undefined,
+  };
+};
+
+const getStateForParent = (
+  parent: string | undefined,
+  targetState: FocusedRouteState,
+  focusedRouteState: FocusedRouteState | undefined
+): FocusedRouteState | undefined => {
+  if (parent === undefined) {
+    return targetState;
+  }
+
+  if (focusedRouteState === undefined) {
+    return undefined;
+  }
+
+  const route = focusedRouteState.routes[0];
+
+  const childState = getStateForParent(parent, targetState, route.state);
+
+  if (childState !== undefined) {
+    return {
+      routes: [
+        {
+          ...route,
+          state: childState,
+        },
+      ],
+    };
+  }
+
+  if (route.name === parent) {
+    return targetState;
+  }
+
+  return undefined;
+};
+
 /**
  * Hook to get props for an anchor tag so it can work with in page navigation.
  *
+ * @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`).
  */
 export function useLinkProps<
-  const ParamList extends {} = RootParamList,
-  const RouteName extends keyof ParamList = keyof ParamList,
->({ screen, params, href, action }: LinkProps<ParamList, RouteName>) {
+  ParamList extends {} = RootParamList,
+  RouteName extends Extract<keyof ParamList, string> = Extract<
+    keyof ParamList,
+    string
+  >,
+>({
+  in: parent,
+  screen,
+  params,
+  action,
+  ...rest
+}: LinkProps<NoInfer<ParamList>, RouteName>) {
   const root = React.use(NavigationContainerRefContext);
-  const navigation = React.use(NavigationHelpersContext);
+
+  let navigation:
+    | NavigationHelpers<ParamListBase>
+    | NavigationProp<ParamListBase>
+    | NavigationContainerRef<ParamListBase>
+    | undefined = React.use(NavigationContext);
+
+  if (parent != null) {
+    navigation = navigation?.getParent(parent);
+  } else if (action != null) {
+    const helpers = React.use(NavigationHelpersContext);
+
+    // Handle custom actions in the immediate parent
+    navigation = helpers ?? navigation ?? root;
+  } else {
+    // The ref dispatches in currently focused screen
+    // So prefer the top-most navigator if available
+    let parent = navigation?.getParent();
+
+    while (parent !== undefined) {
+      navigation = parent;
+      parent = navigation.getParent();
+    }
+
+    navigation = navigation ?? root;
+  }
+
+  if (navigation == null) {
+    if (parent != null) {
+      throw new Error(
+        `Couldn't find a navigation object for '${parent}' in current or any parent screens. Is your component inside the correct screen?`
+      );
+    }
+
+    throw new Error(
+      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+    );
+  }
+
   const { options } = React.use(LinkingContext);
 
-  const onPress = (
-    e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
-  ) => {
-    let shouldHandle = false;
-
-    if (Platform.OS !== 'web' || !e) {
-      e?.preventDefault?.();
-      shouldHandle = true;
-    } else {
-      // ignore clicks with modifier keys
-      const hasModifierKey =
-        ('metaKey' in e && e.metaKey) ||
-        ('altKey' in e && e.altKey) ||
-        ('ctrlKey' in e && e.ctrlKey) ||
-        ('shiftKey' in e && e.shiftKey);
-
-      // only handle left clicks
-      const isLeftClick =
-        'button' in e ? e.button == null || e.button === 0 : true;
-
-      // let browser handle "target=_blank" etc.
-      const isSelfTarget =
-        e.currentTarget && 'target' in e.currentTarget
-          ? [undefined, null, '', 'self'].includes(e.currentTarget.target)
-          : true;
-
-      if (!hasModifierKey && isLeftClick && isSelfTarget) {
-        e.preventDefault?.();
-        shouldHandle = true;
+  const onPress = useLatestCallback(
+    (
+      e?:
+        | React.MouseEvent<HTMLAnchorElement, MouseEvent>
+        | GestureResponderEvent
+    ) => {
+      if (Platform.OS === 'web' && e) {
+        // ignore clicks with modifier keys
+        const hasModifierKey =
+          ('metaKey' in e && e.metaKey) ||
+          ('altKey' in e && e.altKey) ||
+          ('ctrlKey' in e && e.ctrlKey) ||
+          ('shiftKey' in e && e.shiftKey);
+
+        // only handle left clicks
+        const isLeftClick =
+          'button' in e ? e.button == null || e.button === 0 : true;
+
+        // let browser handle "target=_blank" etc.
+        const isSelfTarget =
+          e.currentTarget && 'target' in e.currentTarget
+            ? [undefined, null, '', '_self'].includes(e.currentTarget.target)
+            : true;
+
+        // let the browser handle the interaction
+        if (hasModifierKey || !isLeftClick || !isSelfTarget) {
+          return;
+        }
       }
-    }
 
-    if (shouldHandle) {
-      if (action) {
-        if (navigation) {
-          navigation.dispatch(action);
-        } else if (root) {
-          root.dispatch(action);
-        } else {
+      e?.preventDefault();
+
+      let cloned: NavigationAction;
+
+      if (action != null) {
+        cloned = clone(action);
+      } else {
+        if (screen == null) {
           throw new Error(
-            "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+            "Couldn't find a screen to navigate to. Make sure to provide a screen name."
           );
         }
-      } else {
-        // @ts-expect-error This is already type-checked by the prop types
-        navigation?.navigate(screen, params);
+
+        cloned = clone(
+          CommonActions.navigate(
+            screen,
+            // @ts-expect-error This is already type-checked by the prop types
+            params
+          )
+        );
+
+        if (parent != null) {
+          cloned = {
+            ...cloned,
+            target: navigation.getState()?.key,
+          };
+        }
       }
+
+      navigation.dispatch(cloned);
     }
-  };
+  );
 
-  const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
-
-  if (Platform.OS === 'web') {
-    if (screen == null && action != null && options?.config != null) {
-      switch (action.type) {
-        case 'NAVIGATE':
-        case 'PUSH':
-        case 'REPLACE':
-        case 'POP_TO':
-        case 'JUMP_TO': {
-          if (
-            action.payload != null &&
-            'name' in action.payload &&
-            typeof action.payload.name === 'string' &&
-            action.payload.name in options.config.screens
-          ) {
-            screen = action.payload.name;
-
-            if (
-              'params' in action.payload &&
-              typeof action.payload.params === 'object' &&
-              action.payload.params != null
-            ) {
-              // @ts-expect-error this is fine 🔥
-              params = action.payload.params;
-            }
+  const target = useDeepStableValue(
+    Platform.OS === 'web'
+      ? typeof screen === 'string'
+        ? {
+            screen,
+            params:
+              typeof params === 'object' && params != null ? params : undefined,
           }
-        }
-      }
+        : getTargetFromAction(action, options?.config?.screens)
+      : undefined
+  );
+
+  const state =
+    Platform.OS === 'web' && rest.href == null && target != null
+      ? React.use(NavigationFocusedRouteStateContext)
+      : undefined;
+
+  const href = React.useMemo(() => {
+    if (Platform.OS !== 'web' || rest.href != null || target == null) {
+      return rest.href;
     }
-  }
+
+    const stateForParent = getStateForParent(
+      parent,
+      {
+        routes: [
+          {
+            name: target.screen,
+            params: target.params,
+          },
+        ],
+      },
+      state
+    );
+
+    if (stateForParent) {
+      const getPath = options?.getPathFromState ?? getPathFromState;
+
+      return getPath(stateForParent, options?.config);
+    }
+
+    return undefined;
+  }, [
+    rest.href,
+    target,
+    parent,
+    state,
+    options?.getPathFromState,
+    options?.config,
+  ]);
 
   return {
-    href:
-      href ??
-      (Platform.OS === 'web' && typeof screen === 'string'
-        ? getPathFromStateHelper(
-            {
-              routes: [
-                {
-                  name: screen,
-                  params:
-                    typeof params === 'object' && params != null
-                      ? params
-                      : undefined,
-                },
-              ],
-            },
-            options?.config
-          )
-        : undefined),
+    href,
     role: 'link' as const,
     onPress,
   };