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

package/lib/typescript/src/theming/MaterialTheme.d.ts

@@ -0,0 +1,114 @@
+import type { Theme } from '@react-navigation/core';
+export declare const MaterialLightTheme: {
+    readonly dark: false;
+    readonly colors: Theme["colors"];
+    readonly fonts: {
+        readonly regular: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "400";
+        };
+        readonly medium: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "500";
+        };
+        readonly bold: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "600";
+        };
+        readonly heavy: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "700";
+        };
+    } | {
+        readonly regular: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "400";
+        };
+        readonly medium: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "500";
+        };
+        readonly bold: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "600";
+        };
+        readonly heavy: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "700";
+        };
+    } | {
+        readonly regular: {
+            readonly fontFamily: "sans-serif";
+            readonly fontWeight: "normal";
+        };
+        readonly medium: {
+            readonly fontFamily: "sans-serif-medium";
+            readonly fontWeight: "normal";
+        };
+        readonly bold: {
+            readonly fontFamily: "sans-serif";
+            readonly fontWeight: "600";
+        };
+        readonly heavy: {
+            readonly fontFamily: "sans-serif";
+            readonly fontWeight: "700";
+        };
+    };
+};
+export declare const MaterialDarkTheme: {
+    readonly dark: true;
+    readonly colors: Theme["colors"];
+    readonly fonts: {
+        readonly regular: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "400";
+        };
+        readonly medium: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "500";
+        };
+        readonly bold: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "600";
+        };
+        readonly heavy: {
+            readonly fontFamily: "system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: "700";
+        };
+    } | {
+        readonly regular: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "400";
+        };
+        readonly medium: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "500";
+        };
+        readonly bold: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "600";
+        };
+        readonly heavy: {
+            readonly fontFamily: "System";
+            readonly fontWeight: "700";
+        };
+    } | {
+        readonly regular: {
+            readonly fontFamily: "sans-serif";
+            readonly fontWeight: "normal";
+        };
+        readonly medium: {
+            readonly fontFamily: "sans-serif-medium";
+            readonly fontWeight: "normal";
+        };
+        readonly bold: {
+            readonly fontFamily: "sans-serif";
+            readonly fontWeight: "600";
+        };
+        readonly heavy: {
+            readonly fontFamily: "sans-serif";
+            readonly fontWeight: "700";
+        };
+    };
+};
+//# sourceMappingURL=MaterialTheme.d.ts.map

