@react-navigation/native 8.0.0-alpha.3 → 8.0.0-alpha.5

package/lib/typescript/src/native/types.d.ts

@@ -1,10 +1,59 @@
 import type { ColorValue } from 'react-native';
+import type { FONT_WEIGHTS } from './constants';
 import type { MaterialSymbolName } from './MaterialSymbolData';
 export type MaterialSymbolOptions = {
     /**
      * The name of the Material Symbol to display.
      */
     name: MaterialSymbolName;
+    /**
+     * The variant of the symbol.
+     *
+     * Can be customized using `react-navigation` key in `package.json`:
+     *
+     * ```json
+     * "react-navigation": {
+     *   "material-symbol": {
+     *     "fonts": [
+     *       {
+     *         "variant": "rounded",
+     *         "weight": 300,
+     *       },
+     *     ]
+     *   }
+     * }
+     * ```
+     *
+     * Automatically set if a single variant is available.
+     *
+     * @default 'outlined'
+     */
+    variant?: 'outlined' | 'rounded' | 'sharp';
+    /**
+     * The weight of the symbol.
+     *
+     * Can be customized using `react-navigation` key in `package.json`:
+     *
+     * ```json
+     * "react-navigation": {
+     *   "material-symbol": {
+     *     "fonts": [
+     *       {
+     *         "variant": "rounded",
+     *         "weight": 300,
+     *       },
+     *     ]
+     *   }
+     * }
+     * ```
+     *
+     * Only numeric weights are supported in the configuration.
+     *
+     * Automatically set if a single weight is available.
+     *
+     * @default 400
+     */
+    weight?: 'thin' | 'ultralight' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 100 | 200 | 300 | 400 | 500 | 600 | 700;
     /**
      * The size of the symbol.
      *
@@ -18,6 +67,58 @@ export type MaterialSymbolOptions = {
      */
     color?: ColorValue;
 };
+export type SFSymbolScale = 'small' | 'medium' | 'large';
+export type SFSymbolMode = 'monochrome' | 'hierarchical' | 'palette' | 'multicolor';
+export type SFSymbolAnimationEffect = 'bounce' | 'pulse' | 'appear' | 'disappear' | 'variableColor' | 'breathe' | 'wiggle' | 'rotate';
+export type SFSymbolAnimationConfig = {
+    /**
+     * The animation effect to apply.
+     */
+    effect: SFSymbolAnimationEffect;
+    /**
+     * Whether the animation repeats continuously.
+     *
+     * @default false
+     */
+    repeating?: boolean;
+    /**
+     * Number of times to repeat the animation.
+     * Ignored if `repeating` is `true`.
+     */
+    repeatCount?: number;
+    /**
+     * Speed multiplier for the animation.
+     *
+     * @default 1
+     */
+    speed?: number;
+    /**
+     * Whether to animate the whole symbol at once or layer by layer.
+     *
+     * @default false
+     */
+    wholeSymbol?: boolean;
+    /**
+     * Direction of the animation.
+     * Applicable to `bounce` and `wiggle`.
+     */
+    direction?: 'up' | 'down';
+    /**
+     * Whether the variable color effect reverses with each cycle.
+     * Only applicable to `variableColor`.
+     *
+     * @default false
+     */
+    reversing?: boolean;
+    /**
+     * Whether each layer remains changed until the end of the cycle.
+     * Only applicable to `variableColor`.
+     *
+     * @default false
+     */
+    cumulative?: boolean;
+};
+export type SFSymbolAnimation = SFSymbolAnimationEffect | SFSymbolAnimationConfig;
 export type SFSymbolOptions = {
     /**
      * The name of the SF Symbol to display.
@@ -30,8 +131,51 @@ export type SFSymbolOptions = {
     size?: number;
     /**
      * The color of the symbol.
+     * Used as the tint color in monochrome mode, and as the fallback for
+     * `colors.primary` in hierarchical and palette modes.
+     *
      * @default 'black'
      */
     color?: ColorValue;
+    /**
+     * The weight of the symbol.
+     *
+     * @default 'regular'
+     */
+    weight?: keyof typeof FONT_WEIGHTS | (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];
+    /**
+     * The scale of the symbol relative to the font size.
+     *
+     * @default 'medium'
+     */
+    scale?: SFSymbolScale;
+    /**
+     * The rendering mode of the symbol.
+     * - `monochrome`: Single color tint (default).
+     * - `hierarchical`: Derived hierarchy from a single color.
+     * - `palette`: Explicit colors for each layer.
+     * - `multicolor`: Uses the symbol's built-in multicolor scheme.
+     *
+     * @default 'monochrome'
+     */
+    mode?: SFSymbolMode;
+    /**
+     * The colors for non-monochrome rendering modes.
+     * - `hierarchical`: uses `primary` as the base color.
+     * - `palette`: uses `primary`, `secondary`, and `tertiary` for each layer.
+     * - `multicolor`: ignored.
+     *
+     * Falls back to `color` for `primary` if not specified.
+     */
+    colors?: {
+        primary?: ColorValue;
+        secondary?: ColorValue;
+        tertiary?: ColorValue;
+    };
+    /**
+     * The animation effect to apply to the symbol.
+     * Requires iOS 17+. Ignored on earlier versions.
+     */
+    animation?: SFSymbolAnimation;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/native/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/native/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,IAAI,EAAE,kBAAkB,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,IAAI,EAAE,OAAO,uBAAuB,EAAE,QAAQ,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/native/types.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,IAAI,EAAE,kBAAkB,CAAC;IACzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC3C;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,MAAM,CAAC,EACH,MAAM,GACN,YAAY,GACZ,OAAO,GACP,SAAS,GACT,QAAQ,GACR,UAAU,GACV,MAAM,GACN,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,CAAC;IACR;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,MAAM,YAAY,GACpB,YAAY,GACZ,cAAc,GACd,SAAS,GACT,YAAY,CAAC;AAEjB,MAAM,MAAM,uBAAuB,GAC/B,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,WAAW,GACX,eAAe,GACf,SAAS,GACT,QAAQ,GACR,QAAQ,CAAC;AAEb,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,MAAM,EAAE,uBAAuB,CAAC;IAChC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GACzB,uBAAuB,GACvB,uBAAuB,CAAC;AAE5B,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,IAAI,EAAE,OAAO,uBAAuB,EAAE,QAAQ,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EACH,MAAM,OAAO,YAAY,GACzB,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;IACrD;;;;OAIG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,UAAU,CAAC;QACrB,SAAS,CAAC,EAAE,UAAU,CAAC;QACvB,QAAQ,CAAC,EAAE,UAAU,CAAC;KACvB,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "8.0.0-alpha.3",
+  "version": "8.0.0-alpha.5",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -107,5 +107,5 @@
       }
     }
   },
