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

package/ReactNavigation.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "ReactNavigation"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = "Satyajit Sahoo <satyajit.happy@gmail.com> (https://github.com/satya164/), Michał Osadnik <micosa97@gmail.com> (https://github.com/osdnk/)"
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/react-navigation/react-navigation.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/android/build.gradle

@@ -0,0 +1,147 @@
+import groovy.json.JsonSlurper
+
+buildscript {
+  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 {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "org.reactnavigation"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+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 += layout.buildDirectory.dir("intermediates/react-navigation")
+
+preBuild.dependsOn(copyMaterialFonts)
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

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

@@ -0,0 +1,100 @@
+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
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableMap
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.launch
+import java.io.File
+import java.io.FileOutputStream
+import kotlin.math.roundToInt
+
+class MaterialSymbolModule(reactContext: ReactApplicationContext) :
+  NativeMaterialSymbolModuleSpec(reactContext) {
+
+  companion object {
+    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?, weight: Double?, size: Double, color: ReadableMap
+  ): String {
+    val colorValue = color.getDynamic("value").let {
+      when (it.type) {
+        com.facebook.react.bridge.ReadableType.Number -> it.asDouble()
+        com.facebook.react.bridge.ReadableType.Map -> it.asMap()
+        else -> null
+      }
+    }
+
+    val resolvedColor = ColorPropConverter.getColor(colorValue, reactApplicationContext)
+      ?: throw IllegalArgumentException("Could not resolve color")
+
+    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/$typefaceSuffix/$fontHash"
+    )
+
+    val cacheKey = "${name.hashCode()}_${scaledSize}_$resolvedColor"
+    val cacheFile = File(cacheDir, "$cacheKey.png")
+
+    if (cacheFile.exists()) {
+      return cacheFile.toUri().toString()
+    }
+
+    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 {
+      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

@@ -0,0 +1,77 @@
+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?, 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 {
+        Typeface.createFromAsset(context.assets, path)
+      } catch (e: Exception) {
+        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

@@ -0,0 +1,95 @@
+package org.reactnavigation
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Paint
+import android.util.AttributeSet
+
+class MaterialSymbolView @JvmOverloads constructor(
+  context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
+) : 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
+
+    paint.color = currentTextColor
+    paint.textAlign = Paint.Align.CENTER
+
+    val fontMetrics = paint.fontMetrics
+    val x = width / 2f
+    val y = (height - (fontMetrics.descent - fontMetrics.ascent)) / 2f - fontMetrics.ascent
+
+    canvas.drawText(text, x, y, paint)
+  }
+
+  fun setName(name: String?) {
+    text = name
+
+    invalidate()
+  }
+
+  fun setVariant(variant: String?) {
+    if (this.variant == variant) {
+      return
+    }
+
+    this.variant = 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?) {
+    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
+  }
+}

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

@@ -0,0 +1,49 @@
+package org.reactnavigation
+
+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>(),
+  ReactNavigationMaterialSymbolViewManagerInterface<MaterialSymbolView> {
+
+  override fun getName(): String {
+    return NAME
+  }
+
+  override fun createViewInstance(context: ThemedReactContext): MaterialSymbolView {
+    return MaterialSymbolView(context)
+  }
+
+  @ReactProp(name = "name")
+  override fun setName(view: MaterialSymbolView, name: String?) {
+    view.setName(name)
+  }
+
+  @ReactProp(name = "variant")
+  override fun setVariant(view: MaterialSymbolView, variant: String?) {
+    view.setVariant(variant)
+  }
+
+  @ReactProp(name = "weight")
+  override fun setWeight(view: MaterialSymbolView, weight: Int?) {
+    view.setWeight(weight)
+  }
+
+  @ReactProp(name = "size")
+  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

@@ -0,0 +1,34 @@
+package org.reactnavigation
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class ReactNavigationPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(MaterialSymbolViewManager())
+  }
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return when (name) {
+      MaterialSymbolModule.NAME -> MaterialSymbolModule(reactContext)
+      else -> null
+    }
+  }
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
+    mapOf(
+      MaterialSymbolModule.NAME to ReactModuleInfo(
+        name = MaterialSymbolModule.NAME,
+        className = MaterialSymbolModule.NAME,
+        canOverrideExistingModule = false,
+        needsEagerInit = false,
+        isCxxModule = false,
+        isTurboModule = true
+      )
+    )
+  }
+}