wip: svg support

Author: okwasniewski

android/build.gradle

@@ -25,6 +25,7 @@ def isNewArchitectureEnabled() {
 
 apply plugin: "com.android.library"
 apply plugin: "kotlin-android"
+apply plugin: "kotlin-kapt"
 
 if (isNewArchitectureEnabled()) {
   apply plugin: "com.facebook.react"
@@ -110,12 +111,20 @@ repositories {
 def kotlin_version = getExtOrDefault("kotlinVersion")
 
 dependencies {
+  def GLIDE_VERSION = "4.16.0"
   // For < 0.71, this will be from the local maven repo
   // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
   implementation 'com.google.android.material:material:1.13.0-alpha06'
+
+  api "com.github.bumptech.glide:glide:${GLIDE_VERSION}"
+  kapt "com.github.bumptech.glide:compiler:${GLIDE_VERSION}"
+
+  api 'com.caverock:androidsvg-aar:1.4'
+//  implementation 'com.github.bumptech.glide:glide:4.15.1'
+//  implementation 'com.github.bumptech.glide:svg:4.15.1'
 }
 
 if (isNewArchitectureEnabled()) {

android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -7,6 +7,7 @@ import android.graphics.drawable.BitmapDrawable
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
 import android.os.Build
+import android.util.Log
 import android.util.TypedValue
 import android.view.Choreographer
 import android.view.HapticFeedbackConstants
@@ -15,11 +16,12 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
 import androidx.appcompat.content.res.AppCompatResources
-import com.facebook.common.references.CloseableReference
-import com.facebook.datasource.DataSources
-import com.facebook.drawee.backends.pipeline.Fresco
-import com.facebook.imagepipeline.image.CloseableBitmap
-import com.facebook.imagepipeline.request.ImageRequestBuilder
+import androidx.core.graphics.drawable.DrawableCompat
+import com.bumptech.glide.load.DataSource
+import com.bumptech.glide.load.DecodeFormat
+import com.bumptech.glide.load.engine.GlideException
+import com.bumptech.glide.request.RequestListener
+import com.bumptech.glide.request.target.Target
 import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.WritableMap
@@ -28,6 +30,8 @@ import com.facebook.react.modules.core.ReactChoreographer
 import com.facebook.react.views.imagehelper.ImageSource
 import com.facebook.react.views.text.ReactTypefaceUtils
 import com.google.android.material.bottomnavigation.BottomNavigationView
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.runBlocking
 
 
 class ReactBottomNavigationView(context: Context) : BottomNavigationView(context) {
@@ -170,21 +174,37 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
   }
 
   private fun getDrawable(imageSource: ImageSource): Drawable? {
-    try {
-      val imageRequest = ImageRequestBuilder.newBuilderWithSource(imageSource.uri).build()
-      val dataSource = Fresco.getImagePipeline().fetchDecodedImage(imageRequest, context)
-      val result = DataSources.waitForFinalResult(dataSource) as CloseableReference<CloseableBitmap>
-      val bitmap = result.get().underlyingBitmap
-
-      CloseableReference.closeSafely(result)
-      dataSource.close()
-
-      return BitmapDrawable(resources, bitmap)
-    } catch (_: Exception) {
-      // Asset doesn't exist
+    val uri = imageSource.uri.toString()
+    val isSvg = uri.contains(".svg", ignoreCase = true)
+    Log.d("ReactBottomNav", "Loading image: $uri, isSvg: $isSvg")
+
+    return try {
+      runBlocking(Dispatchers.IO) {
+        val drawable = GlideApp.with(context)
+          .`as`(Drawable::class.java)
+          .load(imageSource.uri)
+          .apply {
+            if (isSvg) {
+              override(200, 200)
+            }
+          }
+          .submit()
+          .get()
+
+        // Make the drawable tintable
+        if (isSvg && drawable != null) {
+          DrawableCompat.wrap(drawable.mutate()).apply {
+            DrawableCompat.setTintList(this, null) // Clear any existing tint
+            alpha = 255
+          }
+        } else {
+          drawable
+        }
+      }
+    } catch (e: Exception) {
+      Log.e("ReactBottomNav", "Error loading image: $uri", e)
+      null
     }
-
-    return null
   }
 
   override fun onDetachedFromWindow() {

android/src/main/java/com/rcttabview/SVGDecoder.kt

@@ -0,0 +1,35 @@
+package com.rcttabview
+
+import com.bumptech.glide.load.Options
+import com.bumptech.glide.load.ResourceDecoder
+import com.bumptech.glide.load.engine.Resource
+import com.bumptech.glide.load.resource.SimpleResource
+import com.caverock.androidsvg.SVG
+import com.caverock.androidsvg.SVGParseException
+import java.io.IOException
+import java.io.InputStream
+
+class SVGDecoder : ResourceDecoder<InputStream, SVG> {
+  override fun handles(source: InputStream, options: Options) = true
+
+  @Throws(IOException::class)
+  override fun decode(source: InputStream, width: Int, height: Int, options: Options): Resource<SVG>? {
+    return try {
+      val svg: SVG = SVG.getFromInputStream(source)
+      // Use document width and height if view box is not set.
+      // Later, we will override the document width and height with the dimensions of the native view.
+      if (svg.documentViewBox == null) {
+        val documentWidth = svg.documentWidth
+        val documentHeight = svg.documentHeight
+        if (documentWidth != -1f && documentHeight != -1f) {
+          svg.setDocumentViewBox(0f, 0f, documentWidth, documentHeight)
+        }
+      }
+      svg.documentWidth = width.toFloat()
+      svg.documentHeight = height.toFloat()
+      SimpleResource(svg)
+    } catch (ex: SVGParseException) {
+      throw IOException("Cannot load SVG from stream", ex)
+    }
+  }
+}

android/src/main/java/com/rcttabview/SVGDrawableTranscoder.kt

@@ -0,0 +1,44 @@
+package com.rcttabview
+
+import android.content.Context
+import android.graphics.Picture
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.PictureDrawable
+import com.bumptech.glide.load.Options
+import com.bumptech.glide.load.engine.Resource
+import com.bumptech.glide.load.resource.SimpleResource
+import com.bumptech.glide.load.resource.transcode.ResourceTranscoder
+import com.caverock.androidsvg.SVG
+
+/**
+ * We have to use the intrinsicWidth/Height from the Picture to render the image at a high enough resolution, but at the same time we want to return the actual
+ * preferred width and height of the SVG to JS. This class allows us to do that.
+ */
+class SVGPictureDrawable(picture: Picture, val svgIntrinsicWidth: Int, val svgIntrinsicHeight: Int) : PictureDrawable(picture)
+
+
+
+/**
+ * Convert the [SVG]'s internal representation to an Android-compatible one ([Picture]).
+ *
+ * Copied from https://github.com/bumptech/glide/blob/10acc31a16b4c1b5684f69e8de3117371dfa77a8/samples/svg/src/main/java/com/bumptech/glide/samples/svg/SvgDrawableTranscoder.java
+ * and rewritten to Kotlin.
+ */
+class SVGDrawableTranscoder(val context: Context) : ResourceTranscoder<SVG?, Drawable> {
+  override fun transcode(toTranscode: Resource<SVG?>, options: Options): Resource<Drawable> {
+    val svgData = toTranscode.get()
+    // If the svg doesn't have a viewBox, we can't determine its intrinsic width and height, so we default to 512x512.
+    // Same dimensions are used in the AndroidSVG library when the viewBox is not set.
+    val intrinsicWidth = svgData.documentViewBox?.width()?.toInt() ?: 512
+    val intrinsicHeight = svgData.documentViewBox?.height()?.toInt() ?: 512
+
+    val picture = SVGPictureDrawable(
+      svgData.renderToPicture(),
+      intrinsicWidth,
+      intrinsicHeight
+    )
+    return SimpleResource(
+      picture
+    )
+  }
+}

android/src/main/java/com/rcttabview/TabViewAppGlideModule.kt

@@ -0,0 +1,18 @@
+package com.rcttabview
+
+import android.content.Context
+import android.util.Log
+import com.bumptech.glide.GlideBuilder
+import com.bumptech.glide.annotation.GlideModule
+import com.bumptech.glide.module.AppGlideModule
+
+@GlideModule
+class TabViewAppGlideModule : AppGlideModule() {
+  override fun applyOptions(context: Context, builder: GlideBuilder) {
+    super.applyOptions(context, builder)
+
+    builder.setLogLevel(
+        Log.ERROR
+    )
+  }
+}

android/src/main/java/com/rcttabview/TabViewGlideModule.kt

@@ -0,0 +1,25 @@
+package com.rcttabview
+
+import android.content.Context
+import android.graphics.drawable.Drawable
+import com.bumptech.glide.Glide
+import com.bumptech.glide.Registry
+import com.bumptech.glide.annotation.GlideModule
+import com.bumptech.glide.module.LibraryGlideModule
+import com.caverock.androidsvg.SVG
+import java.io.InputStream
+
+
+@GlideModule
+class SvgModule: LibraryGlideModule() {
+  override fun registerComponents(
+    context: Context, glide: Glide, registry: Registry
+  ) {
+    registry
+      .register(
+        SVG::class.java,
+        Drawable::class.java, SVGDrawableTranscoder(context)
+      )
+      .append(InputStream::class.java, SVG::class.java, SVGDecoder())
+  }
+}

example/assets/setttings.svg

@@ -1 +1 @@
-export NODE_BINARY='/opt/homebrew/bin/node'
+export NODE_BINARY='/Users/okwasniewski/.nvm/versions/node/v20.15.1/bin/node'

example/ios/.xcode.env

@@ -6,4 +6,8 @@ require "#{ws_dir}/node_modules/react-native-test-app/test_app.rb"
 
 workspace 'ReactNativeBottomTabsExample.xcworkspace'
 
-use_test_app!
+use_frameworks! :linkage => :static
+
+use_test_app! do |test_app|
+end
+