chore: support iconRenderingMode on Android

Author: thiagobrez

.changeset/calm-icons-preserve.md

@@ -3,4 +3,4 @@
 '@bottom-tabs/react-navigation': minor
 ---
 
-Add an iOS icon rendering mode option for preserving original colors of multicolor tab icons.
+Add an icon rendering mode option for preserving original colors of tab icons.

apps/example/src/Examples/OriginalIconColors.tsx

@@ -46,9 +46,6 @@ export default function OriginalIconColors() {
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}
-      experimental_bakedTintColors
-      tabBarActiveTintColor="blue"
-      tabBarInactiveTintColor="purple"
     />
   );
 }

docs/docs/docs/guides/standalone-usage.mdx

@@ -236,7 +236,7 @@ Each route in the `routes` array can have the following properties:
 - `title`: Display title for the tab
 - `focusedIcon`: Icon to show when tab is active
 - `unfocusedIcon`: Icon to show when tab is inactive (optional)
-- `iconRenderingMode`: Rendering mode for icons. Use `'alwaysOriginal'` on iOS to preserve multicolor icons instead of applying the native tab tint.
+- `iconRenderingMode`: Rendering mode for icons. Use `'alwaysOriginal'` to preserve multicolor icons instead of applying the native tab tint.
 - `badge`: Badge text to display on the tab
 - `activeTintColor`: Custom active tint color for this specific tab
 - `lazy`: Whether to lazy load this tab's content
@@ -281,14 +281,14 @@ Function to get the icon for a tab.
 
 - Default: Uses `route.focusedIcon` and `route.unfocusedIcon`
 
-#### `getIconRenderingMode` <Badge text="iOS" type="info" />
+#### `getIconRenderingMode`
 
 Function to get the rendering mode for an image icon.
 
 - Default: Uses `route.iconRenderingMode`
 - Options: `'automatic' | 'alwaysOriginal'`
 
-Use `alwaysOriginal` to preserve the original colors of multicolor image icons, such as logos or branded assets, instead of applying the native iOS tab tint.
+Use `alwaysOriginal` to preserve the original colors of multicolor image icons, such as logos or branded assets, instead of applying the native tab tint.
 
 #### `getHidden`
 

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -286,14 +286,14 @@ Function that given `{ focused: boolean }` returns `ImageSource` or `AppleIcon`
 SF Symbols are only supported on Apple platforms.
 :::
 
-#### `tabBarIconRenderingMode` <Badge text="iOS" type="info" />
+#### `tabBarIconRenderingMode`
 
 Rendering mode for image icons.
 
 - Type: `'automatic' | 'alwaysOriginal'`
 - Default: `'automatic'`
 
-Use `alwaysOriginal` to preserve the original colors of multicolor image icons, such as logos or branded assets, instead of applying the native iOS tab tint.
+Use `alwaysOriginal` to preserve the original colors of multicolor image icons, such as logos or branded assets, instead of applying the native tab tint.
 
 ```tsx
 <Tab.Screen
@@ -308,7 +308,7 @@ Use `alwaysOriginal` to preserve the original colors of multicolor image icons,
 
 :::warning
 
-Metro transformers that modify the import resolutions of images to something that is *not* React Native's `ImageSource` will break this. A notable community example of such is [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer).
+Metro transformers that modify the import resolutions of images to something that is _not_ React Native's `ImageSource` will break this. A notable community example of such is [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer).
 
 For best results, avoid the use of such transformers altogether.
 

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -4,6 +4,7 @@ import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.ColorStateList
 import android.content.res.Configuration
+import android.graphics.PorterDuff
 import android.graphics.drawable.ColorDrawable
 import android.graphics.drawable.Drawable
 import android.os.Build
@@ -19,6 +20,7 @@ import android.view.ViewGroup
 import android.widget.FrameLayout
 import android.widget.LinearLayout
 import android.widget.TextView
+import androidx.core.view.MenuItemCompat
 import androidx.core.view.forEachIndexed
 import coil3.ImageLoader
 import coil3.asDrawable
@@ -246,9 +248,11 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
       }
 
       menuItem.isVisible = !item.hidden
+      updateIconTintMode(menuItem, item)
       if (iconSources.containsKey(index)) {
         getDrawable(iconSources[index]!!) {
           menuItem.icon = it
+          updateIconTintMode(menuItem, item)
         }
       }
 
@@ -297,6 +301,13 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
     return bottomNavigation.menu.findItem(index) ?: bottomNavigation.menu.add(0, index, 0, title)
   }
 
+  private fun updateIconTintMode(menuItem: MenuItem, item: TabInfo) {
+    MenuItemCompat.setIconTintMode(
+      menuItem,
+      if (item.iconRenderingMode == "alwaysOriginal") PorterDuff.Mode.DST else null
+    )
+  }
+
   fun setIcons(icons: ReadableArray?) {
     if (icons == null || icons.size() == 0) {
       return
@@ -316,6 +327,9 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
       bottomNavigation.menu.findItem(idx)?.let { menuItem ->
         getDrawable(imageSource) {
           menuItem.icon = it
+          items.getOrNull(idx)?.let { item ->
+            updateIconTintMode(menuItem, item)
+          }
         }
       }
     }

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewManager.kt

@@ -24,6 +24,7 @@ data class TabInfo(
   val badgeBackgroundColor: Int?,
   val badgeTextColor: Int?,
   val activeTintColor: Int?,
+  val iconRenderingMode: String?,
   val hidden: Boolean,
   val testID: String?
 )
@@ -104,6 +105,7 @@ class RCTTabViewManager(context: ReactApplicationContext) :
                 badgeBackgroundColor = if (item.hasKey("badgeBackgroundColor")) item.getInt("badgeBackgroundColor") else null,
                 badgeTextColor = if (item.hasKey("badgeTextColor")) item.getInt("badgeTextColor") else null,
                 activeTintColor = if (item.hasKey("activeTintColor")) item.getInt("activeTintColor") else null,
+                iconRenderingMode = if (item.hasKey("iconRenderingMode")) item.getString("iconRenderingMode") else null,
                 hidden = if (item.hasKey("hidden")) item.getBoolean("hidden") else false,
                 testID = item.getString("testID")
               )

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -147,11 +147,9 @@ interface Props<Route extends BaseRoute> {
   }) => ImageSource | AppleIcon | undefined | null;
 
   /**
-   * Get the iOS rendering mode for the tab icon, uses `route.iconRenderingMode` by default.
+   * Get the rendering mode for the tab icon, uses `route.iconRenderingMode` by default.
    *
    * Use `alwaysOriginal` to preserve multicolor image icons instead of applying the native tab tint.
-   *
-   * @platform ios
    */
   getIconRenderingMode?: (props: {
     route: Route;

packages/react-navigation/src/types.ts

@@ -72,7 +72,7 @@ export type NativeBottomTabNavigationOptions = {
   tabBarIcon?: (props: { focused: boolean }) => ImageSourcePropType | AppleIcon;
 
   /**
-   * Rendering mode for the tab icon. Use `alwaysOriginal` on iOS to preserve multicolor image icons.
+   * Rendering mode for the tab icon. Use `alwaysOriginal` to preserve multicolor image icons.
    */
   tabBarIconRenderingMode?: IconRenderingMode;