@react-navigation/native 7.1.28 → 8.0.0-alpha.1

package/src/__stubs__/createStackNavigator.tsx

@@ -12,7 +12,6 @@ import {
 const StackNavigator = (
   props: DefaultNavigatorOptions<
     ParamListBase,
-    string | undefined,
     StackNavigationState<ParamListBase>,
     {},
     {},
@@ -35,7 +34,6 @@ export function createStackNavigator<
   ParamList extends ParamListBase,
 >(): TypedNavigator<{
   ParamList: ParamList;
-  NavigatorID: string | undefined;
   State: StackNavigationState<ParamList>;
   ScreenOptions: {};
   EventMap: {};

package/src/createStaticNavigation.tsx

@@ -20,10 +20,10 @@ type Props = Omit<
   linking?: Omit<LinkingOptions<ParamListBase>, 'config' | 'enabled'> & {
     /**
      * Whether deep link handling should be enabled.
-     * Defaults to `true` if any `linking` options are specified, `false` otherwise.
+     * Defaults to `auto`.
      *
-     * When 'auto' is specified, all leaf screens will get a autogenerated path.
-     * The generated path will be a kebab-case version of the screen name.
+     * 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;
@@ -55,7 +55,7 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
       const screens = createPathConfigForStaticNavigation(
         tree,
         { initialRouteName: linking?.config?.initialRouteName },
-        linking?.enabled === 'auto'
+        linking?.enabled == null || linking.enabled === 'auto'
       );
 
       if (!screens) return;
@@ -72,14 +72,10 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
     ]);
 
     const memoizedLinking = React.useMemo(() => {
-      if (!linking) {
-        return undefined;
-      }
-
       const enabled =
-        typeof linking.enabled === 'boolean'
-          ? linking.enabled
-          : linkingConfig?.screens != null;
+        linking?.enabled == null || linking.enabled === 'auto'
+          ? true
+          : linking.enabled;
 
       return {
         ...linking,
@@ -92,7 +88,7 @@ export function createStaticNavigation(tree: StaticNavigation<any, any, any>) {
       throw new Error(
         'Linking is enabled but no linking configuration was found for the screens.\n\n' +
           'To solve this:\n' +
-          "- Specify a 'linking' property for the screens you want to link to.\n" +
+          "- Specify a 'linking' property in each of the screen configs that you want to link to.\n" +
           "- Or set 'linking.enabled' to 'auto' to generate paths automatically.\n\n" +
           'See usage guide: https://reactnavigation.org/docs/static-configuration#linking'
       );

package/src/extractPathFromURL.tsx

@@ -1,27 +1,37 @@
 import escapeStringRegexp from 'escape-string-regexp';
 
-export function extractPathFromURL(prefixes: string[], url: string) {
+import type { LinkingPrefix } from './types';
+
+export function extractPathFromURL(prefixes: LinkingPrefix[], url: string) {
   for (const prefix of prefixes) {
-    const protocol = prefix.match(/^[^:]+:/)?.[0] ?? '';
-    const host = prefix
-      .replace(new RegExp(`^${escapeStringRegexp(protocol)}`), '')
-      .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
-      .replace(/^\//, ''); // Remove extra leading slash
-
-    const prefixRegex = new RegExp(
-      `^${escapeStringRegexp(protocol)}(/)*${host
-        .split('.')
-        .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
-        .join('\\.')}`
-    );
+    let prefixRegex;
+
+    if (prefix === '*') {
+      prefixRegex = /^(((https?:\/\/)[^/]+)|([^/]+:(\/\/)?))/;
+    } else {
+      const protocol = prefix.match(/^[^:]+:/)?.[0] ?? '';
+      const host = prefix
+        .replace(new RegExp(`^${escapeStringRegexp(protocol)}`), '')
+        .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
+        .replace(/^\//, ''); // Remove extra leading slash
+
+      prefixRegex = new RegExp(
+        `^${escapeStringRegexp(protocol)}(/)*${host
+          .split('.')
+          .map((it) => (it === '*' ? '[^/]+' : escapeStringRegexp(it)))
+          .join('\\.')}`
+      );
+    }
 
     const [originAndPath, ...searchParams] = url.split('?');
-    const normalizedURL = originAndPath
-      .replace(/\/+/g, '/')
-      .concat(searchParams.length ? `?${searchParams.join('?')}` : '');
 
-    if (prefixRegex.test(normalizedURL)) {
-      return normalizedURL.replace(prefixRegex, '');
+    if (prefixRegex.test(originAndPath)) {
+      const result = originAndPath
+        .replace(prefixRegex, '')
+        .replace(/\/+/g, '/')
+        .concat(searchParams.length ? `?${searchParams.join('?')}` : '');
+
+      return result.startsWith('/') ? result : `/${result}`;
     }
   }
 

package/src/getStateFromHref.tsx

@@ -0,0 +1,46 @@
+import { getStateFromPath, type ParamListBase } from '@react-navigation/core';
+
+import { extractPathFromURL } from './extractPathFromURL';
+import type { LinkingOptions } from './types';
+
+export function getStateFromHref(
+  href: string,
+  options: LinkingOptions<ParamListBase> | undefined
+): ReturnType<typeof getStateFromPath> {
+  const {
+    prefixes,
+    filter,
+    config,
+    getStateFromPath: getStateFromPathHelper = getStateFromPath,
+  } = options || {};
+
+  let path;
+
+  if (href.startsWith('/')) {
+    path = href;
+  } else if (href) {
+    if (filter && !filter(href)) {
+      throw new Error(
+        `Failed to parse href '${href}'. It doesn't match the filter specified in linking config.`
+      );
+    }
+
+    if (prefixes == null || prefixes.length === 0) {
+      throw new Error(
+        `Failed to parse href '${href}'. It doesn't start with '/' and no prefixes are defined in linking config.`
+      );
+    }
+
+    path = extractPathFromURL(prefixes, href);
+  }
+
+  if (path == null) {
+    throw new Error(
+      `Got invalid href '${href}'. It must start with '/' or match one of the prefixes: ${options?.prefixes?.map((prefix) => `'${prefix}'`).join(', ')}.`
+    );
+  }
+
+  const state = getStateFromPathHelper(path, config);
+
+  return state;
+}

package/src/index.tsx

@@ -2,12 +2,16 @@ export { createStaticNavigation } from './createStaticNavigation';
 export { Link } from './Link';
 export { LinkingContext } from './LinkingContext';
 export { LocaleDirContext } from './LocaleDirContext';
+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 * from './types';
-export { UnhandledLinkingContext as UNSTABLE_UnhandledLinkingContext } from './UnhandledLinkingContext';
 export { useLinkBuilder } from './useLinkBuilder';
 export { type LinkProps, useLinkProps } from './useLinkProps';
 export { useLinkTo } from './useLinkTo';

package/src/native/MaterialSymbol.android.tsx

@@ -0,0 +1,81 @@
+import {
+  type ImageSourcePropType,
+  PixelRatio,
+  processColor,
+  type ViewProps,
+} from 'react-native';
+
+import { MATERIAL_SYMBOL_FONT_HASHES } from './MaterialSymbolData';
+import MaterialSymbolViewNativeComponent from './MaterialSymbolViewNativeComponent';
+import NativeMaterialSymbolModule from './NativeMaterialSymbolModule';
+import type { MaterialSymbolOptions } from './types';
+
+export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
+
+const imageSourceCache = new Map<string, ImageSourcePropType>();
+
+export function MaterialSymbol({
+  name,
+  variant = 'outlined',
+  size = 24,
+  color = 'black',
+  style,
+  ...rest
+}: MaterialSymbolProps): React.ReactElement {
+  return (
+    <MaterialSymbolViewNativeComponent
+      name={name}
+      variant={variant}
+      size={size}
+      color={color}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+MaterialSymbol.getImageSource = ({
+  name,
+  variant = 'outlined',
+  size = 24,
+  color = 'black',
+}: MaterialSymbolOptions): ImageSourcePropType => {
+  const hash = MATERIAL_SYMBOL_FONT_HASHES[variant];
+  const processedColor = processColor(color);
+
+  if (processedColor == null) {
+    throw new Error(`Invalid color value: ${String(color)}`);
+  }
+
+  const cacheKey = `${name}:${variant}:${size}:${JSON.stringify(processedColor)}:${hash}`;
+  const cached = imageSourceCache.get(cacheKey);
+
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const uri = NativeMaterialSymbolModule.getImageSource(
+    name,
+    variant,
+    size,
+    { value: processedColor },
+    hash
+  );
+
+  const source: ImageSourcePropType = {
+    uri,
+    scale: PixelRatio.get(),
+    width: size,
+    height: size,
+  };
+
+  imageSourceCache.set(cacheKey, source);
+
+  return source;
+};

package/src/native/MaterialSymbol.tsx

@@ -0,0 +1,17 @@
+import { type ImageSourcePropType, type ViewProps } from 'react-native';
+
+import type { MaterialSymbolOptions } from './types';
+
+export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
+
+export function MaterialSymbol(_: MaterialSymbolProps): React.ReactElement {
+  throw new Error('MaterialSymbol is only supported on Android.');
+}
+
+MaterialSymbol.getImageSource = (
+  _: MaterialSymbolOptions
+): ImageSourcePropType => {
+  throw new Error(
+    'MaterialSymbol.getImageSource is only supported on Android.'
+  );
+};