feat: implement custom image handling on Android

Author: okwasniewski

Diff for: android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -1,15 +1,28 @@
 package com.rcttabview
 
+import android.annotation.SuppressLint
 import android.content.Context
+import android.graphics.drawable.BitmapDrawable
+import android.graphics.drawable.Drawable
+import android.net.Uri
 import android.view.Choreographer
 import android.view.MenuItem
-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 com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.WritableMap
+import com.facebook.react.views.imagehelper.ImageSource
+import com.facebook.react.views.imagehelper.ImageSource.Companion.getTransparentBitmapImageSource
 import com.google.android.material.bottomnavigation.BottomNavigationView
 
+
 class ReactBottomNavigationView(context: Context) : BottomNavigationView(context) {
   private val ANIMATION_DURATION: Long = 300
+  private val icons: MutableMap<Int, ImageSource> = mutableMapOf()
 
   var items: MutableList<TabInfo>? = null
   var onTabSelectedListener: ((WritableMap) -> Unit)? = null
@@ -62,17 +75,10 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
 
   fun updateItems(items: MutableList<TabInfo>) {
     this.items = items
-    // TODO: This doesn't work with hot reload. It clears all menu items
-    menu.clear()
     items.forEachIndexed {index, item ->
-      val menuItem = menu.add(0, index, 0, item.title)
-      val iconResourceId = resources.getIdentifier(
-        item.icon, "drawable", context.packageName
-      )
-      if (iconResourceId != 0) {
-        menuItem.icon = AppCompatResources.getDrawable(context, iconResourceId)
-      } else {
-        menuItem.setIcon(android.R.drawable.btn_star) // fallback icon
+      val menuItem = getOrCreateItem(index, item.title)
+      if (icons.containsKey(index)) {
+        menuItem.icon = getDrawable(icons[index]!!)
       }
       if (item.badge.isNotEmpty()) {
         val badge = this.getOrCreateBadge(index)
@@ -84,6 +90,48 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
     }
   }
 
+  private fun getOrCreateItem(index: Int, title: String): MenuItem {
+    return menu.findItem(index) ?: menu.add(0, index, 0, title)
+  }
+
+  fun setIcons(icons: ReadableArray?) {
+    if (icons == null || icons.size() == 0) {
+      return
+    }
+
+    for (idx in 0 until icons.size()) {
+      val source = icons.getMap(idx)
+      var imageSource =
+        ImageSource(
+          context,
+          source.getString("uri"),
+          source.getDouble("width"),
+          source.getDouble("height"))
+      if (Uri.EMPTY == imageSource.uri) {
+        imageSource = getTransparentBitmapImageSource(context)
+      }
+      this.icons[idx] = imageSource
+
+      // Update existing item if exists.
+      menu.findItem(idx)?.let { menuItem ->
+        menuItem.icon = getDrawable(imageSource)
+      }
+    }
+  }
+
+  @SuppressLint("UseCompatLoadingForDrawables")
+  private fun getDrawable(imageSource: ImageSource): Drawable {
+    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)
+  }
+
   // Fixes issues with BottomNavigationView children layouting.
   private fun measureAndLayout() {
       measure(

Diff for: android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt

@@ -18,7 +18,6 @@ import com.facebook.yoga.YogaNode
 
 data class TabInfo(
   val key: String,
-  val icon: String,
   val title: String,
   val badge: String
 )
@@ -40,7 +39,6 @@ class RCTTabViewViewManager :
           itemsArray.add(
             TabInfo(
               key = item.getString("key") ?: "",
-              icon = item.getString("icon") ?: "",
               title = item.getString("title") ?: "",
               badge = item.getString("badge") ?: ""
             )
@@ -57,6 +55,11 @@ class RCTTabViewViewManager :
     }
   }
 
+  @ReactProp(name = "icons")
+  fun setIcons(view: ReactBottomNavigationView, icons: ReadableArray?) {
+    view.setIcons(icons)
+  }
+
   public override fun createViewInstance(context: ThemedReactContext): ReactBottomNavigationView {
     eventDispatcher = context.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     val view = ReactBottomNavigationView(context)

Diff for: example/src/Examples/MaterialBottomTabs.tsx

@@ -30,9 +30,7 @@ function MaterialBottomTabs() {
         component={Albums}
         options={{
           tabBarIcon: () => (
-            <TabBarIcon
-              source={require('../../assets/icons/article_dark.png')}
-            />
+            <TabBarIcon source={require('../../assets/icons/grid_dark.png')} />
           ),
         }}
       />
@@ -42,7 +40,7 @@ function MaterialBottomTabs() {
         options={{
           tabBarIcon: () => (
             <TabBarIcon
-              source={require('../../assets/icons/article_dark.png')}
+              source={require('../../assets/icons/person_dark.png')}
             />
           ),
         }}
@@ -52,9 +50,7 @@ function MaterialBottomTabs() {
         component={Chat}
         options={{
           tabBarIcon: () => (
-            <TabBarIcon
-              source={require('../../assets/icons/article_dark.png')}
-            />
+            <TabBarIcon source={require('../../assets/icons/chat_dark.png')} />
           ),
         }}
       />

Diff for: example/src/Examples/ThreeTabs.tsx

@@ -7,14 +7,24 @@ import { Contacts } from '../Screens/Contacts';
 export default function ThreeTabs() {
   const [index, setIndex] = useState(0);
   const [routes] = useState([
-    { key: 'article', title: 'Article', icon: 'document.fill', badge: '!' },
+    {
+      key: 'article',
+      title: 'Article',
+      focusedIcon: require('../../assets/icons/article.png'),
+      unfocusedIcon: require('../../assets/icons/chat.png'),
+      badge: '!',
+    },
     {
       key: 'albums',
       title: 'Albums',
-      icon: 'square.grid.2x2.fill',
+      focusedIcon: require('../../assets/icons/grid.png'),
       badge: '5',
     },
-    { key: 'contacts', title: 'Contacts', icon: 'person.fill' },
+    {
+      key: 'contacts',
+      focusedIcon: require('../../assets/icons/person.png'),
+      title: 'Contacts',
+    },
   ]);
 
   const renderScene = SceneMap({