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

package/ios/ReactNavigationSFSymbolView.mm

@@ -45,6 +45,27 @@ static ReactNavigationSFSymbolViewImplProps *convertProps(const Props::Shared &p
     swiftProps.name = RCTNSStringFromString(viewProps.name);
     swiftProps.size = viewProps.size;
     swiftProps.color = RCTUIColorFromSharedColor(viewProps.color);
+    swiftProps.weight = viewProps.weight;
+    swiftProps.scale = RCTNSStringFromString(viewProps.scale);
+    swiftProps.mode = RCTNSStringFromString(viewProps.mode);
+    swiftProps.animation = RCTNSStringFromString(viewProps.animation);
+    swiftProps.animationRepeating = viewProps.animationRepeating;
+    swiftProps.animationRepeatCount = viewProps.animationRepeatCount;
+    swiftProps.animationSpeed = viewProps.animationSpeed;
+    swiftProps.animationWholeSymbol = viewProps.animationWholeSymbol;
+    swiftProps.animationDirection = RCTNSStringFromString(viewProps.animationDirection);
+    swiftProps.animationReversing = viewProps.animationReversing;
+    swiftProps.animationCumulative = viewProps.animationCumulative;
+
+    if (viewProps.colorPrimary) {
+        swiftProps.colorPrimary = RCTUIColorFromSharedColor(viewProps.colorPrimary);
+    }
+    if (viewProps.colorSecondary) {
+        swiftProps.colorSecondary = RCTUIColorFromSharedColor(viewProps.colorSecondary);
+    }
+    if (viewProps.colorTertiary) {
+        swiftProps.colorTertiary = RCTUIColorFromSharedColor(viewProps.colorTertiary);
+    }
 
     return swiftProps;
 }

package/ios/ReactNavigationSFSymbolView.swift

@@ -4,10 +4,25 @@ import UIKit
   public var name: String?
   public var size: CGFloat = 24
   public var color: UIColor = .black