-  "gitHead": "4579b7cfdf8b149ef04cfb585e2cb6b35ded52d7"
+  "gitHead": "e70fcf951732df83d28fe5157408974346a1abbc"
 }

package/src/native/MaterialSymbol.android.tsx

@@ -1,11 +1,12 @@
 import {
   type ImageSourcePropType,
   PixelRatio,
+  PlatformColor,
   processColor,
   type ViewProps,
 } from 'react-native';
 
-import { MATERIAL_SYMBOL_FONT_HASHES } from './MaterialSymbolData';
+import { FONT_WEIGHTS } from './constants';
 import MaterialSymbolViewNativeComponent from './MaterialSymbolViewNativeComponent';
 import NativeMaterialSymbolModule from './NativeMaterialSymbolModule';
 import type { MaterialSymbolOptions } from './types';
@@ -14,21 +15,20 @@ export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
 
 const imageSourceCache = new Map<string, ImageSourcePropType>();
 
+const DEFAULT_COLOR = PlatformColor('?attr/colorForeground');
+
 export function MaterialSymbol({
   name,
+  weight,
   size = 24,
-  color = 'black',
+  color = DEFAULT_COLOR,
   style,
   ...rest
 }: MaterialSymbolProps): React.ReactElement {
-  const variant = 'outlined';
-  const weight = 400;
-
   return (
     <MaterialSymbolViewNativeComponent
       name={name}
-      variant={variant}
-      weight={weight}
+      weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
       size={size}
       color={color}
       style={[
@@ -45,13 +45,11 @@ export function MaterialSymbol({
 
 MaterialSymbol.getImageSource = ({
   name,
+  variant,
+  weight,
   size = 24,
   color = 'black',
 }: MaterialSymbolOptions): ImageSourcePropType => {
-  const variant = 'outlined';
-  const weight = 400;
-
-  const hash = MATERIAL_SYMBOL_FONT_HASHES[`${variant}-${weight}`];
   const processedColor = processColor(color);
 
   if (processedColor == null) {
@@ -60,7 +58,7 @@ MaterialSymbol.getImageSource = ({
 
   const scale = PixelRatio.get();
 
-  const cacheKey = `${name}:${variant}:${weight}:${size}:${scale}:${JSON.stringify(processedColor)}:${hash}`;
+  const cacheKey = `${name}:${variant}:${weight}:${size}:${scale}:${JSON.stringify(processedColor)}`;
   const cached = imageSourceCache.get(cacheKey);
 
   if (cached !== undefined) {
@@ -70,10 +68,9 @@ MaterialSymbol.getImageSource = ({
   const uri = NativeMaterialSymbolModule.getImageSource(
     name,
     variant,
+    typeof weight === 'string' ? FONT_WEIGHTS[weight] : weight,
     size,
-    weight,
-    { value: processedColor },
-    hash
+    { value: processedColor }
   );
 
   const source: ImageSourcePropType = {

package/src/native/MaterialSymbolData.tsx

@@ -1,10 +1,6 @@
 // Auto-generated by scripts/update-material-symbols.ts
 // Do not edit manually
 
-export const MATERIAL_SYMBOL_FONT_HASHES = {
-  'outlined-400': 'ec67dff9',
-} as const;
-
 export type MaterialSymbolName =
   | '10k'
   | '10mp'

package/src/native/MaterialSymbolViewNativeComponent.ts

@@ -9,10 +9,10 @@ import {
 
 export interface NativeProps extends ViewProps {
   name: string;
-  variant: string;
+  variant?: string;
   weight?: CodegenTypes.WithDefault<
-    100 | 200 | 300 | 400 | 500 | 600 | 700,
-    400
+    0 | 100 | 200 | 300 | 400 | 500 | 600 | 700,
+    0
   >;
   size: CodegenTypes.Float;
   color: ColorValue;

package/src/native/NativeMaterialSymbolModule.ts

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

package/src/native/SFSymbol.ios.tsx

@@ -1,5 +1,6 @@
 import type { ViewProps } from 'react-native';
 
+import { FONT_WEIGHTS } from './constants';
 import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
 import type { SFSymbolOptions } from './types';
 
@@ -8,15 +9,37 @@ export type SFSymbolProps = SFSymbolOptions & ViewProps;
 export function SFSymbol({
   name,
   size = 24,
-  color = 'black',
+  color,
+  weight,
+  scale = 'medium',
+  mode = 'monochrome',
+  colors,
+  animation,
   style,
   ...rest
 }: SFSymbolProps): React.ReactElement {
+  const animConfig =
+    typeof animation === 'string' ? { effect: animation } : animation;
+
   return (
     <SFSymbolViewNativeComponent
       name={name}
       size={size}
       color={color}
+      weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
+      scale={scale}
+      mode={mode}
+      colorPrimary={colors?.primary ?? color}
+      colorSecondary={colors?.secondary}
+      colorTertiary={colors?.tertiary}
+      animation={animConfig?.effect ?? ''}
+      animationRepeating={animConfig?.repeating ?? false}
+      animationRepeatCount={animConfig?.repeatCount ?? 0}
+      animationSpeed={animConfig?.speed ?? 1}
+      animationWholeSymbol={animConfig?.wholeSymbol ?? false}
+      animationDirection={animConfig?.direction ?? ''}
+      animationReversing={animConfig?.reversing ?? false}
+      animationCumulative={animConfig?.cumulative ?? false}
       style={[
         {
           width: size,

package/src/native/SFSymbolViewNativeComponent.ts

@@ -10,7 +10,21 @@ import {
 export interface NativeProps extends ViewProps {
   name: string;
   size: CodegenTypes.Float;
-  color: ColorValue;
+  color?: ColorValue;
+  weight: CodegenTypes.Int32;
+  scale: string;
+  mode: string;
+  colorPrimary?: ColorValue;
+  colorSecondary?: ColorValue;
+  colorTertiary?: ColorValue;
+  animation: string;
+  animationRepeating: boolean;
+  animationRepeatCount: CodegenTypes.Int32;
+  animationSpeed: CodegenTypes.Float;
+  animationWholeSymbol: boolean;
+  animationDirection: string;
+  animationReversing: boolean;
+  animationCumulative: boolean;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/native/constants.tsx

@@ -0,0 +1,11 @@
+export const FONT_WEIGHTS = {
+  thin: 100,
+  ultralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900,
+} as const;

package/src/native/types.tsx

@@ -1,5 +1,6 @@
 import type { ColorValue } from 'react-native';
 
+import type { FONT_WEIGHTS } from './constants';
 import type { MaterialSymbolName } from './MaterialSymbolData';
 
 export type MaterialSymbolOptions = {
@@ -7,6 +8,68 @@ export type MaterialSymbolOptions = {
    * The name of the Material Symbol to display.
    */
   name: MaterialSymbolName;
+  /**
+   * The variant of the symbol.
+   *
+   * Can be customized using `react-navigation` key in `package.json`:
+   *
+   * ```json
+   * "react-navigation": {
+   *   "material-symbol": {
+   *     "fonts": [
+   *       {
+   *         "variant": "rounded",
+   *         "weight": 300,
+   *       },
+   *     ]
+   *   }
+   * }
+   * ```
+   *
+   * Automatically set if a single variant is available.
+   *
+   * @default 'outlined'
+   */
+  variant?: 'outlined' | 'rounded' | 'sharp';
+  /**
+   * The weight of the symbol.
+   *
+   * Can be customized using `react-navigation` key in `package.json`:
+   *
+   * ```json
+   * "react-navigation": {
+   *   "material-symbol": {
+   *     "fonts": [
+   *       {
+   *         "variant": "rounded",
+   *         "weight": 300,
+   *       },
+   *     ]
+   *   }
+   * }
+   * ```
+   *
+   * Only numeric weights are supported in the configuration.
+   *
+   * Automatically set if a single weight is available.
+   *
+   * @default 400
+   */
+  weight?:
+    | 'thin'
+    | 'ultralight'
+    | 'light'
+    | 'regular'
+    | 'medium'
+    | 'semibold'
+    | 'bold'
+    | 100
+    | 200
+    | 300
+    | 400
+    | 500
+    | 600
+    | 700;
   /**
    * The size of the symbol.
    *
@@ -21,6 +84,77 @@ export type MaterialSymbolOptions = {
   color?: ColorValue;
 };
 
+export type SFSymbolScale = 'small' | 'medium' | 'large';
+
+export type SFSymbolMode =
+  | 'monochrome'
+  | 'hierarchical'
+  | 'palette'
+  | 'multicolor';
+
+export type SFSymbolAnimationEffect =
+  | 'bounce'
+  | 'pulse'
+  | 'appear'
+  | 'disappear'
+  | 'variableColor'
+  | 'breathe'
+  | 'wiggle'
+  | 'rotate';
+
+export type SFSymbolAnimationConfig = {
+  /**
+   * The animation effect to apply.
+   */
+  effect: SFSymbolAnimationEffect;
+  /**
+   * Whether the animation repeats continuously.
+   *
+   * @default false
+   */
+  repeating?: boolean;
+  /**
+   * Number of times to repeat the animation.
+   * Ignored if `repeating` is `true`.
+   */
+  repeatCount?: number;
+  /**
+   * Speed multiplier for the animation.
+   *
+   * @default 1
+   */
+  speed?: number;
+  /**
+   * Whether to animate the whole symbol at once or layer by layer.
+   *
+   * @default false
+   */
+  wholeSymbol?: boolean;
+  /**
+   * Direction of the animation.
+   * Applicable to `bounce` and `wiggle`.
+   */
+  direction?: 'up' | 'down';
+  /**
+   * Whether the variable color effect reverses with each cycle.
+   * Only applicable to `variableColor`.
+   *
+   * @default false
+   */
+  reversing?: boolean;
+  /**
+   * Whether each layer remains changed until the end of the cycle.
+   * Only applicable to `variableColor`.
+   *
+   * @default false
+   */
+  cumulative?: boolean;
+};
+
+export type SFSymbolAnimation =
+  | SFSymbolAnimationEffect
+  | SFSymbolAnimationConfig;
+
 export type SFSymbolOptions = {
   /**
    * The name of the SF Symbol to display.
@@ -33,7 +167,52 @@ export type SFSymbolOptions = {
   size?: number;
   /**
    * The color of the symbol.
+   * Used as the tint color in monochrome mode, and as the fallback for
+   * `colors.primary` in hierarchical and palette modes.
+   *
    * @default 'black'
    */
   color?: ColorValue;
+  /**
+   * The weight of the symbol.
+   *
+   * @default 'regular'
+   */
+  weight?:
+    | keyof typeof FONT_WEIGHTS
+    | (typeof FONT_WEIGHTS)[keyof typeof FONT_WEIGHTS];
+  /**
+   * The scale of the symbol relative to the font size.
+   *
+   * @default 'medium'
+   */
+  scale?: SFSymbolScale;
+  /**
+   * The rendering mode of the symbol.
+   * - `monochrome`: Single color tint (default).
+   * - `hierarchical`: Derived hierarchy from a single color.
+   * - `palette`: Explicit colors for each layer.
+   * - `multicolor`: Uses the symbol's built-in multicolor scheme.
+   *
+   * @default 'monochrome'
+   */
+  mode?: SFSymbolMode;
+  /**
+   * The colors for non-monochrome rendering modes.
+   * - `hierarchical`: uses `primary` as the base color.
+   * - `palette`: uses `primary`, `secondary`, and `tertiary` for each layer.
+   * - `multicolor`: ignored.
+   *
+   * Falls back to `color` for `primary` if not specified.
+   */
+  colors?: {
+    primary?: ColorValue;
+    secondary?: ColorValue;
+    tertiary?: ColorValue;
+  };
+  /**
+   * The animation effect to apply to the symbol.
+   * Requires iOS 17+. Ignored on earlier versions.
+   */
+  animation?: SFSymbolAnimation;
 };