refactor(Tabs): Split JS components and specs internally

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

@@ -6,17 +6,17 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.viewmanagers.RNSTabsHostManagerDelegate
-import com.facebook.react.viewmanagers.RNSTabsHostManagerInterface
+import com.facebook.react.viewmanagers.RNSTabsHostAndroidManagerDelegate
+import com.facebook.react.viewmanagers.RNSTabsHostAndroidManagerInterface
 import com.swmansion.rnscreens.gamma.helpers.makeEventRegistrationInfo
 import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostNativeFocusChangeEvent
 import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
 
 @ReactModule(name = TabsHostViewManager.REACT_CLASS)
 class TabsHostViewManager :
     ViewGroupManager<TabsHost>(),
-    RNSTabsHostManagerInterface<TabsHost> {
-    private val delegate: ViewManagerDelegate<TabsHost> = RNSTabsHostManagerDelegate<TabsHost, TabsHostViewManager>(this)
+    RNSTabsHostAndroidManagerInterface<TabsHost> {
+    private val delegate: ViewManagerDelegate<TabsHost> = RNSTabsHostAndroidManagerDelegate<TabsHost, TabsHostViewManager>(this)
 
     override fun getName() = REACT_CLASS
 
@@ -65,38 +65,6 @@ class TabsHostViewManager :
         view.onViewManagerAddEventEmitters()
     }
 
-    // These should be ignored or another component, dedicated for Android should be used
-
-    override fun setTabBarTintColor(
-        view: TabsHost,
-        value: Int?,
-    ) = Unit
-
-    override fun setControlNavigationStateInJS(
-        view: TabsHost?,
-        value: Boolean,
-    ) = Unit
-
-    override fun setTabBarMinimizeBehavior(
-        view: TabsHost,
-        value: String?,
-    ) = Unit
-
-    override fun setTabBarControllerMode(
-        view: TabsHost,
-        value: String?,
-    ) = Unit
-
-    override fun setLayoutDirection(
-        view: TabsHost,
-        value: String?,
-    ) = Unit
-
-    override fun setColorScheme(
-        view: TabsHost?,
-        value: String?,
-    ) = Unit
-
     @ReactProp(name = "tabBarHidden")
     override fun setTabBarHidden(
         view: TabsHost,
@@ -114,6 +82,6 @@ class TabsHostViewManager :
     }
 
     companion object {
-        const val REACT_CLASS = "RNSTabsHost"
+        const val REACT_CLASS = "RNSTabsHostAndroid"
     }
 }

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

@@ -2,16 +2,15 @@ package com.swmansion.rnscreens.gamma.tabs.screen
 
 import android.util.Log
 import androidx.core.graphics.toColorInt
-import com.facebook.react.bridge.Dynamic
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.bridge.ReadableType
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.viewmanagers.RNSTabsScreenManagerDelegate
-import com.facebook.react.viewmanagers.RNSTabsScreenManagerInterface
+import com.facebook.react.viewmanagers.RNSTabsScreenAndroidManagerDelegate
+import com.facebook.react.viewmanagers.RNSTabsScreenAndroidManagerInterface
 import com.swmansion.rnscreens.gamma.helpers.makeEventRegistrationInfo
 import com.swmansion.rnscreens.gamma.tabs.appearance.ItemStateAppearance
 import com.swmansion.rnscreens.gamma.tabs.appearance.TabsAppearance
@@ -26,8 +25,8 @@ import com.swmansion.rnscreens.utils.RNSLog
 @ReactModule(name = TabsScreenViewManager.REACT_CLASS)
 class TabsScreenViewManager :
     ViewGroupManager<TabsScreen>(),
