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

package/android/build.gradle

@@ -1,11 +1,11 @@
+import groovy.json.JsonOutput
 import groovy.json.JsonSlurper
 
 buildscript {
   ext.ReactNavigation = [
-    kotlinVersion: "2.0.21",
+    kotlinVersion: "2.1.20",
     minSdkVersion: 24,
-    compileSdkVersion: 36,
-    targetSdkVersion: 36
+    compileSdkVersion: 36
   ]
 
   ext.getExtOrDefault = { prop ->
@@ -30,7 +30,10 @@ buildscript {
 
 
 apply plugin: "com.android.library"
-apply plugin: "kotlin-android"
+
+if (project.extensions.findByName("kotlin") == null) {
+  apply plugin: "kotlin-android"
+}
 
 apply plugin: "com.facebook.react"
 
@@ -41,7 +44,6 @@ android {
 
   defaultConfig {
     minSdkVersion getExtOrDefault("minSdkVersion")
-    targetSdkVersion getExtOrDefault("targetSdkVersion")
   }
 
   buildTypes {
@@ -55,66 +57,137 @@ android {
   }
 
   compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
   }
 }
 
 tasks.register('copyMaterialFonts', Copy) {
   def packageJsonFile = file(rootDir.path + "/../package.json")
+  def materialSymbolsConfig = null
   def fontsConfig = null
 
   if (packageJsonFile.exists()) {
     def packageJson = new JsonSlurper().parse(packageJsonFile)
 
-    fontsConfig = packageJson["react-navigation"]?.get("material-symbols")?.get("fonts")
+    materialSymbolsConfig = packageJson["react-navigation"]?.get("material-symbols")
+    fontsConfig = materialSymbolsConfig?.get("fonts")
   }
 
-  fontsConfig = fontsConfig != null ? fontsConfig : [[variant: "outlined", weights: [400]]]
+  def packageDir = projectDir.canonicalFile.parentFile
+  def materialSymbolsDir = [
+    new File(packageDir, "node_modules/@react-navigation/material-symbols"),
+    new File(packageDir.parentFile.parentFile, "@react-navigation/material-symbols")
+  ].find { it.exists() }
+
+  if (materialSymbolsDir == null) {
+    materialSymbolsDir = new File(
+      providers.exec {
+        workingDir(projectDir)
+        commandLine("node", "--print", "require.resolve('@react-navigation/material-symbols/package.json')")
+      }.standardOutput.asText.get().trim()
+    ).getParentFile()
+  }
 
-  def assetsFontsDir = file("../assets/fonts")
+  def assetsFontsDir = new File(materialSymbolsDir, "assets/fonts")
   def availableFonts = assetsFontsDir.listFiles()
     ?.findAll { it.name.startsWith("MaterialSymbols") && it.name.endsWith(".ttf") }
     ?.collect { it.name.replaceFirst(/^MaterialSymbols/, '').replaceFirst(/\.ttf$/, '') } ?: []
 
-  def validVariants = availableFonts.collect { it.split('_')[0].toLowerCase() }.unique().sort()
+  if (!availableFonts && materialSymbolsConfig != null) {
+    throw new GradleException(
+      "Found \"react-navigation\" > \"material-symbols\" in package.json, but no fonts are available in \"@react-navigation/material-symbols\" at ${JsonOutput.toJson(materialSymbolsDir.path)}.\n\n" +
+        "If \"@react-navigation/material-symbols\" is overridden with an empty version, remove the override to use Material Symbols, or remove \"react-navigation\" > \"material-symbols\" from package.json."
+    )
+  }
+
+  def validVariants = availableFonts.collect { it.split('_')[0].uncapitalize() }.unique().sort()
   def validWeights = availableFonts.collect { it.split('_')[1] as int }.unique().sort()
+  def validFills = availableFonts.collect { it.endsWith("_Filled") ? 1 : 0 }.unique().sort()
 
   def errors = [] as Set
 
-  fontsConfig.each { font ->
-    if (font.variant && !validVariants.contains(font.variant.toLowerCase())) {
-      errors << "Invalid font variant: ${font.variant}"
+  if (fontsConfig != null && !(fontsConfig instanceof List)) {
+    errors << "Invalid fonts ${JsonOutput.toJson(fontsConfig)}. Expected an array."
+  }
+
+  def fonts = []
+
+  if (availableFonts) {
+    fonts = fontsConfig instanceof List ? fontsConfig : [[:]]
+  }
+
+  fonts.each { font ->
+    if (!(font instanceof Map)) {
+      errors << "Invalid font ${JsonOutput.toJson(font)}. Expected an object."
+
+      return
+    }
+
+    (font.keySet() - ["variant", "weights", "fills"]).each { key ->
+      errors << "Unknown key ${JsonOutput.toJson(key)}."
+    }
+
+    if (font.variant != null && !validVariants.contains(font.variant)) {
+      errors << "Invalid variant ${JsonOutput.toJson(font.variant)}."
+    }
+
+    if (font.weights != null && !(font.weights instanceof List)) {
+      errors << "Invalid weights ${JsonOutput.toJson(font.weights)}. Expected an array."
+    } else {
+      font.weights.each { weight ->
+        if (!validWeights.contains(weight)) {
+          errors << "Invalid weight ${JsonOutput.toJson(weight)}."
+        }
+      }
     }
 
-    font.weights.each { weight ->
-      if (!validWeights.contains(weight)) {
-        errors << "Invalid font weight: ${weight}"
+    if (font.fills != null && !(font.fills instanceof List)) {
+      errors << "Invalid fills ${JsonOutput.toJson(font.fills)}. Expected an array."
+    } else {
+      font.fills.each { fill ->
+        if (!validFills.contains(fill)) {
+          errors << "Invalid fill ${JsonOutput.toJson(fill)}."
+        }
       }
     }
   }
 
   if (errors) {
     throw new GradleException(
-      errors.join("\n") + "\n\nAvailable variants: ${validVariants.join(", ")}.\nAvailable weights: ${validWeights.join(", ")}."
+      "Invalid Material Symbols fonts in \"react-navigation\" > \"material-symbols\" > \"fonts\" in package.json.\n\n" +
+        errors.join("\n") + "\n\n" +
+        "Available variants: ${validVariants.collect { JsonOutput.toJson(it) }.join(", ")}.\n" +
+        "Available weights: ${validWeights.join(", ")}.\n" +
+        "Available fills: ${validFills.join(", ")}."
     )
   }
 
-  def fontFiles = fontsConfig.collectMany { font ->
-    def variant = font.variant?.capitalize() ?: ""
+  def fontFiles = fonts.collectMany { font ->
+    def variant = (font.variant ?: "outlined").capitalize()
+    def weights = font.weights ?: [400]
+    def fills = font.fills ?: [0]
+
+    weights.collectMany { weight ->
+      fills.collect { fill ->
+        def suffix = fill == 1 ? "_Filled" : ""
 
-    font.weights.collect { weight -> "MaterialSymbols${variant}_${weight}.ttf" }
+        "MaterialSymbols${variant}_${weight}${suffix}.ttf"
+      }
+    }
   }
 
-  if (fontFiles) {
-    from(assetsFontsDir) { include fontFiles }
+  def assetFiles = fontFiles ? fontFiles + "MaterialSymbols.codepoints" + "MaterialSymbols.mirrored" : []
+
+  if (assetFiles) {
+    from(assetsFontsDir) { include assetFiles }
   }
 
   into layout.buildDirectory.dir("intermediates/react-navigation/fonts")
 
   doFirst {
     if (destinationDir.exists()) {
-      def extraFiles = destinationDir.listFiles()?.findAll { file -> !fontFiles.contains(file.name) }
+      def extraFiles = destinationDir.listFiles()?.findAll { file -> !assetFiles.contains(file.name) }
 
       extraFiles?.each { file -> file.delete() }
     }
@@ -123,11 +196,11 @@ tasks.register('copyMaterialFonts', Copy) {
   doLast {
     def digest = java.security.MessageDigest.getInstance("MD5")
 
-    fontFiles.sort().each { name ->
-      def fontFile = new File(assetsFontsDir, name)
+    assetFiles.sort().each { name ->
+      def assetFile = new File(assetsFontsDir, name)
 
-      if (fontFile.exists()) {
-        digest.update(fontFile.bytes)
+      if (assetFile.exists()) {
+        digest.update(assetFile.bytes)
       }
     }
 

package/android/src/main/java/org/reactnavigation/MaterialSymbolModule.kt

@@ -1,5 +1,6 @@
 package org.reactnavigation
 
+import android.net.Uri
 import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Paint
@@ -15,6 +16,7 @@ import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import java.io.File
 import java.io.FileOutputStream
+import java.util.concurrent.ConcurrentHashMap
 import kotlin.math.roundToInt
 
 class MaterialSymbolModule(reactContext: ReactApplicationContext) :
@@ -24,6 +26,7 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
     const val NAME = NativeMaterialSymbolModuleSpec.NAME
 
     private val scope = CoroutineScope(Dispatchers.IO + SupervisorJob())
+    private val cleanedCacheDirs = ConcurrentHashMap.newKeySet<String>()
   }
 
   private val fontHash: String by lazy {
@@ -31,8 +34,12 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
       .trim()
   }
 
+  override fun isAvailable(): Boolean {
+    return MaterialSymbolTypeface.isAvailable(reactApplicationContext)
+  }
+
   override fun getImageSource(
-    name: String, variant: String?, weight: Double?, size: Double, color: ReadableMap
+    name: String, variant: String?, weight: Double?, fill: Boolean?, size: Double, color: ReadableMap, direction: String
   ): String {
     val colorValue = color.getDynamic("value").let {
       when (it.type) {
@@ -42,14 +49,15 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
       }
     }
 
-    val resolvedColor = ColorPropConverter.getColor(colorValue, reactApplicationContext)
-      ?: throw IllegalArgumentException("Could not resolve color")
+    val resolvedColor = ColorPropConverter.getColor(
+      colorValue, reactApplicationContext.currentActivity ?: reactApplicationContext
+    ) ?: throw IllegalArgumentException("Invalid color value $colorValue for Material Symbol \"$name\".")
 
     val density = reactApplicationContext.resources.displayMetrics.density
     val scaledSize = (size * density).roundToInt().coerceAtLeast(1)
 
-    val (resolvedTypeface, typefaceSuffix) = MaterialSymbolTypeface.get(
-      reactApplicationContext, variant, weight?.toInt()
+    val typefaceSuffix = MaterialSymbolTypeface.getSuffix(
+      reactApplicationContext, variant, weight?.toInt(), fill
     )
 
     val cacheDir = File(
@@ -57,20 +65,37 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
       "react_navigation/material_symbols/$typefaceSuffix/$fontHash"
     )
 
-    val cacheKey = "${name.hashCode()}_${scaledSize}_$resolvedColor"
-    val cacheFile = File(cacheDir, "$cacheKey.png")
+    val mirrored =
+      direction == "rtl" && MaterialSymbolTypeface.isAutoMirrored(reactApplicationContext, name)
+
+    val cacheFile = File(
+      cacheDir, "${Uri.encode(name)}_${scaledSize}_$resolvedColor${if (mirrored) "_rtl" else ""}.png"
+    )
+
+    val cacheUri = cacheFile.toUri().toString()
 
     if (cacheFile.exists()) {
-      return cacheFile.toUri().toString()
+      return cacheUri
     }
 
-    scope.launch {
-      cacheDir.parentFile?.listFiles { it.isDirectory && it.name != fontHash }
-        ?.forEach { it.deleteRecursively() }
+    val symbol = MaterialSymbolTypeface.getSymbol(reactApplicationContext, name)
+      ?: throw IllegalArgumentException("No Material Symbol found with the name \"$name\".")
+
+    val cacheParent = cacheDir.parentFile
+
+    if (cacheParent != null && cleanedCacheDirs.add(cacheParent.absolutePath)) {
+      scope.launch {
+        cacheParent.listFiles { it.isDirectory && it.name != fontHash }
+          ?.forEach { it.deleteRecursively() }
+      }
     }
 
     cacheDir.mkdirs()
 
+    val resolvedTypeface = MaterialSymbolTypeface.get(
+      reactApplicationContext, variant, weight?.toInt(), fill
+    ).typeface
+
     val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
       typeface = resolvedTypeface
       textSize = scaledSize.toFloat()
@@ -86,7 +111,11 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
       val canvas = Canvas(bitmap)
       val y = (scaledSize - (fontMetrics.descent - fontMetrics.ascent)) / 2f - fontMetrics.ascent
 
-      canvas.drawText(name, scaledSize / 2f, y, paint)
+      if (mirrored) {
+        canvas.scale(-1f, 1f, scaledSize / 2f, scaledSize / 2f)
+      }
+
+      canvas.drawText(symbol, scaledSize / 2f, y, paint)
 
       FileOutputStream(cacheFile).use {
         bitmap.compress(Bitmap.CompressFormat.PNG, 100, it)
@@ -95,6 +124,6 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
       bitmap.recycle()
     }
 
-    return cacheFile.toUri().toString()
+    return cacheUri
   }
 }

package/android/src/main/java/org/reactnavigation/MaterialSymbolTypeface.kt

@@ -2,25 +2,36 @@ package org.reactnavigation
 
 import android.content.Context
 import android.graphics.Typeface
+import java.util.concurrent.ConcurrentHashMap
 
 data class MaterialSymbolTypefaceResult(val typeface: Typeface, val suffix: String)
 
 object MaterialSymbolTypeface {
-  private val typefaces = mutableMapOf<String, Typeface>()
-  private var defaultSuffix: String? = null
+  private const val CONFIG_HINT =
+    "Configure the fonts in \"react-navigation\" > \"material-symbols\" > \"fonts\" in package.json and rebuild the app."
 
-  fun get(context: Context, variant: String?, weight: Int?): MaterialSymbolTypefaceResult {
-    val suffix = if (variant != null && weight != null) {
-      val resolvedVariant = when (variant) {
-        "rounded" -> "Rounded"
-        "sharp" -> "Sharp"
-        else -> "Outlined"
-      }
+  private val typefaces = ConcurrentHashMap<String, Typeface>()
+  private var availableFonts: Map<String, Map<Int, Set<Boolean>>>? = null
+  private var symbols: Map<String, String>? = null
+  private var autoMirroredSymbols: Set<String>? = null
 
-      "${resolvedVariant}_$weight"
-    } else {
-      getDefaultSuffix(context)
-    }
+  fun isAvailable(context: Context): Boolean {
+    return getAvailableFonts(context).isNotEmpty()
+  }
+
+  fun isAutoMirrored(context: Context, name: String): Boolean {
+    autoMirroredSymbols?.let { return it.contains(name) }
+
+    val result = context.assets.open("fonts/MaterialSymbols.mirrored").bufferedReader()
+      .useLines { lines -> lines.toSet() }
+
+    autoMirroredSymbols = result
+
+    return result.contains(name)
+  }
+
+  fun get(context: Context, variant: String?, weight: Int?, fill: Boolean?): MaterialSymbolTypefaceResult {
+    val suffix = getSuffix(context, variant, weight, fill)
 
     val typeface = typefaces.getOrPut(suffix) {
       val path = "fonts/MaterialSymbols${suffix}.ttf"
@@ -28,33 +39,124 @@ object MaterialSymbolTypeface {
       try {
         Typeface.createFromAsset(context.assets, path)
       } catch (e: Exception) {
-        throw RuntimeException("$path not found.", e)
+        throw RuntimeException("Failed to load the Material Symbols font \"$path\".", e)
       }
     }
 
     return MaterialSymbolTypefaceResult(typeface, suffix)
   }
 
-  private fun getDefaultSuffix(context: Context): String {
-    defaultSuffix?.let { return it }
+  fun getSymbol(context: Context, name: String): String? {
+    symbols?.let { return it[name] }
 
-    val fonts = context.assets.list("fonts")
-      ?.filter { it.startsWith("MaterialSymbols") && it.endsWith(".ttf") } ?: emptyList()
+    val result = context.assets.open("fonts/MaterialSymbols.codepoints").bufferedReader()
+      .useLines { lines ->
+        lines.associate { line ->
+          val (key, codepoint) = line.split(" ")
+
+          key to String(Character.toChars(codepoint.toInt(16)))
+        }
+      }
+
+    symbols = result
+
+    return result[name]
+  }
+
+  fun getSuffix(context: Context, variant: String?, weight: Int?, fill: Boolean?): String {
+    val fonts = getAvailableFonts(context)
 
     if (fonts.isEmpty()) {
-      throw RuntimeException("No MaterialSymbols font found in assets.")
+      throw RuntimeException("No Material Symbols fonts found. $CONFIG_HINT")
     }
 
-    if (fonts.size > 1) {
+    val resolvedVariant = if (variant != null) {
+      when (variant) {
+        "outlined" -> "Outlined"
+        "rounded" -> "Rounded"
+        "sharp" -> "Sharp"
+        else -> throw IllegalArgumentException(
+          "Invalid Material Symbols variant \"$variant\". Expected \"outlined\", \"rounded\" or \"sharp\"."
+        )
+      }
+    } else {
+      resolveDefaultVariant(fonts)
+    }
+
+    val variantName = "\"${resolvedVariant.lowercase()}\""
+
+    val weights = fonts[resolvedVariant]
+      ?: throw RuntimeException("No Material Symbols font found for variant $variantName. $CONFIG_HINT")
+
+    val resolvedWeight = weight ?: resolveDefaultWeight(weights, resolvedVariant)
+
+    val fills = weights[resolvedWeight]
+      ?: throw RuntimeException(
+        "No Material Symbols font found for variant $variantName and weight $resolvedWeight. $CONFIG_HINT"
+      )
+
+    val resolvedFill = fill ?: fills.singleOrNull() ?: false
+
+    if (!fills.contains(resolvedFill)) {
       throw RuntimeException(
-        "Multiple MaterialSymbols fonts found in assets: ${fonts.joinToString()}. " + "Please specify a variant and weight explicitly."
+        "No Material Symbols font found for variant $variantName, weight $resolvedWeight and fill ${if (resolvedFill) 1 else 0}. $CONFIG_HINT"
       )
     }
 
-    val suffix = fonts[0].removePrefix("MaterialSymbols").removeSuffix(".ttf")
+    return "${resolvedVariant}_$resolvedWeight" + if (resolvedFill) "_Filled" else ""
+  }
+
+  private fun getAvailableFonts(context: Context): Map<String, Map<Int, Set<Boolean>>> {
+    availableFonts?.let { return it }
+
+    val files = context.assets.list("fonts")
+      ?.filter { it.startsWith("MaterialSymbols") && it.endsWith(".ttf") } ?: emptyList()
+
+    val fonts = mutableMapOf<String, MutableMap<Int, MutableSet<Boolean>>>()
+
+    for (file in files) {
+      val parts = file.removePrefix("MaterialSymbols").removeSuffix(".ttf").split("_")
+      val variant = parts[0]
+      val weight = parts.getOrNull(1)?.toIntOrNull() ?: continue
+      val fill = parts.getOrNull(2) == "Filled"
+
+      fonts.getOrPut(variant) { mutableMapOf() }.getOrPut(weight) { mutableSetOf() }.add(fill)
+    }
+
+    availableFonts = fonts
+
+    return fonts
+  }
+
+  private fun resolveDefaultVariant(fonts: Map<String, Map<Int, Set<Boolean>>>): String {
+    val variants = fonts.keys
 
-    defaultSuffix = suffix
+    if (variants.size == 1) {
+      return variants.first()
+    }
+
+    if (variants.contains("Outlined")) {
+      return "Outlined"
+    }
+
+    throw RuntimeException(
+      "Multiple Material Symbols variants found: ${variants.joinToString { "\"${it.lowercase()}\"" }}. " +
+        "Specify the \"variant\" to use."
+    )
+  }
+
+  private fun resolveDefaultWeight(weights: Map<Int, Set<Boolean>>, variant: String): Int {
+    if (weights.size == 1) {
+      return weights.keys.first()
+    }
+
+    if (weights.contains(400)) {
+      return 400
+    }
 
-    return suffix
+    throw RuntimeException(
+      "Multiple Material Symbols weights found for variant \"${variant.lowercase()}\": ${weights.keys.sorted().joinToString()}. " +
+        "Specify the \"weight\" to use."
+    )
   }
 }

package/android/src/main/java/org/reactnavigation/MaterialSymbolView.kt

@@ -11,13 +11,16 @@ class MaterialSymbolView @JvmOverloads constructor(
 
   private var variant: String? = null
   private var weight: Int? = null
+  private var fill: Boolean? = null
+  private var symbol: String? = null
+  private var autoMirrored = false
 
   init {
-    updateTypeface()
+    setColor(null)
   }
 
   override fun onDraw(canvas: Canvas) {
-    val text = text?.toString() ?: return
+    val symbol = symbol ?: return
 
     paint.color = currentTextColor
     paint.textAlign = Paint.Align.CENTER
@@ -26,51 +29,67 @@ class MaterialSymbolView @JvmOverloads constructor(
     val x = width / 2f
     val y = (height - (fontMetrics.descent - fontMetrics.ascent)) / 2f - fontMetrics.ascent
 
-    canvas.drawText(text, x, y, paint)
+    if (autoMirrored && layoutDirection == LAYOUT_DIRECTION_RTL) {
+      canvas.scale(-1f, 1f, x, height / 2f)
+    }
+
+    canvas.drawText(symbol, x, y, paint)
   }
 
-  fun setName(name: String) {
-    text = name
+  fun setName(name: String?) {
+    symbol = name?.let { MaterialSymbolTypeface.getSymbol(context, it) }
+    autoMirrored = name?.let { MaterialSymbolTypeface.isAutoMirrored(context, it) } ?: false
 
     invalidate()
   }
 
-  fun setVariant(variant: String) {
-    if (this.variant == variant) {
-      return
-    }
-
+  fun setVariant(variant: String?) {
     this.variant = variant
-
-    updateTypeface()
   }
 
-  fun setWeight(weight: Int) {
-    if (this.weight == weight) {
-      return
-    }
-
+  fun setWeight(weight: Int?) {
     this.weight = weight
+  }
 
-    updateTypeface()
+  fun setFill(fill: Int) {
+    this.fill = if (fill == -1) null else fill == 1
   }
 
-  private fun updateTypeface() {
+  fun updateTypeface() {
     setTypeface(
       MaterialSymbolTypeface.get(
         context,
         variant?.ifEmpty { null },
-        weight.takeIf { it != 0 }).typeface
+        weight.takeIf { it != 0 },
+        fill).typeface
     )
 
     invalidate()
   }
 
-  fun setColor(color: Int) {
-    setTextColor(color)
+  fun setColor(color: Int?) {
+    if (color == null) {
+      val typedValue = android.util.TypedValue()
+
+      context.theme.resolveAttribute(
+        android.R.attr.colorForeground, typedValue, true
+      )
+
+      val resolvedColor = if (typedValue.resourceId != 0) {
+        context.getColor(typedValue.resourceId)
+      } else {
+        typedValue.data
+      }
+
+      setTextColor(resolvedColor)
+    } else {
+      setTextColor(color)
+    }
+
+    invalidate()
   }
 
   fun setSize(size: Float) {
-    textSize = size
+    setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, size)
   }
 }

package/android/src/main/java/org/reactnavigation/MaterialSymbolViewManager.kt

@@ -4,9 +4,11 @@ import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.ReactNavigationMaterialSymbolViewManagerInterface
 
 @ReactModule(name = MaterialSymbolViewManager.NAME)
-class MaterialSymbolViewManager : SimpleViewManager<MaterialSymbolView>() {
+class MaterialSymbolViewManager : SimpleViewManager<MaterialSymbolView>(),
+  ReactNavigationMaterialSymbolViewManagerInterface<MaterialSymbolView> {
 
   override fun getName(): String {
     return NAME
@@ -17,25 +19,41 @@ class MaterialSymbolViewManager : SimpleViewManager<MaterialSymbolView>() {
   }
 
   @ReactProp(name = "name")
-  fun setName(view: MaterialSymbolView, name: String) {
+  override fun setName(view: MaterialSymbolView, name: String?) {
     view.setName(name)
   }
 
   @ReactProp(name = "variant")
-  fun setVariant(view: MaterialSymbolView, variant: String) {
+  override fun setVariant(view: MaterialSymbolView, variant: String?) {
     view.setVariant(variant)
   }
 
-  @ReactProp(name = "color", customType = "Color", defaultInt = android.graphics.Color.BLACK)
-  fun setColor(view: MaterialSymbolView, color: Int) {
-    view.setColor(color)
+  @ReactProp(name = "weight")
+  override fun setWeight(view: MaterialSymbolView, weight: Int?) {
+    view.setWeight(weight)
+  }
+
+  @ReactProp(name = "fill")
+  override fun setFill(view: MaterialSymbolView, fill: Int) {
+    view.setFill(fill)
   }
 
   @ReactProp(name = "size")
-  fun setSize(view: MaterialSymbolView, size: Float) {
+  override fun setSize(view: MaterialSymbolView, size: Float) {
     view.setSize(size)
   }
 
+  @ReactProp(name = "color", customType = "Color")
+  override fun setColor(view: MaterialSymbolView, color: Int?) {
+    view.setColor(color)
+  }
+
+  override fun onAfterUpdateTransaction(view: MaterialSymbolView) {
+    super.onAfterUpdateTransaction(view)
+
+    view.updateTypeface()
+  }
+
   companion object {
     const val NAME = "ReactNavigationMaterialSymbolView"
   }