refactor(Tabs): Refactor APIs for icons (#3214)

t0maboro · kligarski · web-flow · commit 3a588b102346 · 2025-10-17T11:59:25.000+02:00
## Description This PR refactors the way icon resources are passed into components by merging platform-specific props into a single unified icon configuration structure. Previously, icons were defined using 3–4 separate props depending on the platform, which led to inconsistency and potential conflicts. Now, the icon is defined using a single object: ```js { android?: PlatformIconAndroid; ios?: PlatformIconIOS; shared?: PlatformIconShared; } ``` Platform-specific types (`PlatformIconAndroid`, `PlatformIconIOS`, `PlatformIconShared`) are used to define supported icon formats and sources per platform. Note: This PR introduces a new approach to handling SVGs on Android. In #3216, I've started migrating to the Fresco image loading library, which unfortunately does not support SVGs directly. As a result, SVG support will now be provided exclusively through the `drawableResourceAndroid` type. ⚠️ This is a breaking change that may affect developers currently using SVGs via remote URLs or external icon props. Please make sure to update your code accordingly to avoid runtime issues. ## Changes - Updated types for `icon` prop. - Added logic for resolving props internally on Android and adapted the current logic for iOS. - Updated examples to use new APIs. ## Test code and steps to reproduce Verified that the updated `TestBottomTabs` example is showing icons as expected. <img width="590" height="1301" alt="Screenshot 2025-09-15 at 19 30 32" src="https://github.com/user-attachments/assets/b1a1eb8b-babd-4a55-a2fb-2964ade978b0" /> ## Checklist - [x] Included code example that can be used to test this change - [x] Ensured that CI passes --------- Co-authored-by: kligarski <63918941+kligarski@users.noreply.github.com>
diff --git a/Example/android/app/src/main/res/drawable/custom_home_icon.xml b/Example/android/app/src/main/res/drawable/custom_home_icon.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="512dp"
+    android:height="512dp"
+    android:viewportWidth="512"
+    android:viewportHeight="512">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M490.13,185.47L338.97,34.3c-45.85,-45.74 -120.08,-45.74 -165.93,0L21.87,185.47C7.82,199.45 -0.05,218.46 0,238.27v221.4C0.05,488.57 23.48,511.98 52.37,512h407.25c28.9,-0.02 52.33,-23.43 52.37,-52.33V238.27C512.06,218.46 504.18,199.45 490.13,185.47zM448,448H341.33v-67.88c0,-44.98 -36.47,-81.45 -81.45,-81.45c0,0 0,0 0,0h-7.76c-44.98,0 -81.45,36.47 -81.45,81.45l0,0V448H64V238.27c0.01,-2.83 1.13,-5.54 3.12,-7.55L218.28,79.55c20.83,-20.83 54.59,-20.83 75.43,-0.01c0,0 0.01,0.01 0.01,0.01L444.89,230.72c1.99,2.01 3.11,4.72 3.12,7.55V448z"/>
+</vector>
diff --git a/FabricExample/android/app/src/main/res/drawable/custom_home_icon.xml b/FabricExample/android/app/src/main/res/drawable/custom_home_icon.xml
@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="512dp"
+    android:height="512dp"
+    android:viewportWidth="512"
+    android:viewportHeight="512">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M490.13,185.47L338.97,34.3c-45.85,-45.74 -120.08,-45.74 -165.93,0L21.87,185.47C7.82,199.45 -0.05,218.46 0,238.27v221.4C0.05,488.57 23.48,511.98 52.37,512h407.25c28.9,-0.02 52.33,-23.43 52.37,-52.33V238.27C512.06,218.46 504.18,199.45 490.13,185.47zM448,448H341.33v-67.88c0,-44.98 -36.47,-81.45 -81.45,-81.45c0,0 0,0 0,0h-7.76c-44.98,0 -81.45,36.47 -81.45,81.45l0,0V448H64V238.27c0.01,-2.83 1.13,-5.54 3.12,-7.55L218.28,79.55c20.83,-20.83 54.59,-20.83 75.43,-0.01c0,0 0.01,0.01 0.01,0.01L444.89,230.72c1.99,2.01 3.11,4.72 3.12,7.55V448z"/>
+</vector>
diff --git a/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreen.kt b/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreen.kt
@@ -58,7 +58,7 @@ class TabScreen(
     }
 
     // Icon
-    var iconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
+    var drawableIconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
         if (newValue != oldValue) {
             icon = getSystemDrawableResource(reactContext, newValue)
         }
diff --git a/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreenViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreenViewManager.kt
@@ -167,12 +167,12 @@ class TabScreenViewManager :
         view.tabBarItemBadgeTextColor = value
     }
 
