add examples, make loading async on Android

Author: okwasniewski

android/build.gradle

@@ -123,8 +123,6 @@ dependencies {
   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

@@ -1,5 +1,6 @@
 package com.rcttabview
 
+import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.ColorStateList
 import android.graphics.Typeface
@@ -16,9 +17,7 @@ import android.view.View
 import android.view.ViewGroup
 import android.widget.TextView
 import androidx.appcompat.content.res.AppCompatResources
-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
@@ -30,8 +29,6 @@ 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) {
@@ -73,6 +70,7 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
   override fun requestLayout() {
     super.requestLayout()
     @Suppress("SENSELESS_COMPARISON") // layoutCallback can be null here since this method can be called in init
+
     if (!isLayoutEnqueued && layoutCallback != null) {
       isLayoutEnqueued = true
       // we use NATIVE_ANIMATED_MODULE choreographer queue because it allows us to catch the current
@@ -106,7 +104,9 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
       val menuItem = getOrCreateItem(index, item.title)
       menuItem.isVisible = !item.hidden
       if (icons.containsKey(index)) {
-        menuItem.icon = getDrawable(icons[index]!!)
+        getDrawable(icons[index]!!)  {
+          menuItem.icon = it
+        }
       }
 
       if (item.badge.isNotEmpty()) {
@@ -154,7 +154,9 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
 
       // Update existing item if exists.
       menu.findItem(idx)?.let { menuItem ->
-        menuItem.icon = getDrawable(imageSource)
+        getDrawable(imageSource)  {
+          menuItem.icon = it
+        }
       }
     }
   }
@@ -173,38 +175,35 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     itemRippleColor = color
   }
 
-  private fun getDrawable(imageSource: ImageSource): Drawable? {
-    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
+  @SuppressLint("CheckResult")
+  private fun getDrawable(imageSource: ImageSource, onDrawableReady: (Drawable?) -> Unit) {
+    GlideApp.with(context)
+      .`as`(Drawable::class.java)
+      .load(imageSource.uri)
+      .listener(object : RequestListener<Drawable> {
+        override fun onLoadFailed(
+          e: GlideException?,
+          model: Any?,
+          target: Target<Drawable>,
+          isFirstResource: Boolean
+        ): Boolean {
+          Log.e("RCTTabView", "Error loading image: ${imageSource.uri}", e)
+          return false
         }
-      }
-    } catch (e: Exception) {
-      Log.e("ReactBottomNav", "Error loading image: $uri", e)
-      null
-    }
+
+        override fun onResourceReady(
+          resource: Drawable,
+          model: Any,
+          target: Target<Drawable>?,
+          dataSource: DataSource,
+          isFirstResource: Boolean
+        ): Boolean {
+          // Update images on the main queue.
+          post { onDrawableReady(resource) }
+          return true
+        }
+      })
+      .submit()
   }
 
   override fun onDetachedFromWindow() {

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

@@ -1,4 +1,4 @@
-package com.rcttabview
+package com.rcttabview.svg
 
 import com.bumptech.glide.load.Options
 import com.bumptech.glide.load.ResourceDecoder
@@ -9,24 +9,29 @@ 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
 
+  companion object {
+    const val DEFAULT_SIZE = 40f
+  }
+
   @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.
+      // Taken from https://github.com/expo/expo/blob/215d8a13a7ef3f0b36b14eead41291e2d2d6cd0c/packages/expo-image/android/src/main/java/expo/modules/image/svg/SVGDecoder.kt#L28
       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()
+
+      svg.documentWidth = DEFAULT_SIZE
+      svg.documentHeight = DEFAULT_SIZE
       SimpleResource(svg)
     } catch (ex: SVGParseException) {
       throw IOException("Cannot load SVG from stream", ex)

…c/main/java/com/rcttabview/SVGDecoder.kt …in/java/com/rcttabview/svg/SVGDecoder.ktandroid/src/main/java/com/rcttabview/SVGDecoder.kt renamed to android/src/main/java/com/rcttabview/svg/SVGDecoder.kt android/src/main/java/com/rcttabview/SVGDecoder.kt renamed to android/src/main/java/com/rcttabview/svg/SVGDecoder.kt

@@ -0,0 +1,32 @@
+package com.rcttabview.svg
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.graphics.drawable.BitmapDrawable
+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
+
+class SVGDrawableTranscoder(val context: Context) : ResourceTranscoder<SVG?, Drawable> {
+  override fun transcode(toTranscode: Resource<SVG?>, options: Options): Resource<Drawable> {
+    val svg = toTranscode.get()
+    val picture = svg.renderToPicture()
+    val drawable = PictureDrawable(picture)
+
+    val returnedBitmap = Bitmap.createBitmap(
+      drawable.intrinsicWidth,
+      drawable.intrinsicHeight,
+      Bitmap.Config.ARGB_8888
+    )
+
+    val canvas = Canvas(returnedBitmap)
+    canvas.drawPicture(drawable.picture)
+    val bitMapDrawable = BitmapDrawable(context.resources, returnedBitmap)
+    return SimpleResource(bitMapDrawable)
+  }
+}

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

@@ -1,4 +1,4 @@
-package com.rcttabview
+package com.rcttabview.svg
 
 import android.content.Context
 import android.graphics.drawable.Drawable