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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -30,7 +30,11 @@
   },
   "files": [
     "src",
+    "assets",
     "lib",
+    "ios",
+    "android",
+    "ReactNavigation.podspec",
     "!**/__tests__"
   ],
   "sideEffects": false,
@@ -42,10 +46,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^8.0.0-alpha.0",
+    "@react-navigation/core": "^8.0.0-alpha.2",
     "escape-string-regexp": "^4.0.0",
     "fast-deep-equal": "^3.1.3",
     "nanoid": "^3.3.11",
+    "sf-symbols-typescript": "^2.2.0",
     "use-latest-callback": "^0.3.2"
   },
   "devDependencies": {
@@ -83,5 +88,20 @@
       ]
     ]
   },
-  "gitHead": "46daae524ec6a59737147ed506222dd09a5b6e39"
+  "codegenConfig": {
+    "name": "ReactNavigationSpec",
+    "type": "all",
+    "jsSrcsDir": "src/native",
+    "android": {
+      "componentProvider": {
+        "ReactNavigationMaterialSymbolView": "ReactNavigationMaterialSymbolView"
+      }
+    },
+    "ios": {
+      "componentProvider": {
+        "ReactNavigationSFSymbolView": "ReactNavigationSFSymbolView"
+      }
+    }
+  },
+  "gitHead": "9664da8fff3bd7ed575bf12ddfcc47b3a42be997"
 }

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,6 +2,11 @@ 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';

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.'
+  );
+};