fix(ios): preserve the system More tab appearance

.changeset/quiet-more-control.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+Preserve the system More tab's label and icon when tabs overflow, including in iPhone Duo landscape.

packages/react-native-bottom-tabs/ios/TabViewImpl.swift

@@ -10,6 +10,7 @@
     @Weak var tabBar: NSTabView?
   #else
     @Weak var tabBar: UITabBar?
+    @Weak var moreTabBarItem: UITabBarItem?
   #endif
 
   @ViewBuilder
@@ -70,8 +71,11 @@
           tabBar = tabController
         #else
           tabBar = tabController.tabBar
+          #if os(iOS)
+            moreTabBarItem = tabController.moreNavigationController.tabBarItem
+          #endif
           updateTabBarAppearance(props: props, tabBar: tabController.tabBar)
-          updateTabBarItemImages(props: props, tabBar: tabController.tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabController.tabBar, moreTabBarItem: moreTabBarItem)
           if !props.tabBarHidden {
             onTabBarMeasured(
               Int(tabController.tabBar.frame.size.height)
@@ -80,7 +84,7 @@
         #endif
       }
       #if !os(macOS)
-        .configureAppearance(props: props, tabBar: tabBar)
+        .configureAppearance(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
       #endif
       .tintColor(props.selectedActiveTintColor)
       .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false)
@@ -115,16 +119,16 @@
 }
 
 #if !os(macOS)
-  private func updateTabBarItemImages(props: TabViewProps, tabBar: UITabBar?) {
+  private func updateTabBarItemImages(props: TabViewProps, tabBar: UITabBar?, moreTabBarItem: UITabBarItem?) {
     guard let tabBar,
       let items = tabBar.items
     else { return }
 
-    configureTabBarItemImages(items: items, props: props)
+    configureTabBarItemImages(items: items, props: props, moreTabBarItem: moreTabBarItem)
 
     DispatchQueue.main.async { [weak tabBar] in
       guard let tabBar, let items = tabBar.items else { return }
-      configureTabBarItemImages(items: items, props: props)
+      configureTabBarItemImages(items: items, props: props, moreTabBarItem: moreTabBarItem)
     }
   }
 
@@ -219,8 +223,12 @@
     }
   }
 
-  private func configureTabBarItemImages(items: [UITabBarItem], props: TabViewProps) {
+  private func configureTabBarItemImages(items: [UITabBarItem], props: TabViewProps, moreTabBarItem: UITabBarItem?) {
     for (tabBarIndex, item) in items.enumerated() {
+      // UIKit inserts its own overflow item when the available space is limited.
+      // Its label and icon must not be replaced with the next route's appearance.
+      guard item !== moreTabBarItem else { continue }
+
       guard let tabData = props.filteredItems[safe: tabBarIndex],
         let itemIndex = props.items.firstIndex(where: { $0.key == tabData.key })
       else { continue }
@@ -359,9 +367,9 @@
     let attributes: [NSAttributedString.Key: Any] = [
       .font: font,
       .foregroundColor: color,
       .paragraphStyle: paragraphStyle,
     ]
     let titleSize = (title as NSString).size(withAttributes: attributes)
     let imageSize = CGSize(
       width: max(iconSize.width, ceil(titleSize.width)) + 8,
       height: iconSize.height + 3 + ceil(titleSize.height)
@@ -388,7 +396,7 @@
 
       tintedIcon.draw(in: iconFrame)
 
       (title as NSString).draw(
         in: CGRect(
           x: 0,
           y: iconSize.height + 3,
@@ -456,7 +464,7 @@
 
   #if !os(macOS)
     @ViewBuilder
-    func configureAppearance(props: TabViewProps, tabBar: UITabBar?) -> some View {
+    func configureAppearance(props: TabViewProps, tabBar: UITabBar?, moreTabBarItem: UITabBarItem?) -> some View {
       self
         .onChange(of: props.barTintColor) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
@@ -469,36 +477,36 @@
         }
         .onChange(of: props.inactiveTintColor) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.activeTintColor) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.selectedActiveTintColor) { newValue in
           tabBar?.tintColor = newValue
         }
         .onChange(of: props.iconsRevision) { _ in
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.labeled) { _ in
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.fontSize) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.fontFamily) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.fontWeight) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.experimentalBakedTintColors) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
-          updateTabBarItemImages(props: props, tabBar: tabBar)
+          updateTabBarItemImages(props: props, tabBar: tabBar, moreTabBarItem: moreTabBarItem)
         }
         .onChange(of: props.tabBarHidden) { newValue in
           tabBar?.isHidden = newValue
@@ -563,4 +571,4 @@
       self
     }
   }
 }