fix(iOS): icons not following inactiveTintColor

Author: thiagobrez

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

@@ -5,20 +5,36 @@ struct TabItem: View {
   var icon: PlatformImage?
   var sfSymbol: String?
   var labeled: Bool?
+  var tintColor: PlatformColor?
 
+  private var tint: Color? {
+    tintColor.map(Color.init)
+  }
+
+  #if !os(macOS)
+  private var tintedIcon: PlatformImage? {
+    guard let icon else { return nil }
+    guard let tintColor else { return icon }
+    return icon.withTintColor(tintColor, renderingMode: .alwaysOriginal)
+  }
+  #endif
+
+  @ViewBuilder
   var body: some View {
     if let icon {
 #if os(macOS)
       Image(nsImage: icon)
 #else
-      Image(uiImage: icon)
+      Image(uiImage: tintedIcon ?? icon)
 #endif
     } else if let sfSymbol, !sfSymbol.isEmpty {
       Image(systemName: sfSymbol)
         .noneSymbolVariant()
+        .foregroundColor(tint)
     }
     if labeled != false {
       Text(title ?? "")
+        .foregroundColor(tint)
     }
   }
 }

packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift

@@ -40,6 +40,7 @@ struct LegacyTabView: AnyTabView {
 
       if !tabData.hidden || isFocused {
         let icon = props.icons[index]
+        let tintColor = isFocused ? tabData.activeTintColor ?? props.activeTintColor : props.inactiveTintColor
         let child = props.children[safe: index]?.view ?? PlatformView()
         let context = TabAppearContext(
           index: index,
@@ -56,7 +57,8 @@ struct LegacyTabView: AnyTabView {
               title: tabData.title,
               icon: icon,
               sfSymbol: tabData.sfSymbol,
-              labeled: props.labeled
+              labeled: props.labeled,
+              tintColor: tintColor
             )
             .accessibilityIdentifier(tabData.testID ?? "")
           }

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

@@ -29,6 +29,7 @@ struct NewTabView: AnyTabView {
 
           if !tabData.hidden || isFocused {
             let icon = props.icons[index]
+            let tintColor = isFocused ? tabData.activeTintColor ?? props.activeTintColor : props.inactiveTintColor
 
             let context = TabAppearContext(
               index: index,
@@ -48,7 +49,8 @@ struct NewTabView: AnyTabView {
                 title: tabData.title,
                 icon: icon,
                 sfSymbol: tabData.sfSymbol,
-                labeled: props.labeled
+                labeled: props.labeled,
+                tintColor: tintColor
               )
             }
             #if !os(tvOS)

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

@@ -69,6 +69,7 @@ struct TabViewImpl: View {
           tabBar = tabController
         #else
           tabBar = tabController.tabBar
+          updateTabBarAppearance(props: props, tabBar: tabController.tabBar)
           if !props.tabBarHidden {
             onTabBarMeasured(
               Int(tabController.tabBar.frame.size.height)
@@ -82,6 +83,9 @@ struct TabViewImpl: View {
       .tintColor(props.selectedActiveTintColor)
       .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false)
       .onChange(of: props.selectedPage ?? "") { newValue in
+        #if !os(macOS)
+          updateTabBarAppearance(props: props, tabBar: tabBar)
+        #endif
         #if !os(macOS)
           if props.disablePageAnimations {
             UIView.setAnimationsEnabled(false)
@@ -120,36 +124,41 @@ struct TabViewImpl: View {
     if props.scrollEdgeAppearance == "transparent" {
       configureTransparentAppearance(tabBar: tabBar, props: props)
       return
+    } else {
+      configureStandardAppearance(tabBar: tabBar, props: props)
     }
-
-    configureStandardAppearance(tabBar: tabBar, props: props)
   }
 #endif
 
 #if !os(macOS)
   private func configureTransparentAppearance(tabBar: UITabBar, props: TabViewProps) {
     tabBar.barTintColor = props.barTintColor
+    tabBar.tintColor = props.selectedActiveTintColor
     #if !os(visionOS)
       tabBar.isTranslucent = props.translucent
     #endif
     tabBar.unselectedItemTintColor = props.inactiveTintColor
 
     guard let items = tabBar.items else { return }
+    configureTabBarItemImages(items: items, props: props)
 
     let attributes = TabBarFontSize.createNormalStateAttributes(
       fontSize: props.fontSize,
       fontFamily: props.fontFamily,
       fontWeight: props.fontWeight,
-      inactiveColor: nil
+      inactiveColor: props.inactiveTintColor
     )
 
     items.forEach { item in
       item.setTitleTextAttributes(attributes, for: .normal)
+      item.setTitleTextAttributes(selectedAttributes(props: props), for: .selected)
     }
   }
 
   private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps) {
     let appearance = UITabBarAppearance()
+    tabBar.tintColor = props.selectedActiveTintColor
+    tabBar.unselectedItemTintColor = props.inactiveTintColor
 
     // Configure background
     switch props.scrollEdgeAppearance {
@@ -180,8 +189,12 @@ struct TabViewImpl: View {
     if let inactiveTintColor = props.inactiveTintColor {
       itemAppearance.normal.iconColor = inactiveTintColor
     }
+    if let activeTintColor = props.selectedActiveTintColor {
+      itemAppearance.selected.iconColor = activeTintColor
+    }
 
     itemAppearance.normal.titleTextAttributes = attributes
+    itemAppearance.selected.titleTextAttributes = selectedAttributes(props: props)
 
     // Apply item appearance to all layouts
     appearance.stackedLayoutAppearance = itemAppearance
@@ -193,6 +206,49 @@ struct TabViewImpl: View {
     if #available(iOS 15.0, *) {
       tabBar.scrollEdgeAppearance = appearance.copy()
     }
+    if let items = tabBar.items {
+      configureTabBarItemImages(items: items, props: props)
+      configureTabBarItemTitles(items: items, props: props)
+    }
+  }
+
+  private func configureTabBarItemTitles(items: [UITabBarItem], props: TabViewProps) {
+    let normalAttributes = TabBarFontSize.createNormalStateAttributes(
+      fontSize: props.fontSize,
+      fontFamily: props.fontFamily,
+      fontWeight: props.fontWeight,
+      inactiveColor: props.inactiveTintColor
+    )
+    let selectedAttributes = selectedAttributes(props: props)
+
+    items.forEach { item in
+      item.setTitleTextAttributes(normalAttributes, for: .normal)
+      item.setTitleTextAttributes(selectedAttributes, for: .selected)
+    }
+  }
+
+  private func configureTabBarItemImages(items: [UITabBarItem], props: TabViewProps) {
+    for (tabBarIndex, item) in items.enumerated() {
+      guard let tabData = props.filteredItems[safe: tabBarIndex],
+            let itemIndex = props.items.firstIndex(where: { $0.key == tabData.key }),
+            let icon = props.icons[itemIndex] else { continue }
+
+      item.image = props.inactiveTintColor.map {
+        icon.withTintColor($0, renderingMode: .alwaysOriginal)
+      } ?? icon
+      item.selectedImage = props.selectedActiveTintColor.map {
+        icon.withTintColor($0, renderingMode: .alwaysOriginal)
+      } ?? icon
+    }
+  }
+
+  private func selectedAttributes(props: TabViewProps) -> [NSAttributedString.Key: Any] {
+    TabBarFontSize.createFontAttributes(
+      size: props.fontSize.map(CGFloat.init) ?? TabBarFontSize.defaultSize,
+      family: props.fontFamily,
+      weight: props.fontWeight,
+      color: props.selectedActiveTintColor
+    )
   }
 #endif
 
@@ -250,6 +306,9 @@ extension View {
         .onChange(of: props.selectedActiveTintColor) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
         }
+        .onChange(of: props.iconsRevision) { _ in
+          updateTabBarAppearance(props: props, tabBar: tabBar)
+        }
         .onChange(of: props.fontSize) { _ in
           updateTabBarAppearance(props: props, tabBar: tabBar)
         }

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

@@ -56,6 +56,7 @@ class TabViewProps: ObservableObject {
   @Published var items: [TabInfo] = []
   @Published var selectedPage: String?
   @Published var icons: [Int: PlatformImage] = [:]
+  @Published var iconsRevision: Int = 0
   @Published var sidebarAdaptable: Bool?
   @Published var labeled: Bool = false
   @Published var minimizeBehavior: MinimizeBehavior?

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

@@ -261,7 +261,13 @@ public final class TabInfo: NSObject {
             guard let image else { return }
             DispatchQueue.main.async { [weak self] in
               guard let self else { return }
-              props.icons[index] = image.resizeImageTo(size: iconSize)
+              let icon = image.resizeImageTo(size: iconSize)
+              #if os(macOS)
+              props.icons[index] = icon
+              #else
+              props.icons[index] = icon?.withRenderingMode(.alwaysTemplate)
+              #endif
+              props.iconsRevision += 1
             }
           })
       }