+  public var weight: Int = 0
+  public var scale: String = "medium"
+  public var mode: String = "monochrome"
+  public var colorPrimary: UIColor?
+  public var colorSecondary: UIColor?
+  public var colorTertiary: UIColor?
+  public var animation: String = ""
+  public var animationRepeating: Bool = false
+  public var animationRepeatCount: Int = 0
+  public var animationSpeed: CGFloat = 1
+  public var animationWholeSymbol: Bool = false
+  public var animationDirection: String = ""
+  public var animationReversing: Bool = false
+  public var animationCumulative: Bool = false
 }
 
 @objc public class ReactNavigationSFSymbolViewImpl: UIView {
   private var imageView: UIImageView
+  private var currentAnimation: String = ""
 
   override init(frame: CGRect) {
     imageView = UIImageView()
@@ -33,18 +48,253 @@ import UIKit
   }
 
   @objc public func updateProps(_ props: ReactNavigationSFSymbolViewImplProps, oldProps: ReactNavigationSFSymbolViewImplProps) {
-    if props.name != oldProps.name || props.size != oldProps.size {
+    let needsImageUpdate =
+      props.name != oldProps.name ||
+      props.size != oldProps.size ||
+      props.weight != oldProps.weight ||
+      props.scale != oldProps.scale ||
+      props.mode != oldProps.mode ||
+      props.colorPrimary != oldProps.colorPrimary ||
+      props.colorSecondary != oldProps.colorSecondary ||
+      props.colorTertiary != oldProps.colorTertiary
+
+    if needsImageUpdate {
       if let name = props.name {
-        let configuration = UIImage.SymbolConfiguration(pointSize: props.size, weight: .regular)
-        let image = UIImage(systemName: name, withConfiguration: configuration)
+        let symbolWeight = Self.symbolWeight(from: props.weight)
+        let symbolScale = Self.symbolScale(from: props.scale)
+
+        var configuration = UIImage.SymbolConfiguration(pointSize: props.size, weight: symbolWeight, scale: symbolScale)
+
+        let primaryColor = props.colorPrimary ?? props.color
+
+        switch props.mode {
+        case "hierarchical":
+          configuration = configuration.applying(
+            UIImage.SymbolConfiguration(hierarchicalColor: primaryColor)
+          )
+
+          let image = UIImage(systemName: name, withConfiguration: configuration)
+
+          imageView.image = image
+          imageView.tintColor = nil
+
+        case "palette":
+          var paletteColors: [UIColor] = []
+
+          paletteColors.append(primaryColor)
+
+          if let secondary = props.colorSecondary {
+            paletteColors.append(secondary)
+          }
+
+          if let tertiary = props.colorTertiary {
+            paletteColors.append(tertiary)
+          }
+
+          configuration = configuration.applying(
+            UIImage.SymbolConfiguration(paletteColors: paletteColors)
+          )
 
-        imageView.image = image?.withRenderingMode(.alwaysTemplate)
-        imageView.tintColor = props.color
+          let image = UIImage(systemName: name, withConfiguration: configuration)
+
+          imageView.image = image
+          imageView.tintColor = nil
+
+        case "multicolor":
+          configuration = configuration.applying(
+            UIImage.SymbolConfiguration.preferringMulticolor()
+          )
+
+          let image = UIImage(systemName: name, withConfiguration: configuration)
+
+          imageView.image = image
+          imageView.tintColor = nil
+
+        default:
+          // monochrome
+          let image = UIImage(systemName: name, withConfiguration: configuration)
+
+          imageView.image = image?.withRenderingMode(.alwaysTemplate)
+          imageView.tintColor = primaryColor
+        }
       }
     }
 
-    if props.color != oldProps.color {
-      imageView.tintColor = props.color
+    if !needsImageUpdate && props.color != oldProps.color && props.mode == "monochrome" {
+      imageView.tintColor = props.colorPrimary ?? props.color
+    }
+
+    let animationChanged =
+      props.animation != oldProps.animation ||
+      props.animationRepeating != oldProps.animationRepeating ||
+      props.animationRepeatCount != oldProps.animationRepeatCount ||
+      props.animationSpeed != oldProps.animationSpeed ||
+      props.animationWholeSymbol != oldProps.animationWholeSymbol ||
+      props.animationDirection != oldProps.animationDirection ||
+      props.animationReversing != oldProps.animationReversing ||
+      props.animationCumulative != oldProps.animationCumulative
+
+    if animationChanged {
+      updateAnimation(props)
+    }
+  }
+
+  private func updateAnimation(_ props: ReactNavigationSFSymbolViewImplProps) {
+    guard #available(iOS 17.0, *) else { return }
+
+    imageView.removeAllSymbolEffects()
+
+    guard !props.animation.isEmpty else { return }
+
+    var options: SymbolEffectOptions = .default
+
+    if props.animationRepeating {
+      options = options.repeating
+    } else if props.animationRepeatCount > 0 {
+      options = options.repeat(props.animationRepeatCount)
+    }
+
+    if props.animationSpeed != 1 {
+      options = options.speed(props.animationSpeed)
+    }
+
+    switch props.animation {
+    case "bounce":
+      var effect = BounceSymbolEffect.bounce
+
+      if props.animationWholeSymbol {
+        effect = effect.wholeSymbol
+      }
+
+      if props.animationDirection == "up" {
+        effect = effect.up
+      }
+
+      if props.animationDirection == "down" {
+        effect = effect.down
+      }
+
+      imageView.addSymbolEffect(effect, options: options)
+
+    case "pulse":
+      var effect = PulseSymbolEffect.pulse
+
+      if props.animationWholeSymbol {
+        effect = effect.wholeSymbol
+      }
+
+      imageView.addSymbolEffect(effect, options: options)
+
+    case "appear":
+      var effect = AppearSymbolEffect.appear
+
+      if props.animationWholeSymbol {
+        effect = effect.wholeSymbol
+      }
+
+      if props.animationDirection == "up" {
+        effect = effect.up
+      }
+
+      if props.animationDirection == "down" {
+        effect = effect.down
+      }
+
+      imageView.addSymbolEffect(effect, options: options)
+
+    case "disappear":
+      var effect = DisappearSymbolEffect.disappear
+
+      if props.animationWholeSymbol {
+        effect = effect.wholeSymbol
+      }
+
+      if props.animationDirection == "up" {
+        effect = effect.up
+      }
+
+      if props.animationDirection == "down" {
+        effect = effect.down
+      }
+
+      imageView.addSymbolEffect(effect, options: options)
+
+    case "variableColor":
+      var effect = VariableColorSymbolEffect.variableColor
+
+      if props.animationReversing {
+        effect = props.animationCumulative ? effect.reversing.cumulative : effect.reversing.iterative
+      } else {
+        effect = props.animationCumulative ? effect.nonReversing.cumulative : effect.nonReversing.iterative
+      }
+
+      imageView.addSymbolEffect(effect, options: options)
+
+    case "breathe":
+      if #available(iOS 18.0, *) {
+        var effect = BreatheSymbolEffect.breathe
+
+        if props.animationWholeSymbol {
+          effect = effect.wholeSymbol
+        }
+
+        imageView.addSymbolEffect(effect, options: options)
+      }
+
+    case "wiggle":
+      if #available(iOS 18.0, *) {
+        var effect = WiggleSymbolEffect.wiggle
+
+        if props.animationWholeSymbol {
+          effect = effect.wholeSymbol
+        }
+
+        if props.animationDirection == "up" {
+          effect = effect.up
+        }
+
+        if props.animationDirection == "down" {
+          effect = effect.down
+        }
+
+        imageView.addSymbolEffect(effect, options: options)
+      }
+
+    case "rotate":
+      if #available(iOS 18.0, *) {
+        var effect = RotateSymbolEffect.rotate
+
+        if props.animationWholeSymbol {
+          effect = effect.wholeSymbol
+        }
+
+        imageView.addSymbolEffect(effect, options: options)
+      }
+
+    default: break
+    }
+  }
+
+  private static func symbolWeight(from value: Int) -> UIImage.SymbolWeight {
+    switch value {
+    case 100: return .thin
+    case 200: return .ultraLight
+    case 300: return .light
+    case 400: return .regular
+    case 500: return .medium
+    case 600: return .semibold
+    case 700: return .bold
+    case 800: return .heavy
+    case 900: return .black
+    default: return .regular
+    }
+  }
+
+  private static func symbolScale(from value: String) -> UIImage.SymbolScale {
+    switch value {
+    case "small": return .small
+    case "large": return .large
+    default: return .medium
     }
   }
 }