-    @ReactProp(name = "iconResourceName")
-    override fun setIconResourceName(
+    @ReactProp(name = "drawableIconResourceName")
+    override fun setDrawableIconResourceName(
         view: TabScreen,
         value: String?,
     ) {
-        view.iconResourceName = value
+        view.drawableIconResourceName = value
     }
 
     override fun setOrientation(
@@ -185,8 +185,8 @@ class TabScreenViewManager :
         value: String?,
     ) = Unit
 
-    @ReactProp(name = "iconResource")
-    override fun setIconResource(
+    @ReactProp(name = "imageIconResource")
+    override fun setImageIconResource(
         view: TabScreen,
         value: ReadableMap?,
     ) {
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerDelegate.java
@@ -41,11 +41,11 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "orientation":
         mViewManager.setOrientation(view, (String) value);
         break;
-      case "iconResourceName":
-        mViewManager.setIconResourceName(view, value == null ? null : (String) value);
+      case "drawableIconResourceName":
+        mViewManager.setDrawableIconResourceName(view, value == null ? null : (String) value);
         break;
-      case "iconResource":
-        mViewManager.setIconResource(view, (ReadableMap) value);
+      case "imageIconResource":
+        mViewManager.setImageIconResource(view, (ReadableMap) value);
         break;
       case "tabBarItemBadgeTextColor":
         mViewManager.setTabBarItemBadgeTextColor(view, ColorPropConverter.getColor(value, view.getContext()));
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerInterface.java
@@ -21,8 +21,8 @@ public interface RNSBottomTabsScreenManagerInterface<T extends View>  {
   void setTitle(T view, @Nullable String value);
   void setBadgeValue(T view, @Nullable String value);
   void setOrientation(T view, @Nullable String value);
-  void setIconResourceName(T view, @Nullable String value);
-  void setIconResource(T view, @Nullable ReadableMap value);
+  void setDrawableIconResourceName(T view, @Nullable String value);
+  void setImageIconResource(T view, @Nullable ReadableMap value);
   void setTabBarItemBadgeTextColor(T view, @Nullable Integer value);
   void setTabBarItemBadgeBackgroundColor(T view, @Nullable Integer value);
   void setStandardAppearance(T view, Dynamic value);
diff --git a/apps/src/tests/Test3115.tsx b/apps/src/tests/Test3115.tsx
@@ -50,9 +50,15 @@ const TAB_CONFIGS: TabConfiguration[] = [
       title: 'Tab 1',
       freezeContents: false,
       icon: {
-        sfSymbolName: 'sun.max',
+        ios: {
+          type: 'sfSymbol',
+          name: 'sun.max'
+        },
+        android: {
+          type: 'drawableResource',
+          name: 'sunny',
+        }
       },
-      iconResourceName: 'sunny',
     },
     component: makeTab('Tab 1'),
   },
@@ -61,9 +67,15 @@ const TAB_CONFIGS: TabConfiguration[] = [
       tabKey: 'Tab2',
       title: 'Tab 2',
       icon: {
-        sfSymbolName: 'snow',
+        ios: {
+          type: 'sfSymbol',
+          name: 'snow'
+        },
+        android: {
+          type: 'drawableResource',
+          name: 'mode_cool',
+        }
       },
-      iconResourceName: 'mode_cool',
     },
     component: makeTab('Tab 2'),
   },
diff --git a/apps/src/tests/TestBottomTabs/index.tsx b/apps/src/tests/TestBottomTabs/index.tsx
@@ -35,13 +35,19 @@ const TAB_CONFIGS: TabConfiguration[] = [
       title: 'Tab1',
       isFocused: true,
       icon: {
-        sfSymbolName: 'house',
+        ios: {
+          type: 'sfSymbol',
+          name: 'house.fill',
+        }, 
+        android: {
+          type: 'imageSource',
+          imageSource: require('../../../assets/variableIcons/icon_fill.png'),
+        }
       },
       selectedIcon: {
-        sfSymbolName: 'house.fill',
+        type: 'sfSymbol',
+        name: 'house.fill',
       },
-      // iconResourceName: 'sym_call_incoming', // Android specific
-      iconResource: require('../../../assets/variableIcons/icon_fill.png'),
     },
     component: Tab1,
   },
@@ -96,13 +102,19 @@ const TAB_CONFIGS: TabConfiguration[] = [
       },
       tabBarItemBadgeBackgroundColor: Colors.GreenDark100,
       icon: {
-        templateSource: require('../../../assets/variableIcons/icon.png'),
+        ios: {
+          type: 'templateSource',
+          templateSource: require('../../../assets/variableIcons/icon.png'),
+        }, 
+        android: {
+          type: 'drawableResource',
+          name: 'sym_call_missed',
+        }
       },
       selectedIcon: {
+        type: 'templateSource',
         templateSource: require('../../../assets/variableIcons/icon_fill.png'),
       },
-      iconResourceName: 'sym_call_missed', // Android specific
-      iconResource: require('../../../assets/variableIcons/icon.png'),
       title: 'Tab2',
       orientation: 'landscape',
     },
