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

package/src/createStandardNavigationFactories.tsx

@@ -0,0 +1,219 @@
+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.NavigationContent>
+        <NavigatorContent
+          {...(rest as NavigatorProps & MapperProps)}
+          {...mapped}
+          state={state}
+          descriptors={descriptors}
+          actions={actions}
+          emitter={emitter}
+        />
+      </builder.NavigationContent>
+    );
+  }
+
+  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,14 +8,14 @@ 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'> & {
+  linking?: Omit<LinkingOptions<ParamList>, 'config' | 'enabled'> & {
     /**
      * Whether deep link handling should be enabled.
      * Defaults to `auto`.
@@ -30,10 +28,7 @@ type Props = Omit<
     /**
      * Additional configuration
      */
-    config?: Omit<
-      NonNullable<LinkingOptions<ParamListBase>['config']>,
-      'screens'
-    >;
+    config?: Omit<NonNullable<LinkingOptions<ParamList>['config']>, 'screens'>;
   };
 };
 
@@ -44,13 +39,14 @@ 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();
 
-  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,
@@ -101,5 +97,5 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
     );
   }
 
-  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/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>;
+};
+
+export function CornerInset({ ref, ...rest }: Props) {
+  const root = React.use(NavigationContainerRefContext);
+
+  const nativeRef =
+    React.useRef<
+      React.ElementRef<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,40 @@
+import * as React from 'react';
+import type { ViewProps } 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;
+} & Omit<ViewProps, 'children'>;
+
+export type CornerInsetRef = {
+  relayout(): void;
+};
+
+type Props = CornerInsetProps & {
+  ref?: React.Ref<CornerInsetRef>;
+};
+
+export function CornerInset({ ref }: Props) {
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      relayout() {},
+    }),
+    []
+  );
+
+  return null;
+}

package/src/native/MaterialSymbol.android.tsx

@@ -1,7 +1,6 @@
 import {
   type ImageSourcePropType,
   PixelRatio,
-  PlatformColor,
   processColor,
   type ViewProps,
 } from 'react-native';
@@ -13,15 +12,11 @@ import type { MaterialSymbolOptions } from './types';
 
 export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
 
-const imageSourceCache = new Map<string, ImageSourcePropType>();
-
-const DEFAULT_COLOR = PlatformColor('?attr/colorForeground');
-
 export function MaterialSymbol({
   name,
   weight,
   size = 24,
-  color = DEFAULT_COLOR,
+  color,
   style,
   ...rest
 }: MaterialSymbolProps): React.ReactElement {
@@ -56,15 +51,6 @@ MaterialSymbol.getImageSource = ({
     throw new Error(`Invalid color value: ${String(color)}`);
   }
 
-  const scale = PixelRatio.get();
-
-  const cacheKey = `${name}:${variant}:${weight}:${size}:${scale}:${JSON.stringify(processedColor)}`;
-  const cached = imageSourceCache.get(cacheKey);
-
-  if (cached !== undefined) {
-    return cached;
-  }
-
   const uri = NativeMaterialSymbolModule.getImageSource(
     name,
     variant,
@@ -75,12 +61,10 @@ MaterialSymbol.getImageSource = ({
 
   const source: ImageSourcePropType = {
     uri,
-    scale,
+    scale: PixelRatio.get(),
     width: size,
     height: size,
   };
 
-  imageSourceCache.set(cacheKey, source);
-
   return source;
 };

package/src/native/MaterialSymbol.tsx

@@ -1,4 +1,4 @@
-import { type ImageSourcePropType, type ViewProps } from 'react-native';
+import type { ImageSourcePropType, ViewProps } from 'react-native';
 
 import type { MaterialSymbolOptions } from './types';