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

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;
           }
@@ -170,21 +189,24 @@ export function createMemoryHistory() {
 
         pending.push({ ref: done, cb: done });
 
-        // If navigation didn't happen within 100ms, assume that it won't happen
+        // If navigation didn't happen within 1000ms, assume that it won't happen
         // This may not be accurate, but hopefully it won't take so much time
         // In Chrome, navigation seems to happen instantly in next microtask
-        // But on Firefox, it seems to take much longer, around 50ms from our testing
+        // But on Firefox, the traversal can take much longer when the main thread
+        // is busy, e.g. it was measured to take up to ~900ms while rendering a new screen
         // 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);
           }
 
           index = this.index;
-        }, 100);
+        }, 1000);
 
         const onPopState = () => {
           // Fix createMemoryHistory.index variable's value

package/src/createStandardNavigationFactories.tsx

@@ -0,0 +1,217 @@
+import {
+  CommonActions,
+  createNavigatorFactory,
+  createScreenFactory,
+  type DefaultRouterOptions,
+  type EventMapBase,
+  type NavigationAction,
+  type NavigatorTypeBagBase,
+  type ParamListBase,
+  type RouterFactory,
+  useNavigationBuilder,
+} from '@react-navigation/core';
+import * as React from 'react';
+import type {
+  createStandardNavigator,
+  NavigatorArgs as StandardNavigationArgs,
+} from 'standard-navigation';
+
+import { useBuildHref } from './useLinkBuilder';
+import { useMemoArray } from './useMemoArray';
+
+type StandardEventMap<EventMap extends EventMapBase> = {
+  [EventName in keyof EventMap]: {
+    data: EventMap[EventName] extends { data?: infer Data }
+      ? Data extends object | undefined
+        ? Data
+        : object | undefined
+      : undefined;
+    canPreventDefault: EventMap[EventName] extends { canPreventDefault: true }
+      ? true
+      : false;
+  };
+};
+
+export interface StandardNavigationTypeBagBase extends NavigatorTypeBagBase {
+  RouterOptions: DefaultRouterOptions;
+  Navigator: React.ComponentType<{}>;
+}
+
+type StandardNavigationTypeBagFor<
+  TypeBag extends StandardNavigationTypeBagBase,
+  ParamList extends ParamListBase,
+> = TypeBag & { ParamList: ParamList };
+
+type StandardNavigationListFor<
+  TypeBag extends StandardNavigationTypeBagBase,
+  ParamList extends ParamListBase,
+> = StandardNavigationTypeBagFor<TypeBag, ParamList>['NavigationList'];
+
+type StandardNavigationMapperProps<
+  TypeBag extends StandardNavigationTypeBagBase,
+> = {
+  state: StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'];
+  navigation: StandardNavigationListFor<
+    TypeBag,
+    ParamListBase
+  >[keyof StandardNavigationListFor<TypeBag, ParamListBase>];
+};
+
+export function createStandardNavigationFactories<
+  TypeBag extends StandardNavigationTypeBagBase,
+  NavigatorProps extends object = {},
+  MapperProps extends object = {},
+>(
+  navigator: ReturnType<
+    typeof createStandardNavigator<
+      TypeBag['ScreenOptions'],
+      StandardEventMap<TypeBag['EventMap']>,
+      NavigatorProps & MapperProps
+    >
+  >,
+  router: RouterFactory<
+    StandardNavigationTypeBagFor<TypeBag, ParamListBase>['State'],
+    NavigationAction,
+    TypeBag['RouterOptions']
+  >,
+  mapper?: (props: StandardNavigationMapperProps<TypeBag>) => MapperProps
+) {
+  const { type, version, NavigatorContent } = navigator;
+
+  if (type !== 'standard') {
+    throw new Error(
+      `createStandardNavigationFactories only works with standard navigator objects, but got navigator of ${typeof type === 'string' ? `type "${type}".` : 'unknown type.'}`
+    );
+  }
+
+  if (version !== 1) {
+    throw new Error(
+      `createStandardNavigationFactories only works with version 1 of standard navigator objects, but got version ${version}.`
+    );
+  }
+
+  type StandardArgs = StandardNavigationArgs<
+    TypeBag['ScreenOptions'],
+    StandardEventMap<TypeBag['EventMap']>
+  >;
+
+  function StandardNavigationNavigator(props: any) {
+    const builder = useNavigationBuilder<
+      TypeBag['State'],
+      TypeBag['RouterOptions'],
+      TypeBag['ActionHelpers'],
+      TypeBag['ScreenOptions'],
+      TypeBag['EventMap']
+    >(router, props);
+
+    const buildHref = useBuildHref();
+
+    const routes = useMemoArray(
+      builder.state.routes.map((route) => {
+        const href = buildHref(route.name, route.params);
+
+        return [
+          {
+            key: route.key,
+            name: route.name,
+            params: route.params,
+            href,
+          },
+          [route.key, route.name, route.params, href],
+        ];
+      })
+    );
+
+    const state = React.useMemo(
+      (): StandardArgs['state'] => ({
+        index: builder.state.index,
+        routes,
+      }),
+      [builder.state.index, routes]
+    );
+
+    const descriptors: StandardArgs['descriptors'] = {};
+
+    for (const route of state.routes) {
+      const descriptor = builder.descriptors[route.key];
+
+      if (descriptor == null) {
+        throw new Error(
+          `No descriptor found for route "${route.name}" (${route.key}).`
+        );
+      }
+
+      descriptors[route.key] = {
+        options: descriptor.options,
+        render: descriptor.render,
+      };
+    }
+
+    const actions = React.useMemo<StandardArgs['actions']>(
+      () => ({
+        navigate(name, params) {
+          builder.navigation.dispatch({
+            ...CommonActions.navigate(name, params),
+            target: builder.state.key,
+          });
+        },
+        back() {
+          builder.navigation.goBack();
+        },
+      }),
+      [builder.navigation, builder.state.key]
+    );
+
+    const emitter = React.useMemo<StandardArgs['emitter']>(
+      () => ({
+        // @ts-expect-error - they are compatible
+        emit: builder.navigation.emit,
+      }),
+      [builder.navigation]
+    );
+
+    const mapped = mapper?.({
+      state: builder.state as TypeBag['State'],
+      navigation: builder.navigation as never,
+    });
+
+    // Omit props used by useNavigationBuilder and routers internally
+    const {
+      /* eslint-disable @typescript-eslint/no-unused-vars */
+      children,
+      initialRouteName,
+      layout,
+      routeNamesChangeBehavior,
+      router: routerOverride,
+      screenLayout,
+      screenListeners,
+      screenOptions,
+      /* eslint-enable @typescript-eslint/no-unused-vars */
+      ...rest
+    } = props;
+
+    return builder.render(
+      <NavigatorContent
+        {...(rest as NavigatorProps & MapperProps)}
+        {...mapped}
+        state={state}
+        descriptors={descriptors}
+        actions={actions}
+        emitter={emitter}
+      />
+    );
+  }
+
+  const createNavigator = createNavigatorFactory<
+    TypeBag & {
+      Navigator: React.ComponentType<NavigatorProps>;
+    }
+  >(StandardNavigationNavigator);
+
+  const createScreen = createScreenFactory<TypeBag>();
+
+  return {
+    createNavigator,
+    createScreen,
+  };
+}

package/src/createStaticNavigation.tsx

@@ -1,8 +1,6 @@
 import {
-  createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
-  type NavigationContainerRef,
-  type ParamListBase,
+  type RootParamList,
   type StaticNavigation,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -10,31 +8,32 @@ import * as React from 'react';
 import { NavigationContainer } from './NavigationContainer';
 import type { LinkingOptions } from './types';
 
-type Props = Omit<
-  React.ComponentProps<typeof NavigationContainer>,
+type Props<ParamList extends {}> = Omit<
+  React.ComponentProps<typeof NavigationContainer<ParamList>>,
   'linking' | 'children'
 > & {
   /**
    * Options for deep linking.
    */
-  linking?: Omit<LinkingOptions<ParamListBase>, 'config' | 'enabled'> & {
-    /**
-     * Whether deep link handling should be enabled.
-     * Defaults to `auto`.
-     *
-     * When set to 'auto', all leaf screens will get autogenerated paths.
-     * The generated paths will be kebab-case versions of the screen names.
-     * This can be overridden for specific screens by specifying `linking` for the screen.
-     */
-    enabled?: 'auto' | true | false;
-    /**
-     * Additional configuration
-     */
-    config?: Omit<
-      NonNullable<LinkingOptions<ParamListBase>['config']>,
-      'screens'
-    >;
-  };
+  linking?:
+    | (Omit<LinkingOptions<ParamList>, 'config' | 'enabled'> & {
+        /**
+         * Whether deep link handling should be enabled.
+         * Defaults to `auto`.
+         *
+         * When set to 'auto', all leaf screens will get autogenerated paths.
+         * The generated paths will be kebab-case versions of the screen names.
+         * This can be overridden for specific screens by specifying `linking` for the screen.
+         */
+        enabled?: 'auto' | true | false | undefined;
+        /**
+         * Additional configuration
+         */
+        config?:
+          | Omit<NonNullable<LinkingOptions<ParamList>['config']>, 'screens'>
+          | undefined;
+      })
+    | undefined;
 };
 
 /**
@@ -44,13 +43,15 @@ type Props = Omit<
  * @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');
+export function createStaticNavigation(tree: StaticNavigation<any>) {
+  const Component = tree.getComponent();
+  const element = <Component />;
 
-  function Navigation(
-    { linking, ...rest }: Props,
-    ref: React.Ref<NavigationContainerRef<ParamListBase>>
-  ) {
+  function Navigation<ParamList extends {} = RootParamList>({
+    linking,
+    ref,
+    ...rest
+  }: Props<ParamList>) {
     const linkingConfig = React.useMemo(() => {
       const screens = createPathConfigForStaticNavigation(
         tree,
@@ -96,10 +97,10 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
 
     return (
       <NavigationContainer {...rest} ref={ref} linking={memoizedLinking}>
-        <Component />
+        {element}
       </NavigationContainer>
     );
   }
 
-  return React.forwardRef(Navigation);
+  return Navigation;
 }

package/src/extractPathFromURL.tsx

@@ -18,12 +18,14 @@ export function extractPathFromURL(prefixes: LinkingPrefix[], url: string) {
       prefixRegex = new RegExp(
         `^${escapeStringRegexp(protocol)}(/)*${host
           .split('.')
-          .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
-          .join('\\.')}`
+          .map((it) => (it === '*' ? '[^/?#]+' : escapeStringRegexp(it)))
+          .join('\\.')}${
+          host === '' || host.endsWith('/') ? '' : '(?=$|[/?#])'
+        }`
       );
     }
 
-    const [originAndPath, ...searchParams] = url.split('?');
+    const [originAndPath = '', ...searchParams] = url.split('?');
 
     if (prefixRegex.test(originAndPath)) {
       const result = originAndPath

package/src/getStateBreadcrumb.tsx

@@ -0,0 +1,44 @@
+import type { NavigationState } from '@react-navigation/core';
+
+export function getStateBreadcrumb(
+  state: NavigationState,
+  location: (string | number)[]
+) {
+  let breadcrumb = '';
+  let pointer: Record<any, any> = state;
+  let params = false;
+
+  for (let i = 0; i < location.length; i++) {
+    const curr = location[i];
+    const prev = location[i - 1];
+
+    if (curr == null) {
+      continue;
+    }
+
+    pointer = pointer[curr];
+
+    if (!params && curr === 'state') {
+      continue;
+    } else if (!params && curr === 'routes') {
+      if (breadcrumb) {
+        breadcrumb += ' > ';
+      }
+    } else if (!params && typeof curr === 'number' && prev === 'routes') {
+      breadcrumb += pointer?.name;
+    } else if (!params) {
+      breadcrumb += ` > ${curr}`;
+      params = true;
+    } else {
+      if (typeof curr === 'number' || /^[0-9]+$/.test(curr)) {
+        breadcrumb += `[${curr}]`;
+      } else if (/^[a-z$_]+$/i.test(curr)) {
+        breadcrumb += `.${curr}`;
+      } else {
+        breadcrumb += `[${JSON.stringify(curr)}]`;
+      }
+    }
+  }
+
+  return breadcrumb;
+}

package/src/getStateFromHref.tsx

@@ -1,11 +1,16 @@
-import { getStateFromPath, type ParamListBase } from '@react-navigation/core';
+import {
+  getStateFromPath,
+  type NavigationState,
+  type ParamListBase,
+} from '@react-navigation/core';
 
 import { extractPathFromURL } from './extractPathFromURL';
 import type { LinkingOptions } from './types';
 
 export function getStateFromHref(
   href: string,
-  options: LinkingOptions<ParamListBase> | undefined
+  options: LinkingOptions<ParamListBase> | undefined,
+  previous: NavigationState | undefined
 ): ReturnType<typeof getStateFromPath> {
   const {
     prefixes,
@@ -40,7 +45,7 @@ export function getStateFromHref(
     );
   }
 
-  const state = getStateFromPathHelper(path, config);
+  const state = getStateFromPathHelper(path, config, previous);
 
   return state;
 }

package/src/index.tsx

@@ -1,16 +1,25 @@
+export {
+  createStandardNavigationFactories,
+  type StandardNavigationTypeBagBase,
+} from './createStandardNavigationFactories';
 export { createStaticNavigation } from './createStaticNavigation';
 export { Link } from './Link';
 export { LinkingContext } from './LinkingContext';
 export { LocaleDirContext } from './LocaleDirContext';
+export {
+  type CornerInsetProps,
+  type CornerInsetRef,
+  CornerInset as UNSTABLE_CornerInset,
+} from './native/CornerInset';
 export {
   MaterialSymbol,
   type MaterialSymbolProps,
 } from './native/MaterialSymbol';
 export { SFSymbol, type SFSymbolProps } from './native/SFSymbol';
 export { NavigationContainer } from './NavigationContainer';
-export { ServerContainer } from './ServerContainer';
 export { DarkTheme } from './theming/DarkTheme';
-export { DefaultTheme } from './theming/DefaultTheme';
+export { LightTheme as DefaultTheme } from './theming/LightTheme';
+export { MaterialDarkTheme, MaterialLightTheme } from './theming/MaterialTheme';
 export * from './types';
 export { useLinkBuilder } from './useLinkBuilder';
 export { type LinkProps, useLinkProps } from './useLinkProps';

package/src/native/CornerInset.ios.tsx

@@ -0,0 +1,87 @@
+import { NavigationContainerRefContext } from '@react-navigation/core';
+import * as React from 'react';
+import { Dimensions } from 'react-native';
+
+// eslint-disable-next-line import-x/extensions
+import type { CornerInsetProps, CornerInsetRef } from './CornerInset.tsx';
+import ReactNavigationCornerInsetViewNativeComponent, {
+  Commands,
+} from './ReactNavigationCornerInsetViewNativeComponent';
+
+type Props = CornerInsetProps & {
+  ref?: React.Ref<CornerInsetRef> | undefined;
+};
+
+export function CornerInset({ ref, ...rest }: Props) {
+  const root = React.use(NavigationContainerRefContext);
+
+  const nativeRef =
+    React.useRef<
+      React.ComponentRef<typeof ReactNavigationCornerInsetViewNativeComponent>
+    >(null);
+
+  const relayout = React.useCallback(() => {
+    if (nativeRef.current) {
+      Commands.relayout(nativeRef.current);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (root == null) {
+      return;
+    }
+
+    let animationFrameHandle: number | null = null;
+
+    // We freeze the corner insets after initial measurements
+    // This is to avoid the insets getting out of sync during transitions
+    // We trigger a relayout explicitly on window resize and transition end
+    // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
+    const unsubscribeWindowResize = Dimensions.addEventListener(
+      'change',
+      // eslint-disable-next-line @eslint-react/web-api/no-leaked-event-listener
+      () => {
+        relayout();
+
+        if (animationFrameHandle) {
+          cancelAnimationFrame(animationFrameHandle);
+        }
+
+        // When window is unmaximized, calling relayout immediately doesn't work
+        // So we delay it to the next frame as a workaround
+        animationFrameHandle = requestAnimationFrame(() => {
+          animationFrameHandle = requestAnimationFrame(() => {
+            relayout();
+          });
+        });
+      }
+    );
+
+    const unsubscribeTransition = root.addListener('__unsafe_event__', (e) => {
+      if (e.data.type === 'transitionEnd') {
+        relayout();
+      }
+    });
+
+    return () => {
+      if (animationFrameHandle) {
+        cancelAnimationFrame(animationFrameHandle);
+      }
+
+      unsubscribeWindowResize.remove();
+      unsubscribeTransition();
+    };
+  }, [root, relayout]);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      relayout,
+    }),
+    [relayout]
+  );
+
+  return (
+    <ReactNavigationCornerInsetViewNativeComponent {...rest} ref={nativeRef} />
+  );
+}

package/src/native/CornerInset.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import type { ViewStyle } from 'react-native';
+
+export type CornerInsetProps = {
+  /**
+   * The direction of the content that should be inset.
+   */
+  direction: 'vertical' | 'horizontal';
+  /**
+   * The edge where the inset should be applied.
+   */
+  edge: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * Whether to collapse to 0 when corner inset matches the baseline inset.
+   * e.g. it will be 0 for corners without traffic lights on iPadOS.
+   *
+   * @default true
+   */
+  adaptive?: boolean | undefined;
+  /**
+   * Style object for the inset view.
+   */
+  style?: ViewStyle | undefined;
+};
+
+export type CornerInsetRef = {
+  relayout(): void;
+};
+
+type Props = CornerInsetProps & {
+  ref?: React.Ref<CornerInsetRef> | undefined;
+};
+
+export function CornerInset({ ref }: Props) {
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      relayout() {},
+    }),
+    []
+  );
+
+  return null;
+}