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

package/android/build.gradle

@@ -1,6 +1,19 @@
+import groovy.json.JsonSlurper
+
 buildscript {
-  ext.getExtOrDefault = {name ->
-    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['ReactNavigation_' + name]
+  ext.ReactNavigation = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return ReactNavigation[prop]
   }
 
   repositories {
@@ -21,18 +34,14 @@ apply plugin: "kotlin-android"
 
 apply plugin: "com.facebook.react"
 
-def getExtOrIntegerDefault(name) {
-  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["ReactNavigation_" + name]).toInteger()
-}
-
 android {
   namespace "org.reactnavigation"
 
-  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
 
   defaultConfig {
-    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
-    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
   }
 
   buildTypes {
@@ -51,15 +60,87 @@ android {
   }
 }
 
-task copyAssets(type: Copy) {
-  from "../assets/fonts"
-  include "*.ttf"
-  into "${buildDir}/intermediates/react-navigation/fonts"
+tasks.register('copyMaterialFonts', Copy) {
+  def packageJsonFile = file(rootDir.path + "/../package.json")
+  def fontsConfig = null
+
+  if (packageJsonFile.exists()) {
+    def packageJson = new JsonSlurper().parse(packageJsonFile)
+
+    fontsConfig = packageJson["react-navigation"]?.get("material-symbols")?.get("fonts")
+  }
+
+  fontsConfig = fontsConfig != null ? fontsConfig : [[variant: "outlined", weights: [400]]]
+
+  def assetsFontsDir = file("../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()
+  def validWeights = availableFonts.collect { it.split('_')[1] as int }.unique().sort()
+
+  def errors = [] as Set
+
+  fontsConfig.each { font ->
+    if (font.variant && !validVariants.contains(font.variant.toLowerCase())) {
+      errors << "Invalid font variant: ${font.variant}"
+    }
+
+    font.weights.each { weight ->
+      if (!validWeights.contains(weight)) {
+        errors << "Invalid font weight: ${weight}"
+      }
+    }
+  }
+
+  if (errors) {
+    throw new GradleException(
+      errors.join("\n") + "\n\nAvailable variants: ${validVariants.join(", ")}.\nAvailable weights: ${validWeights.join(", ")}."
+    )
+  }
+
+  def fontFiles = fontsConfig.collectMany { font ->
+    def variant = font.variant?.capitalize() ?: ""
+
+    font.weights.collect { weight -> "MaterialSymbols${variant}_${weight}.ttf" }
+  }
+
+  if (fontFiles) {
+    from(assetsFontsDir) { include fontFiles }
+  }
+
+  into layout.buildDirectory.dir("intermediates/react-navigation/fonts")
+
+  doFirst {
+    if (destinationDir.exists()) {
+      def extraFiles = destinationDir.listFiles()?.findAll { file -> !fontFiles.contains(file.name) }
+
+      extraFiles?.each { file -> file.delete() }
+    }
+  }
+
+  doLast {
+    def digest = java.security.MessageDigest.getInstance("MD5")
+
+    fontFiles.sort().each { name ->
+      def fontFile = new File(assetsFontsDir, name)
+
+      if (fontFile.exists()) {
+        digest.update(fontFile.bytes)
+      }
+    }
+
+    def hash = digest.digest().encodeHex().toString().take(8)
+    def hashFile = new File(destinationDir, "MaterialSymbols.hash")
+
+    hashFile.text = hash
+  }
 }
 
-android.sourceSets.main.assets.srcDirs += file("${buildDir}/intermediates/react-navigation")
+android.sourceSets.main.assets.srcDirs += layout.buildDirectory.dir("intermediates/react-navigation")
 
-preBuild.dependsOn(copyAssets)
+preBuild.dependsOn(copyMaterialFonts)
 
 dependencies {
   implementation "com.facebook.react:react-android"

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

@@ -3,6 +3,7 @@ package org.reactnavigation
 import android.graphics.Bitmap
 import android.graphics.Canvas
 import android.graphics.Paint
+import androidx.core.graphics.createBitmap
 import androidx.core.net.toUri
 import com.facebook.fbreact.specs.NativeMaterialSymbolModuleSpec
 import com.facebook.react.bridge.ColorPropConverter
@@ -14,23 +15,24 @@ import kotlinx.coroutines.SupervisorJob
 import kotlinx.coroutines.launch
 import java.io.File
 import java.io.FileOutputStream
-import java.util.concurrent.Callable
-import java.util.concurrent.ConcurrentHashMap
-import java.util.concurrent.Executors
-import java.util.concurrent.Future
 import kotlin.math.roundToInt
 
 class MaterialSymbolModule(reactContext: ReactApplicationContext) :
   NativeMaterialSymbolModuleSpec(reactContext) {
 
   companion object {
-    private val executor = Executors.newCachedThreadPool()
-    private val futures = ConcurrentHashMap<String, Future<String>>()
+    const val NAME = NativeMaterialSymbolModuleSpec.NAME
+
     private val scope = CoroutineScope(Dispatchers.IO + SupervisorJob())
   }
 
+  private val fontHash: String by lazy {
+    reactApplicationContext.assets.open("fonts/MaterialSymbols.hash").bufferedReader().readText()
+      .trim()
+  }
+
   override fun getImageSource(
-    name: String, variant: String, size: Double, color: ReadableMap, hash: String
+    name: String, variant: String?, weight: Double?, size: Double, color: ReadableMap
   ): String {
     val colorValue = color.getDynamic("value").let {
       when (it.type) {
@@ -46,8 +48,13 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
     val density = reactApplicationContext.resources.displayMetrics.density
     val scaledSize = (size * density).roundToInt().coerceAtLeast(1)
 
+    val (resolvedTypeface, typefaceSuffix) = MaterialSymbolTypeface.get(
+      reactApplicationContext, variant, weight?.toInt()
+    )
+
     val cacheDir = File(
-      reactApplicationContext.cacheDir, "react_navigation/material_symbols/$variant/$hash"
+      reactApplicationContext.cacheDir,
+      "react_navigation/material_symbols/$typefaceSuffix/$fontHash"
     )
 
     val cacheKey = "${name.hashCode()}_${scaledSize}_$resolvedColor"
@@ -57,55 +64,37 @@ class MaterialSymbolModule(reactContext: ReactApplicationContext) :
       return cacheFile.toUri().toString()
     }
 
-    val future = futures.computeIfAbsent(cacheKey) {
-      executor.submit(
-        Callable {
-          try {
-            scope.launch {
-              cacheDir.parentFile?.listFiles { it.isDirectory && it.name != hash }
-                ?.forEach { it.deleteRecursively() }
-            }
-
-            cacheDir.mkdirs()
-
-            val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
-              typeface = MaterialSymbolTypeface.get(reactApplicationContext, variant)
-              textSize = scaledSize.toFloat()
-              textAlign = Paint.Align.CENTER
-
-              this.color = resolvedColor
-            }
-
-            val fontMetrics = paint.fontMetrics
-            val bitmap = Bitmap.createBitmap(scaledSize, scaledSize, Bitmap.Config.ARGB_8888)
-
-            try {
-              val canvas = Canvas(bitmap)
-              val y =
-                (scaledSize - (fontMetrics.descent - fontMetrics.ascent)) / 2f - fontMetrics.ascent
-
-              canvas.drawText(name, scaledSize / 2f, y, paint)
-
-              FileOutputStream(cacheFile).use {
-                bitmap.compress(Bitmap.CompressFormat.PNG, 100, it)
-              }
-            } finally {
-              bitmap.recycle()
-            }
-
-            return@Callable cacheFile.toUri().toString()
-          } catch (e: Exception) {
-            futures.remove(cacheKey)
-
-            throw e
-          }
-        })
+    scope.launch {
+      cacheDir.parentFile?.listFiles { it.isDirectory && it.name != fontHash }
+        ?.forEach { it.deleteRecursively() }
+    }
+
+    cacheDir.mkdirs()
+
+    val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+      typeface = resolvedTypeface
+      textSize = scaledSize.toFloat()
+      textAlign = Paint.Align.CENTER
+
+      this.color = resolvedColor
     }
 
+    val fontMetrics = paint.fontMetrics
+    val bitmap = createBitmap(scaledSize, scaledSize)
+
     try {
-      return future.get()
-    } catch (e: Exception) {
-      throw (e.cause as? Exception) ?: e
+      val canvas = Canvas(bitmap)
+      val y = (scaledSize - (fontMetrics.descent - fontMetrics.ascent)) / 2f - fontMetrics.ascent
+
+      canvas.drawText(name, scaledSize / 2f, y, paint)
+
+      FileOutputStream(cacheFile).use {
+        bitmap.compress(Bitmap.CompressFormat.PNG, 100, it)
+      }
+    } finally {
+      bitmap.recycle()
     }
+
+    return cacheFile.toUri().toString()
   }
 }

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

@@ -3,17 +3,26 @@ package org.reactnavigation
 import android.content.Context
 import android.graphics.Typeface
 
+data class MaterialSymbolTypefaceResult(val typeface: Typeface, val suffix: String)
+
 object MaterialSymbolTypeface {
   private val typefaces = mutableMapOf<String, Typeface>()
+  private var defaultSuffix: String? = null
 
-  fun get(context: Context, variant: String?): Typeface {
-    return typefaces.getOrPut(variant ?: "outlined") {
-      val suffix = when (variant) {
+  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"
       }
 
+      "${resolvedVariant}_$weight"
+    } else {
+      getDefaultSuffix(context)
+    }
+
+    val typeface = typefaces.getOrPut(suffix) {
       val path = "fonts/MaterialSymbols${suffix}.ttf"
 
       try {
@@ -22,5 +31,47 @@ object MaterialSymbolTypeface {
         throw RuntimeException("$path not found.", e)
       }
     }
+
+    return MaterialSymbolTypefaceResult(typeface, suffix)
+  }
+
+  private fun getDefaultSuffix(context: Context): String {
+    defaultSuffix?.let { return it }
+
+    val fonts = context.assets.list("fonts")
+      ?.filter { it.startsWith("MaterialSymbols") && it.endsWith(".ttf") } ?: emptyList()
+
+    if (fonts.isEmpty()) {
+      throw RuntimeException("No MaterialSymbols font found in assets.")
+    }
+
+    if (fonts.size > 1) {
+      val outlinedFonts = fonts.filter { it.startsWith("MaterialSymbolsOutlined") }
+      val outlinedFont = when {
+        outlinedFonts.isEmpty() -> null
+        outlinedFonts.size == 1 -> outlinedFonts[0]
+        else -> outlinedFonts.firstOrNull {
+          it.removePrefix("MaterialSymbols").removeSuffix(".ttf") == "Outlined_400"
+        }
+      }
+
+      if (outlinedFont == null) {
+        throw RuntimeException(
+          "Multiple MaterialSymbols fonts found in assets: ${fonts.joinToString()}. " + "Please specify a variant and weight explicitly."
+        )
+      }
+
+      val outlinedSuffix = outlinedFont.removePrefix("MaterialSymbols").removeSuffix(".ttf")
+
+      defaultSuffix = outlinedSuffix
+
+      return outlinedSuffix
+    }
+
+    val suffix = fonts[0].removePrefix("MaterialSymbols").removeSuffix(".ttf")
+
+    defaultSuffix = suffix
+
+    return suffix
   }
 }

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

@@ -4,13 +4,18 @@ import android.content.Context
 import android.graphics.Canvas
 import android.graphics.Paint
 import android.util.AttributeSet
-import android.widget.TextView
 
 class MaterialSymbolView @JvmOverloads constructor(
   context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
-) : TextView(context, attrs, defStyleAttr) {
+) : androidx.appcompat.widget.AppCompatTextView(context, attrs, defStyleAttr) {
 
   private var variant: String? = null
+  private var weight: Int? = null
+
+  init {
+    setColor(null)
+    updateTypeface()
+  }
 
   override fun onDraw(canvas: Canvas) {
     val text = text?.toString() ?: return
@@ -25,23 +30,63 @@ class MaterialSymbolView @JvmOverloads constructor(
     canvas.drawText(text, x, y, paint)
   }
 
-  fun setName(name: String) {
+  fun setName(name: String?) {
     text = name
+
+    invalidate()
   }
 
-  fun setVariant(variant: String) {
+  fun setVariant(variant: String?) {
     if (this.variant == variant) {
       return
     }
 
     this.variant = variant
 
-    setTypeface(MaterialSymbolTypeface.get(context, variant))
+    updateTypeface()
+  }
+
+  fun setWeight(weight: Int?) {
+    if (this.weight == weight) {
+      return
+    }
+
+    this.weight = weight
+
+    updateTypeface()
+  }
+
+  private fun updateTypeface() {
+    setTypeface(
+      MaterialSymbolTypeface.get(
+        context,
+        variant?.ifEmpty { null },
+        weight.takeIf { it != 0 }).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) {

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,30 @@ 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 = "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)
+  }
+
   companion object {
     const val NAME = "ReactNavigationMaterialSymbolView"
   }

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

@@ -1,6 +1,5 @@
 package org.reactnavigation
 
-import com.facebook.fbreact.specs.NativeMaterialSymbolModuleSpec
 import com.facebook.react.BaseReactPackage
 import com.facebook.react.bridge.NativeModule
 import com.facebook.react.bridge.ReactApplicationContext
@@ -15,23 +14,21 @@ class ReactNavigationPackage : BaseReactPackage() {
 
   override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
     return when (name) {
-      NativeMaterialSymbolModuleSpec.NAME -> MaterialSymbolModule(reactContext)
+      MaterialSymbolModule.NAME -> MaterialSymbolModule(reactContext)
       else -> null
     }
   }
 
-  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
-    return ReactModuleInfoProvider {
-      mapOf(
-        NativeMaterialSymbolModuleSpec.NAME to ReactModuleInfo(
-          NativeMaterialSymbolModuleSpec.NAME,
-          MaterialSymbolModule::class.java.name,
-          false, // canOverrideExistingModule
-          false, // needsEagerInit
-          false, // isCxxModule
-          true // isTurboModule
-        )
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
+    mapOf(
+      MaterialSymbolModule.NAME to ReactModuleInfo(
+        name = MaterialSymbolModule.NAME,
+        className = MaterialSymbolModule.NAME,
+        canOverrideExistingModule = false,
+        needsEagerInit = false,
+        isCxxModule = false,
+        isTurboModule = true
       )
-    }
+    )
   }
 }

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;
 }