refactor(Tabs): Refactor APIs for icons

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>

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>

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)
         }

android/src/main/java/com/swmansion/rnscreens/gamma/tabs/TabScreenViewManager.kt

@@ -162,12 +162,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(
@@ -180,8 +180,8 @@ class TabScreenViewManager :
         value: String?,
     ) = Unit
 
-    @ReactProp(name = "iconResource")
-    override fun setIconResource(
+    @ReactProp(name = "imageIconResource")
+    override fun setImageIconResource(
         view: TabScreen,
         value: ReadableMap?,
     ) {

android/src/paper/java/com/facebook/react/viewmanagers/RNSBottomTabsScreenManagerDelegate.java

@@ -40,11 +40,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()));

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);

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'),
   },

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',
     },
@@ -127,13 +139,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
@@ -146,13 +160,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',