@react-navigation/native 8.0.0-alpha.0 → 8.0.0-alpha.10

package/src/NavigationContainer.tsx

@@ -6,7 +6,9 @@ import {
   type InitialState,
   type NavigationContainerProps,
   type NavigationContainerRef,
+  type NavigationState,
   type ParamListBase,
+  type PartialState,
   type RootParamList,
   ThemeProvider,
   validatePathConfig,
@@ -16,7 +18,7 @@ import { I18nManager, Platform } from 'react-native';
 
 import { LinkingContext } from './LinkingContext';
 import { LocaleDirContext } from './LocaleDirContext';
-import { DefaultTheme } from './theming/DefaultTheme';
+import { LightTheme } from './theming/LightTheme';
 import type {
   DocumentTitleOptions,
   LinkingOptions,
@@ -31,7 +33,16 @@ import { type Thenable, useThenable } from './useThenable';
 declare global {
   var REACT_NAVIGATION_DEVTOOLS: WeakMap<
     NavigationContainerRef<any>,
-    { readonly linking: LinkingOptions<any> }
+    {
+      readonly linking: LinkingOptions<any>;
+      readonly listeners: Set<
+        (data: {
+          type: 'link';
+          url: string;
+          state: PartialState<NavigationState> | undefined;
+        }) => void
+      >;
+    }
   >;
 }
 
@@ -103,7 +114,7 @@ const RESTORE_STATE_ERROR =
 function NavigationContainerInner(
   {
     direction = I18nManager.getConstants().isRTL ? 'rtl' : 'ltr',
-    theme = DefaultTheme,
+    theme = LightTheme,
     linking,
     persistor,
     fallback = null,
@@ -150,10 +161,16 @@ function NavigationContainerInner(
   // This will be used by the devtools
   React.useEffect(() => {
     if (refContainer.current) {
+      const previous = REACT_NAVIGATION_DEVTOOLS.get(refContainer.current);
+      const listeners = previous?.listeners ?? new Set();
+
       REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
         get linking() {
           return linkingConfig.options;
         },
+        get listeners() {
+          return listeners;
+        },
       });
     }
   });

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/index.tsx

@@ -2,10 +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 { 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/MaterialSymbol.android.tsx

@@ -0,0 +1,83 @@
+import {
+  type ImageSourcePropType,
+  PixelRatio,
+  processColor,
+  type ViewProps,
+} from 'react-native';
+
+import { FONT_WEIGHTS } from './constants';
+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,
+  weight,
+  size = 24,
+  color,
+  style,
+  ...rest
+}: MaterialSymbolProps): React.ReactElement {
+  return (
+    <MaterialSymbolViewNativeComponent
+      name={name}
+      weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
+      size={size}
+      color={color}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
+MaterialSymbol.getImageSource = ({
+  name,
+  variant,
+  weight,
+  size = 24,
+  color = 'black',
+}: MaterialSymbolOptions): ImageSourcePropType => {
+  const processedColor = processColor(color);
+
+  if (processedColor == null) {
+    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,
+    typeof weight === 'string' ? FONT_WEIGHTS[weight] : weight,
+    size,
+    { value: processedColor }
+  );
+
+  const source: ImageSourcePropType = {
+    uri,
+    scale,
+    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.'
+  );
+};