@@ -134,13 +146,15 @@ const TAB_CONFIGS: TabConfiguration[] = [
         tabBarBlurEffect: 'none',
       },
       icon: {
-        imageSource: require('../../../assets/variableIcons/icon.png'),
+        shared: {
+          type: 'imageSource',
+          imageSource: require('../../../assets/variableIcons/icon.png'),
+        }
       },
       selectedIcon: {
+        type: 'imageSource',
         imageSource: require('../../../assets/variableIcons/icon_fill.png'),
       },
-      // iconResourceName: 'sym_action_email', // Android specific
-      iconResource: require('../../../assets/variableIcons/icon_fill.png'),
       title: 'Tab3',
       // systemItem: 'search', // iOS specific
       // systemItem: 'contacts', // iOS specific
@@ -153,13 +167,19 @@ const TAB_CONFIGS: TabConfiguration[] = [
     tabScreenProps: {
       tabKey: 'Tab4',
       icon: {
-        sfSymbolName: 'rectangle.stack',
+        ios: {
+          type: 'sfSymbol',
+          name: 'rectangle.stack',
+        },
+        android: {
+          type: 'drawableResource',
+          name: 'custom_home_icon'
+        }
       },
       selectedIcon: {
-        sfSymbolName: 'rectangle.stack.fill',
+        type: 'sfSymbol',
+        name: 'rectangle.stack.fill',
       },
-      // iconResourceName: 'sym_action_chat', // Android specific
-      iconResource: require('../../../assets/svg/cart.svg'),
       title: 'Tab4',
       systemItem: 'search', // iOS specific
       badgeValue: '123',
diff --git a/src/components/bottom-tabs/BottomTabsScreen.tsx b/src/components/bottom-tabs/BottomTabsScreen.tsx
diff --git a/src/components/bottom-tabs/BottomTabsScreen.types.ts b/src/components/bottom-tabs/BottomTabsScreen.types.ts
diff --git a/src/fabric/bottom-tabs/BottomTabsScreenNativeComponent.ts b/src/fabric/bottom-tabs/BottomTabsScreenNativeComponent.ts
diff --git a/src/types.tsx b/src/types.tsx

Original file line number	Diff line number	Diff line change
`@@ -58,7 +58,7 @@ class TabScreen(`
`58`	`58`	`}`
`59`	`59`
`60`	`60`	`// Icon`
`61`		`- var iconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->`
	`61`	`+ var drawableIconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->`
`62`	`62`	`if (newValue != oldValue) {`
`63`	`63`	`icon = getSystemDrawableResource(reactContext, newValue)`
`64`	`64`	`}`