package/lib/module/native/MaterialSymbol.android.js

@@ -1,24 +1,23 @@
 "use strict";
 
-import { PixelRatio, processColor } from 'react-native';
-import { MATERIAL_SYMBOL_FONT_HASHES } from "./MaterialSymbolData.js";
+import { PixelRatio, PlatformColor, processColor } from 'react-native';
+import { FONT_WEIGHTS } from "./constants.js";
 import MaterialSymbolViewNativeComponent from './MaterialSymbolViewNativeComponent';
 import NativeMaterialSymbolModule from "./NativeMaterialSymbolModule.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const imageSourceCache = new Map();
+const DEFAULT_COLOR = PlatformColor('?attr/colorForeground');
 export function MaterialSymbol({
   name,
+  weight,
   size = 24,
-  color = 'black',
+  color = DEFAULT_COLOR,
   style,
   ...rest
 }) {
-  const variant = 'outlined';
-  const weight = 400;
   return /*#__PURE__*/_jsx(MaterialSymbolViewNativeComponent, {
     name: name,
-    variant: variant,
-    weight: weight,
+    weight: typeof weight === 'string' ? FONT_WEIGHTS[weight] : weight ?? 0,
     size: size,
     color: color,
     style: [{
@@ -30,25 +29,24 @@ export function MaterialSymbol({
 }
 MaterialSymbol.getImageSource = ({
   name,
+  variant,
+  weight,
   size = 24,
   color = 'black'
 }) => {
-  const variant = 'outlined';
-  const weight = 400;
-  const hash = MATERIAL_SYMBOL_FONT_HASHES[`${variant}-${weight}`];
   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)}:${hash}`;
+  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, size, weight, {
+  const uri = NativeMaterialSymbolModule.getImageSource(name, variant, typeof weight === 'string' ? FONT_WEIGHTS[weight] : weight, size, {
     value: processedColor
-  }, hash);
+  });
   const source = {
     uri,
     scale,

package/lib/module/native/MaterialSymbol.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["PixelRatio","processColor","MATERIAL_SYMBOL_FONT_HASHES","MaterialSymbolViewNativeComponent","NativeMaterialSymbolModule","jsx","_jsx","imageSourceCache","Map","MaterialSymbol","name","size","color","style","rest","variant","weight","width","height","getImageSource","hash","processedColor","Error","String","scale","get","cacheKey","JSON","stringify","cached","undefined","uri","value","source","set"],"sourceRoot":"../../../src","sources":["native/MaterialSymbol.android.tsx"],"mappings":";;AAAA,SAEEA,UAAU,EACVC,YAAY,QAEP,cAAc;AAErB,SAASC,2BAA2B,QAAQ,yBAAsB;AAClE,OAAOC,iCAAiC,MAAM,qCAAqC;AACnF,OAAOC,0BAA0B,MAAM,iCAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKtE,MAAMC,gBAAgB,GAAG,IAAIC,GAAG,CAA8B,CAAC;AAE/D,OAAO,SAASC,cAAcA,CAAC;EAC7BC,IAAI;EACJC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG,OAAO;EACfC,KAAK;EACL,GAAGC;AACgB,CAAC,EAAsB;EAC1C,MAAMC,OAAO,GAAG,UAAU;EAC1B,MAAMC,MAAM,GAAG,GAAG;EAElB,oBACEV,IAAA,CAACH,iCAAiC;IAChCO,IAAI,EAAEA,IAAK;IACXK,OAAO,EAAEA,OAAQ;IACjBC,MAAM,EAAEA,MAAO;IACfL,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAE,CACL;MACEI,KAAK,EAAEN,IAAI;MACXO,MAAM,EAAEP;IACV,CAAC,EACDE,KAAK,CACL;IAAA,GACEC;EAAI,CACT,CAAC;AAEN;AAEAL,cAAc,CAACU,cAAc,GAAG,CAAC;EAC/BT,IAAI;EACJC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG;AACa,CAAC,KAA0B;EAChD,MAAMG,OAAO,GAAG,UAAU;EAC1B,MAAMC,MAAM,GAAG,GAAG;EAElB,MAAMI,IAAI,GAAGlB,2BAA2B,CAAC,GAAGa,OAAO,IAAIC,MAAM,EAAE,CAAC;EAChE,MAAMK,cAAc,GAAGpB,YAAY,CAACW,KAAK,CAAC;EAE1C,IAAIS,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM,IAAIC,KAAK,CAAC,wBAAwBC,MAAM,CAACX,KAAK,CAAC,EAAE,CAAC;EAC1D;EAEA,MAAMY,KAAK,GAAGxB,UAAU,CAACyB,GAAG,CAAC,CAAC;EAE9B,MAAMC,QAAQ,GAAG,GAAGhB,IAAI,IAAIK,OAAO,IAAIC,MAAM,IAAIL,IAAI,IAAIa,KAAK,IAAIG,IAAI,CAACC,SAAS,CAACP,cAAc,CAAC,IAAID,IAAI,EAAE;EAC1G,MAAMS,MAAM,GAAGtB,gBAAgB,CAACkB,GAAG,CAACC,QAAQ,CAAC;EAE7C,IAAIG,MAAM,KAAKC,SAAS,EAAE;IACxB,OAAOD,MAAM;EACf;EAEA,MAAME,GAAG,GAAG3B,0BAA0B,CAACe,cAAc,CACnDT,IAAI,EACJK,OAAO,EACPJ,IAAI,EACJK,MAAM,EACN;IAAEgB,KAAK,EAAEX;EAAe,CAAC,EACzBD,IACF,CAAC;EAED,MAAMa,MAA2B,GAAG;IAClCF,GAAG;IACHP,KAAK;IACLP,KAAK,EAAEN,IAAI;IACXO,MAAM,EAAEP;EACV,CAAC;EAEDJ,gBAAgB,CAAC2B,GAAG,CAACR,QAAQ,EAAEO,MAAM,CAAC;EAEtC,OAAOA,MAAM;AACf,CAAC","ignoreList":[]}
+{"version":3,"names":["PixelRatio","PlatformColor","processColor","FONT_WEIGHTS","MaterialSymbolViewNativeComponent","NativeMaterialSymbolModule","jsx","_jsx","imageSourceCache","Map","DEFAULT_COLOR","MaterialSymbol","name","weight","size","color","style","rest","width","height","getImageSource","variant","processedColor","Error","String","scale","get","cacheKey","JSON","stringify","cached","undefined","uri","value","source","set"],"sourceRoot":"../../../src","sources":["native/MaterialSymbol.android.tsx"],"mappings":";;AAAA,SAEEA,UAAU,EACVC,aAAa,EACbC,YAAY,QAEP,cAAc;AAErB,SAASC,YAAY,QAAQ,gBAAa;AAC1C,OAAOC,iCAAiC,MAAM,qCAAqC;AACnF,OAAOC,0BAA0B,MAAM,iCAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKtE,MAAMC,gBAAgB,GAAG,IAAIC,GAAG,CAA8B,CAAC;AAE/D,MAAMC,aAAa,GAAGT,aAAa,CAAC,uBAAuB,CAAC;AAE5D,OAAO,SAASU,cAAcA,CAAC;EAC7BC,IAAI;EACJC,MAAM;EACNC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAGL,aAAa;EACrBM,KAAK;EACL,GAAGC;AACgB,CAAC,EAAsB;EAC1C,oBACEV,IAAA,CAACH,iCAAiC;IAChCQ,IAAI,EAAEA,IAAK;IACXC,MAAM,EAAE,OAAOA,MAAM,KAAK,QAAQ,GAAGV,YAAY,CAACU,MAAM,CAAC,GAAIA,MAAM,IAAI,CAAG;IAC1EC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAE,CACL;MACEE,KAAK,EAAEJ,IAAI;MACXK,MAAM,EAAEL;IACV,CAAC,EACDE,KAAK,CACL;IAAA,GACEC;EAAI,CACT,CAAC;AAEN;AAEAN,cAAc,CAACS,cAAc,GAAG,CAAC;EAC/BR,IAAI;EACJS,OAAO;EACPR,MAAM;EACNC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG;AACa,CAAC,KAA0B;EAChD,MAAMO,cAAc,GAAGpB,YAAY,CAACa,KAAK,CAAC;EAE1C,IAAIO,cAAc,IAAI,IAAI,EAAE;IAC1B,MAAM,IAAIC,KAAK,CAAC,wBAAwBC,MAAM,CAACT,KAAK,CAAC,EAAE,CAAC;EAC1D;EAEA,MAAMU,KAAK,GAAGzB,UAAU,CAAC0B,GAAG,CAAC,CAAC;EAE9B,MAAMC,QAAQ,GAAG,GAAGf,IAAI,IAAIS,OAAO,IAAIR,MAAM,IAAIC,IAAI,IAAIW,KAAK,IAAIG,IAAI,CAACC,SAAS,CAACP,cAAc,CAAC,EAAE;EAClG,MAAMQ,MAAM,GAAGtB,gBAAgB,CAACkB,GAAG,CAACC,QAAQ,CAAC;EAE7C,IAAIG,MAAM,KAAKC,SAAS,EAAE;IACxB,OAAOD,MAAM;EACf;EAEA,MAAME,GAAG,GAAG3B,0BAA0B,CAACe,cAAc,CACnDR,IAAI,EACJS,OAAO,EACP,OAAOR,MAAM,KAAK,QAAQ,GAAGV,YAAY,CAACU,MAAM,CAAC,GAAGA,MAAM,EAC1DC,IAAI,EACJ;IAAEmB,KAAK,EAAEX;EAAe,CAC1B,CAAC;EAED,MAAMY,MAA2B,GAAG;IAClCF,GAAG;IACHP,KAAK;IACLP,KAAK,EAAEJ,IAAI;IACXK,MAAM,EAAEL;EACV,CAAC;EAEDN,gBAAgB,CAAC2B,GAAG,CAACR,QAAQ,EAAEO,MAAM,CAAC;EAEtC,OAAOA,MAAM;AACf,CAAC","ignoreList":[]}

package/lib/module/native/MaterialSymbolData.js

@@ -1,9 +1,2 @@
 "use strict";
-
-// Auto-generated by scripts/update-material-symbols.ts
-// Do not edit manually
-
-export const MATERIAL_SYMBOL_FONT_HASHES = {
-  'outlined-400': 'ec67dff9'
-};
 //# sourceMappingURL=MaterialSymbolData.js.map

package/lib/module/native/MaterialSymbolData.js.map

@@ -1 +1 @@
-{"version":3,"names":["MATERIAL_SYMBOL_FONT_HASHES"],"sourceRoot":"../../../src","sources":["native/MaterialSymbolData.tsx"],"mappings":";;AAAA;AACA;;AAEA,OAAO,MAAMA,2BAA2B,GAAG;EACzC,cAAc,EAAE;AAClB,CAAU","ignoreList":[]}
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["native/MaterialSymbolData.tsx"],"mappings":"","ignoreList":[]}

package/lib/module/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/lib/module/native/NativeMaterialSymbolModule.js.map

@@ -1 +1 @@
-{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../../src","sources":["native/NativeMaterialSymbolModule.ts"],"mappings":";;AAAA;;AAEA,SAA2BA,mBAAmB,QAAQ,cAAc;AAepE,eAAeA,mBAAmB,CAACC,YAAY,CAC7C,qCACF,CAAC","ignoreList":[]}
+{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../../src","sources":["native/NativeMaterialSymbolModule.ts"],"mappings":";;AAAA;;AAEA,SAA2BA,mBAAmB,QAAQ,cAAc;AAcpE,eAAeA,mBAAmB,CAACC,YAAY,CAC7C,qCACF,CAAC","ignoreList":[]}

package/lib/module/native/SFSymbol.ios.js

@@ -1,18 +1,41 @@
 "use strict";
 
+import { FONT_WEIGHTS } from "./constants.js";
 import SFSymbolViewNativeComponent from './SFSymbolViewNativeComponent';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function SFSymbol({
   name,
   size = 24,
-  color = 'black',
+  color,
+  weight,
+  scale = 'medium',
+  mode = 'monochrome',
+  colors,
+  animation,
   style,
   ...rest
 }) {
+  const animConfig = typeof animation === 'string' ? {
+    effect: animation
+  } : animation;
   return /*#__PURE__*/_jsx(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,
       height: size

package/lib/module/native/SFSymbol.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["SFSymbolViewNativeComponent","jsx","_jsx","SFSymbol","name","size","color","style","rest","width","height"],"sourceRoot":"../../../src","sources":["native/SFSymbol.ios.tsx"],"mappings":";;AAEA,OAAOA,2BAA2B,MAAM,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKxE,OAAO,SAASC,QAAQA,CAAC;EACvBC,IAAI;EACJC,IAAI,GAAG,EAAE;EACTC,KAAK,GAAG,OAAO;EACfC,KAAK;EACL,GAAGC;AACU,CAAC,EAAsB;EACpC,oBACEN,IAAA,CAACF,2BAA2B;IAC1BI,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbC,KAAK,EAAE,CACL;MACEE,KAAK,EAAEJ,IAAI;MACXK,MAAM,EAAEL;IACV,CAAC,EACDE,KAAK,CACL;IAAA,GACEC;EAAI,CACT,CAAC;AAEN","ignoreList":[]}
+{"version":3,"names":["FONT_WEIGHTS","SFSymbolViewNativeComponent","jsx","_jsx","SFSymbol","name","size","color","weight","scale","mode","colors","animation","style","rest","animConfig","effect","colorPrimary","primary","colorSecondary","secondary","colorTertiary","tertiary","animationRepeating","repeating","animationRepeatCount","repeatCount","animationSpeed","speed","animationWholeSymbol","wholeSymbol","animationDirection","direction","animationReversing","reversing","animationCumulative","cumulative","width","height"],"sourceRoot":"../../../src","sources":["native/SFSymbol.ios.tsx"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,gBAAa;AAC1C,OAAOC,2BAA2B,MAAM,+BAA+B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAKxE,OAAO,SAASC,QAAQA,CAAC;EACvBC,IAAI;EACJC,IAAI,GAAG,EAAE;EACTC,KAAK;EACLC,MAAM;EACNC,KAAK,GAAG,QAAQ;EAChBC,IAAI,GAAG,YAAY;EACnBC,MAAM;EACNC,SAAS;EACTC,KAAK;EACL,GAAGC;AACU,CAAC,EAAsB;EACpC,MAAMC,UAAU,GACd,OAAOH,SAAS,KAAK,QAAQ,GAAG;IAAEI,MAAM,EAAEJ;EAAU,CAAC,GAAGA,SAAS;EAEnE,oBACET,IAAA,CAACF,2BAA2B;IAC1BI,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAE,OAAOA,MAAM,KAAK,QAAQ,GAAGR,YAAY,CAACQ,MAAM,CAAC,GAAIA,MAAM,IAAI,CAAG;IAC1EC,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXO,YAAY,EAAEN,MAAM,EAAEO,OAAO,IAAIX,KAAM;IACvCY,cAAc,EAAER,MAAM,EAAES,SAAU;IAClCC,aAAa,EAAEV,MAAM,EAAEW,QAAS;IAChCV,SAAS,EAAEG,UAAU,EAAEC,MAAM,IAAI,EAAG;IACpCO,kBAAkB,EAAER,UAAU,EAAES,SAAS,IAAI,KAAM;IACnDC,oBAAoB,EAAEV,UAAU,EAAEW,WAAW,IAAI,CAAE;IACnDC,cAAc,EAAEZ,UAAU,EAAEa,KAAK,IAAI,CAAE;IACvCC,oBAAoB,EAAEd,UAAU,EAAEe,WAAW,IAAI,KAAM;IACvDC,kBAAkB,EAAEhB,UAAU,EAAEiB,SAAS,IAAI,EAAG;IAChDC,kBAAkB,EAAElB,UAAU,EAAEmB,SAAS,IAAI,KAAM;IACnDC,mBAAmB,EAAEpB,UAAU,EAAEqB,UAAU,IAAI,KAAM;IACrDvB,KAAK,EAAE,CACL;MACEwB,KAAK,EAAE/B,IAAI;MACXgC,MAAM,EAAEhC;IACV,CAAC,EACDO,KAAK,CACL;IAAA,GACEC;EAAI,CACT,CAAC;AAEN","ignoreList":[]}

package/lib/module/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/lib/module/native/constants.js

@@ -0,0 +1,14 @@
+"use strict";
+
+export const FONT_WEIGHTS = {
+  thin: 100,
+  ultralight: 200,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+  black: 900
+};
+//# sourceMappingURL=constants.js.map

package/lib/module/native/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["FONT_WEIGHTS","thin","ultralight","light","regular","medium","semibold","bold","extrabold","black"],"sourceRoot":"../../../src","sources":["native/constants.tsx"],"mappings":";;AAAA,OAAO,MAAMA,YAAY,GAAG;EAC1BC,IAAI,EAAE,GAAG;EACTC,UAAU,EAAE,GAAG;EACfC,KAAK,EAAE,GAAG;EACVC,OAAO,EAAE,GAAG;EACZC,MAAM,EAAE,GAAG;EACXC,QAAQ,EAAE,GAAG;EACbC,IAAI,EAAE,GAAG;EACTC,SAAS,EAAE,GAAG;EACdC,KAAK,EAAE;AACT,CAAU","ignoreList":[]}

package/lib/typescript/src/native/MaterialSymbol.android.d.ts

@@ -1,8 +1,8 @@
 import { type ImageSourcePropType, type ViewProps } from 'react-native';
 import type { MaterialSymbolOptions } from './types';
 export type MaterialSymbolProps = MaterialSymbolOptions & ViewProps;
-export declare function MaterialSymbol({ name, size, color, style, ...rest }: MaterialSymbolProps): React.ReactElement;
+export declare function MaterialSymbol({ name, weight, size, color, style, ...rest }: MaterialSymbolProps): React.ReactElement;
 export declare namespace MaterialSymbol {
-    var getImageSource: ({ name, size, color, }: MaterialSymbolOptions) => ImageSourcePropType;
+    var getImageSource: ({ name, variant, weight, size, color, }: MaterialSymbolOptions) => ImageSourcePropType;
 }
 //# sourceMappingURL=MaterialSymbol.android.d.ts.map

package/lib/typescript/src/native/MaterialSymbol.android.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MaterialSymbol.android.d.ts","sourceRoot":"","sources":["../../../../src/native/MaterialSymbol.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,mBAAmB,EAGxB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,SAAS,CAAC;AAIpE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,IAAS,EACT,KAAe,EACf,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAqB1C;yBA3Be,cAAc;iDAiC3B,qBAAqB,KAAG,mBAAmB"}
+{"version":3,"file":"MaterialSymbol.android.d.ts","sourceRoot":"","sources":["../../../../src/native/MaterialSymbol.android.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,mBAAmB,EAIxB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,GAAG,SAAS,CAAC;AAMpE,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,MAAM,EACN,IAAS,EACT,KAAqB,EACrB,KAAK,EACL,GAAG,IAAI,EACR,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAiB1C;yBAxBe,cAAc;kEAgC3B,qBAAqB,KAAG,mBAAmB"}