-    RNSTabsScreenManagerInterface<TabsScreen> {
-    private val delegate: ViewManagerDelegate<TabsScreen> = RNSTabsScreenManagerDelegate<TabsScreen, TabsScreenViewManager>(this)
+    RNSTabsScreenAndroidManagerInterface<TabsScreen> {
+    private val delegate: ViewManagerDelegate<TabsScreen> = RNSTabsScreenAndroidManagerDelegate<TabsScreen, TabsScreenViewManager>(this)
 
     override fun getName() = REACT_CLASS
 
@@ -56,42 +55,6 @@ class TabsScreenViewManager :
         view.onViewManagerAddEventEmitters()
     }
 
-    // These should be ignored or another component, dedicated for Android should be used
-    override fun setStandardAppearance(
-        view: TabsScreen,
-        value: Dynamic,
-    ) = Unit
-
-    override fun setScrollEdgeAppearance(
-        view: TabsScreen,
-        value: Dynamic,
-    ) = Unit
-
-    override fun setIconType(
-        view: TabsScreen?,
-        value: String?,
-    ) = Unit
-
-    override fun setIconImageSource(
-        view: TabsScreen?,
-        value: ReadableMap?,
-    ) = Unit
-
-    override fun setIconResourceName(
-        view: TabsScreen?,
-        value: String?,
-    ) = Unit
-
-    override fun setSelectedIconImageSource(
-        view: TabsScreen?,
-        value: ReadableMap?,
-    ) = Unit
-
-    override fun setSelectedIconResourceName(
-        view: TabsScreen?,
-        value: String?,
-    ) = Unit
-
     // Annotation is Paper only
     @ReactProp(name = "isFocused")
     override fun setIsFocused(
@@ -126,11 +89,6 @@ class TabsScreenViewManager :
         view.tabTitle = value
     }
 
-    override fun setIsTitleUndefined(
-        view: TabsScreen,
-        value: Boolean,
-    ) = Unit
-
     @ReactProp(name = "specialEffects")
     override fun setSpecialEffects(
         view: TabsScreen,
@@ -154,31 +112,6 @@ class TabsScreenViewManager :
         view.shouldUseRepeatedTabSelectionScrollToTopSpecialEffect = scrollToTop
     }
 
-    override fun setOverrideScrollViewContentInsetAdjustmentBehavior(
-        view: TabsScreen,
-        value: Boolean,
-    ) = Unit
-
-    override fun setBottomScrollEdgeEffect(
-        view: TabsScreen?,
-        value: String?,
-    ) = Unit
-
-    override fun setLeftScrollEdgeEffect(
-        view: TabsScreen?,
-        value: String?,
-    ) = Unit
-
-    override fun setRightScrollEdgeEffect(
-        view: TabsScreen?,
-        value: String?,
-    ) = Unit
-
-    override fun setTopScrollEdgeEffect(
-        view: TabsScreen?,
-        value: String?,
-    ) = Unit
-
     @ReactProp(name = "tabBarItemTestID")
     override fun setTabBarItemTestID(
         view: TabsScreen,
@@ -213,21 +146,6 @@ class TabsScreenViewManager :
         view.selectedDrawableIconResourceName = value
     }
 
-    override fun setOrientation(
-        view: TabsScreen,
-        value: String?,
-    ) = Unit
-
-    override fun setSystemItem(
-        view: TabsScreen,
-        value: String?,
-    ) = Unit
-
-    override fun setUserInterfaceStyle(
-        view: TabsScreen,
-        value: String?,
-    ) = Unit
-
     @ReactProp(name = "imageIconResource")
     override fun setImageIconResource(
         view: TabsScreen,
@@ -250,8 +168,8 @@ class TabsScreenViewManager :
         }
     }
 
-    @ReactProp(name = "standardAppearanceAndroid")
-    override fun setStandardAppearanceAndroid(
+    @ReactProp(name = "standardAppearance")
+    override fun setStandardAppearance(
         view: TabsScreen,
         value: ReadableMap?,
     ) {
@@ -292,7 +210,7 @@ class TabsScreenViewManager :
     }
 
     companion object {
-        const val REACT_CLASS = "RNSTabsScreen"
+        const val REACT_CLASS = "RNSTabsScreenAndroid"
         const val TAG = "TabsScreenViewManager"
     }
 }

apps/src/tests/issue-tests/Test3168.tsx

