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

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>;
+};
+
+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;
+  /**
+   * Style object for the inset view.
+   */
+  style?: ViewStyle | undefined;
+};
+
+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,9 +1,8 @@
 import {
   type ImageSourcePropType,
   PixelRatio,
-  PlatformColor,
   processColor,
-  type ViewProps,
+  type ViewStyle,
 } from 'react-native';
 
 import { FONT_WEIGHTS } from './constants';
@@ -11,23 +10,25 @@ import MaterialSymbolViewNativeComponent from './MaterialSymbolViewNativeCompone
 import NativeMaterialSymbolModule from './NativeMaterialSymbolModule';
 import type { MaterialSymbolOptions } from './types';
 
-export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
-
-const imageSourceCache = new Map<string, ImageSourcePropType>();
-
-const DEFAULT_COLOR = PlatformColor('?attr/colorForeground');
+export type MaterialSymbolProps = MaterialSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
 
 export function MaterialSymbol({
   name,
+  variant,
   weight,
   size = 24,
-  color = DEFAULT_COLOR,
+  color,
   style,
-  ...rest
 }: MaterialSymbolProps): React.ReactElement {
   return (
     <MaterialSymbolViewNativeComponent
       name={name}
+      variant={variant}
       weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
       size={size}
       color={color}
@@ -38,7 +39,6 @@ export function MaterialSymbol({
         },
         style,
       ]}
-      {...rest}
     />
   );
 }
@@ -56,15 +56,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 +66,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,8 +1,13 @@
-import { type ImageSourcePropType, type ViewProps } from 'react-native';
+import type { ImageSourcePropType, ViewStyle } from 'react-native';
 
 import type { MaterialSymbolOptions } from './types';
 
-export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
+export type MaterialSymbolProps = MaterialSymbolOptions & {
+  /**
+   * Style object for the symbol.
+   */
+  style?: ViewStyle | undefined;
+};
 
 export function MaterialSymbol(_: MaterialSymbolProps): React.ReactElement {
   throw new Error('MaterialSymbol is only supported on Android.');