@react-navigation/native 8.0.0-alpha.50 → 8.0.0-alpha.51

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -14,6 +14,7 @@ export interface NativeProps extends ViewProps {
     0 | 100 | 200 | 300 | 400 | 500 | 600 | 700,
     0
   >;
+  fill?: CodegenTypes.WithDefault<CodegenTypes.Int32, -1>;
   size: CodegenTypes.Float;
   color?: ColorValue | undefined;
 }

package/src/native/NativeMaterialSymbolModule.ts

@@ -3,14 +3,17 @@
 import { type TurboModule, TurboModuleRegistry } from 'react-native';
 
 export interface Spec extends TurboModule {
+  isAvailable(): boolean;
   getImageSource(
     name: string,
     variant: string | undefined,
     weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 | undefined,
+    fill: boolean | undefined,
     size: number,
     // Codegen requires using `Object` instead of `object
     // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
-    color: Object
+    color: Object,
+    direction: 'ltr' | 'rtl'
   ): string;
 }
 

package/src/native/types.tsx

@@ -1,5 +1,6 @@
 import type { ColorValue } from 'react-native';
 
+import type { LocaleDirection, SFSymbolNames } from '../types';
 import type { FONT_WEIGHTS } from './constants';
 import type { MaterialSymbolName } from './MaterialSymbolData';
 
@@ -15,12 +16,13 @@ export type MaterialSymbolOptions = {
    *
    * ```json
    * "react-navigation": {
-   *   "material-symbol": {
+   *   "material-symbols": {
    *     "fonts": [
    *       {
    *         "variant": "rounded",
-   *         "weight": 300,
-   *       },
+   *         "weights": [300],
+   *         "fills": [0, 1]
+   *       }
    *     ]
    *   }
    * }
@@ -38,12 +40,13 @@ export type MaterialSymbolOptions = {
    *
    * ```json
    * "react-navigation": {
-   *   "material-symbol": {
+   *   "material-symbols": {
    *     "fonts": [
    *       {
    *         "variant": "rounded",
-   *         "weight": 300,
-   *       },
+   *         "weights": [300],
+   *         "fills": [0, 1]
+   *       }
    *     ]
    *   }
    * }
@@ -71,6 +74,34 @@ export type MaterialSymbolOptions = {
     | 600
     | 700
     | undefined;
+  /**
+   * Whether to use the filled version of the symbol.
+   *
+   * Can be customized using `react-navigation` key in `package.json`:
+   *
+   * ```json
+   * "react-navigation": {
+   *   "material-symbols": {
+   *     "fonts": [
+   *       {
+   *         "variant": "rounded",
+   *         "weights": [300],
+   *         "fills": [0, 1]
+   *       }
+   *     ]
+   *   }
+   * }
+   * ```
+   *
+   * Here:
+   * - `0`: Unfilled version
+   * - `1`: Filled version
+   *
+   * Automatically set if a single fill is available.
+   *
+   * @default false
+   */
+  fill?: boolean | undefined;
   /**
    * The size of the symbol.
    *
@@ -85,6 +116,17 @@ export type MaterialSymbolOptions = {
   color?: ColorValue | undefined;
 };
 
+export type MaterialSymbolImageSourceOptions = MaterialSymbolOptions & {
+  /**
+   * The layout direction to render the symbol for.
+   *
+   * Symbols that support auto-mirroring are flipped horizontally in RTL.
+   *
+   * @default I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
+   */
+  direction?: LocaleDirection | undefined;
+};
+
 type SFSymbolScale = 'small' | 'medium' | 'large';
 
 type SFSymbolRenderingMode =
@@ -364,7 +406,9 @@ export type SFSymbolOptions = {
   /**
    * The name of the SF Symbol to display.
    */
-  name: import('sf-symbols-typescript').SFSymbol;
+  name:
+    | import('sf-symbols-typescript').SFSymbol
+    | Extract<keyof SFSymbolNames, string>;
   /**
    * The size of the symbol.
    *

package/src/types.tsx

@@ -58,6 +58,21 @@ declare module '@react-navigation/core' {
   interface Theme extends NativeTheme {}
 }
 
+/**
+ * Names of custom SF Symbols available in the app, such as symbols from the asset catalog.
+ * Custom names can be added using declaration merging:
+ *
+ * ```ts
+ * declare module '@react-navigation/native' {
+ *   interface SFSymbolNames {
+ *     'my.custom.symbol': true;
+ *   }
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface SFSymbolNames {}
+
 export type LocaleDirection = 'ltr' | 'rtl';
 
 export type LinkingPrefix = '*' | (string & {});

package/src/useLinkProps.tsx

@@ -119,7 +119,7 @@ const NAVIGATE_ACTION_TYPES = [
  * Nested params are tracked as consumed after handling
  * So navigating with same params again won't work
  * This can happen if the action or params are memoized
- * Or component hasn't re-renderd to re-create inline objects
+ * Or component hasn't re-rendered to re-create inline objects
  * So we clone the action and params when necessary before dispatch
  */
 function clone<T>(value: T): T;