@@ -204,8 +204,8 @@ function TabsStackComponent() {
       tabScreenProps: {
         tabKey: 'main',
         title: 'Main',
-        icon: {
-          ios: {
+        ios: {
+          icon: {
             type: 'sfSymbol',
             name: 'house',
           },
@@ -217,8 +217,8 @@ function TabsStackComponent() {
       tabScreenProps: {
         tabKey: 'another',
         title: 'Another',
-        icon: {
-          ios: {
+        ios: {
+          icon: {
             type: 'sfSymbol',
             name: 'ellipsis',
           },
@@ -230,13 +230,13 @@ function TabsStackComponent() {
       tabScreenProps: {
         tabKey: 'examples',
         title: 'Search',
-        icon: {
-          ios: {
+        ios: {
+          icon: {
             type: 'sfSymbol',
             name: 'magnifyingglass',
           },
+          systemItem: searchBarConfig.useSystemItem ? 'search' : undefined,
         },
-        systemItem: searchBarConfig.useSystemItem ? 'search' : undefined,
       },
       component: () => ExamplesStackComponent({ showMenu: false }),
     },

apps/src/tests/issue-tests/Test3212/BottomTabsScenario.tsx

@@ -42,7 +42,9 @@ export function BottomTabsScenario() {
                 tabScreenProps: {
                   tabKey: 'stack',
                   title: 'Scroll',
-                  scrollEdgeEffects: config,
+                  ios: {
+                    scrollEdgeEffects: config,
+                  }
                 },
               },
             ]}

apps/src/tests/issue-tests/Test3212/StackInBottomTabsScenario.tsx

@@ -39,7 +39,9 @@ export function StackInBottomTabsScenario() {
               tabScreenProps: {
                 tabKey: 'stack',
                 title: 'Stack',
-                scrollEdgeEffects: config,
+                ios: {
+                  scrollEdgeEffects: config,
+                }
               },
             },
           ]}

apps/src/tests/issue-tests/Test3236.tsx

@@ -56,12 +56,14 @@ function App() {
       tabScreenProps: {
         tabKey: 'Tab1',
         title: 'Tab 1',
-        icon: {
-          ios: {
+        ios: {
+          icon: {
             type: 'sfSymbol',
             name: 'sun.max',
           },
-          android: {
+        },
+        android: {
+          icon: {
             type: 'drawableResource',
             name: 'sunny',
           },
@@ -73,12 +75,14 @@ function App() {
       tabScreenProps: {
         tabKey: 'Tab2',
         title: 'Tab 2',
-        icon: {
-          ios: {
+        ios: {
+          icon: {
             type: 'sfSymbol',
             name: 'snow',
           },
-          android: {
+        },
+        android: {
+          icon: {
             type: 'drawableResource',
             name: 'mode_cool',
           },
@@ -96,7 +100,9 @@ function App() {
       }}>
       <BottomTabsContainer
         tabConfigs={TAB_CONFIGS}
-        tabBarControllerMode={controllerMode}
+        ios={{
+          tabBarControllerMode: controllerMode,
+        }}
       />
     </ConfigWrapperContext.Provider>
   );

apps/src/tests/issue-tests/Test3288.tsx

@@ -138,8 +138,8 @@ const TAB_CONFIGS: TabConfiguration[] = [
     tabScreenProps: {
       tabKey: 'Tab1',
       title: 'Config',
-      icon: {
-        ios: {
+      ios: {
+        icon: {
           type: 'sfSymbol',
           name: 'gear',
         },
@@ -151,8 +151,8 @@ const TAB_CONFIGS: TabConfiguration[] = [
     tabScreenProps: {
       tabKey: 'Tab2',
       title: 'Test',
-      icon: {
-        ios: {
+      ios: {
+        icon: {
           type: 'sfSymbol',
           name: 'rectangle.stack',
         },
@@ -228,13 +228,13 @@ function Tabs() {
       }}>
       <BottomTabsContainer
         tabConfigs={TAB_CONFIGS}
-        tabBarMinimizeBehavior={bottomAccessoryConfig.tabBarMinimizeBehavior}
-        bottomAccessory={
-          bottomAccessoryConfig.shown
+        ios={{
+          tabBarMinimizeBehavior: bottomAccessoryConfig.tabBarMinimizeBehavior,
+          bottomAccessory: bottomAccessoryConfig.shown
             ? environment =>
                 getBottomAccessory(environment, bottomAccessoryConfig)
-            : undefined
-        }
+            : undefined,
+        }}
       />
     </ConfigWrapperContext.Provider>
   );