package/lib/typescript/src/theming/MaterialTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaterialTheme.d.ts","sourceRoot":"","sources":["../../../../src/theming/MaterialTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAIpD,eAAO,MAAM,kBAAkB;;qBAEf,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIL,CAAC;AAE3B,eAAO,MAAM,iBAAiB;;qBAEd,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIL,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useLinking.native.d.ts","sourceRoot":"","sources":["../../../src/useLinking.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,sBAAsB,EAC3B,KAAK,aAAa,EAEnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,KAAK,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAI7C,wBAAgB,UAAU,CACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,EAClE,EACE,OAAc,EACd,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,aAQI,EACJ,SAQC,EACD,gBAA0C,EAC1C,kBAA8C,GAC/C,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkJX"}
+{"version":3,"file":"useLinking.native.d.ts","sourceRoot":"","sources":["../../../src/useLinking.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,sBAAsB,EAC3B,KAAK,aAAa,EAEnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,KAAK,OAAO,GAAG,cAAc,CAAC,aAAa,CAAC,CAAC;AAI7C,wBAAgB,UAAU,CACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,sBAAsB,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,EAClE,EACE,OAAc,EACd,QAAgB,EAChB,MAAM,EACN,MAAM,EACN,aAQI,EACJ,SAQC,EACD,gBAA0C,EAC1C,kBAA8C,GAC/C,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyKX"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "8.0.0-alpha.1",
+  "version": "8.0.0-alpha.10",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -30,12 +30,23 @@
   },
   "files": [
     "src",
-    "assets",
     "lib",
-    "ios",
+    "assets",
     "android",
-    "ReactNavigation.podspec",
-    "!**/__tests__"
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -46,7 +57,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^8.0.0-alpha.1",
+    "@react-navigation/core": "^8.0.0-alpha.3",
     "escape-string-regexp": "^4.0.0",
     "fast-deep-equal": "^3.1.3",
     "nanoid": "^3.3.11",
@@ -93,15 +104,19 @@
     "type": "all",
     "jsSrcsDir": "src/native",
     "android": {
-      "componentProvider": {
-        "ReactNavigationMaterialSymbolView": "ReactNavigationMaterialSymbolView"
+      "components": {
+        "ReactNavigationMaterialSymbolView": {
+          "className": "ReactNavigationMaterialSymbolView"
+        }
       }
     },
     "ios": {
-      "componentProvider": {
-        "ReactNavigationSFSymbolView": "ReactNavigationSFSymbolView"
+      "components": {
+        "ReactNavigationSFSymbolView": {
+          "className": "ReactNavigationSFSymbolView"
+        }
       }
     }
   },
-  "gitHead": "7c3631904a6c70265ec6a2639fa0c0befc79d05c"
+  "gitHead": "4bf35245d085655607d8c658407a4a0c8e641f8d"
 }

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

@@ -10,7 +10,8 @@ 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

@@ -5,7 +5,7 @@ import {
   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';
@@ -16,16 +16,16 @@ const imageSourceCache = new Map<string, ImageSourcePropType>();
 
 export function MaterialSymbol({
   name,
-  variant = 'outlined',
+  weight,
   size = 24,
-  color = 'black',
+  color,
   style,
   ...rest
 }: MaterialSymbolProps): React.ReactElement {
   return (
     <MaterialSymbolViewNativeComponent
       name={name}
-      variant={variant}
+      weight={typeof weight === 'string' ? FONT_WEIGHTS[weight] : (weight ?? 0)}
       size={size}
       color={color}
       style={[
@@ -42,18 +42,20 @@ export function MaterialSymbol({
 
 MaterialSymbol.getImageSource = ({
   name,
-  variant = 'outlined',
+  variant,
+  weight,
   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 scale = PixelRatio.get();
+
+  const cacheKey = `${name}:${variant}:${weight}:${size}:${scale}:${JSON.stringify(processedColor)}`;
   const cached = imageSourceCache.get(cacheKey);
 
   if (cached !== undefined) {
@@ -63,14 +65,14 @@ MaterialSymbol.getImageSource = ({
   const uri = NativeMaterialSymbolModule.getImageSource(
     name,
     variant,
+    typeof weight === 'string' ? FONT_WEIGHTS[weight] : weight,
     size,
-    { value: processedColor },
-    hash
+    { value: processedColor }
   );
 
   const source: ImageSourcePropType = {
     uri,
-    scale: PixelRatio.get(),
+    scale,
     width: size,
     height: size,
   };

package/src/native/MaterialSymbolData.tsx

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

package/src/native/MaterialSymbolViewNativeComponent.ts

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

package/src/native/NativeMaterialSymbolModule.ts

@@ -5,12 +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,
     // 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,9 +1,8 @@
 import type { ColorValue } from 'react-native';
 
+import type { FONT_WEIGHTS } from './constants';
 import type { MaterialSymbolName } from './MaterialSymbolData';
 
-type MaterialSymbolVariant = 'outlined' | 'rounded' | 'sharp';
-
 export type MaterialSymbolOptions = {
   /**
    * The name of the Material Symbol to display.
@@ -12,9 +11,65 @@ export type MaterialSymbolOptions = {
   /**
    * 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?: MaterialSymbolVariant;
+  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.
    *
@@ -29,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.
@@ -41,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;
 };

package/src/theming/{DefaultTheme.tsx → LightTheme.tsx}

@@ -2,7 +2,7 @@ import type { Theme } from '@react-navigation/core';
 
 import { fonts } from './fonts';
 
-export const DefaultTheme = {
+export const LightTheme = {
   dark: false,
   colors: {
     primary: 'rgb(0, 122, 255)',