feat(ios): adding tint colors for items

Author: Stringsaeed

example/src/Examples/TintColors.tsx

@@ -20,6 +20,7 @@ export default function TintColorsExample() {
       title: 'Albums',
       focusedIcon: require('../../assets/icons/grid_dark.png'),
       badge: '5',
+      activeTintColor: 'green',
     },
     {
       key: 'contacts',
@@ -46,8 +47,8 @@ export default function TintColorsExample() {
       navigationState={{ index, routes }}
       onIndexChange={setIndex}
       renderScene={renderScene}
-      activeTintColor="red"
-      inactiveTintColor="blue"
+      inactiveTintColor="red"
+      scrollEdgeAppearance="default"
     />
   );
 }

ios/Extensions.swift

@@ -8,6 +8,15 @@ extension Collection {
   }
 }
 
+
+extension Collection where Element == TabInfo {
+  func findByKey(_ key: String?) -> Element? {
+    guard let key else { return nil }
+    guard !isEmpty else { return nil }
+    return first(where: { $0.key == key })
+  }
+}
+
 extension UIView {
   func pinEdges(to other: UIView) {
     NSLayoutConstraint.activate([

ios/RCTTabViewViewManager.mm

@@ -34,7 +34,5 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(scrollEdgeAppearance, NSString)
 RCT_EXPORT_VIEW_PROPERTY(activeTintColor, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(inactiveTintColor, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(activeTintColor, NSNumber)
-RCT_EXPORT_VIEW_PROPERTY(inactiveTintColor, NSNumber)
 
 @end

ios/TabViewImpl.swift

@@ -39,6 +39,24 @@ struct TabViewImpl: View {
   @ObservedObject var props: TabViewProps
   var onSelect: (_ key: String) -> Void
 
+  var selectedActiveTintColor: UIColor? {
+    // check first in selected tab
+    let selectedPage = props.selectedPage
+    if let selectedPage {
+      if let tabData = props.items?.tabs.findByKey(selectedPage) {
+        if let activeTintColor = tabData.activeTintColor {
+          return RCTConvert.uiColor(activeTintColor)
+        }
+      }
+    }
+
+    if let activeTintColor = props.activeTintColor {
+      return activeTintColor
+    }
+
+    return nil
+  }
+
   var body: some View {
     TabView(selection: $props.selectedPage) {
       ForEach(props.children?.indices ?? 0..<0, id: \.self) { index in
@@ -63,7 +81,7 @@ struct TabViewImpl: View {
           .tabBadge(tabData?.badge)
       }
     }
-    .tintColor(props.activeTintColor)
+    .tintColor(selectedActiveTintColor)
     .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false)
     .onChange(of: props.selectedPage ?? "") { newValue in
       if (props.disablePageAnimations) {
@@ -72,13 +90,37 @@ struct TabViewImpl: View {
           UIView.setAnimationsEnabled(true)
         }
       }
+
+      // to apply active tint color per tab
+      let scrollEdgeAppearance = configureAppearance(for: props.scrollEdgeAppearance ?? "")
+      let colorTintAppearance = configureAppearance(appearance: scrollEdgeAppearance, inactiveTint: props.inactiveTintColor, activeTint: selectedActiveTintColor)
+      setupTabBarAppearance(colorTintAppearance)
+
       onSelect(newValue)
     }
     .onChange(of: props.scrollEdgeAppearance) { newValue in
-      if #available(iOS 15.0, *) {
-        UITabBar.appearance().scrollEdgeAppearance = configureAppearance(for: newValue ?? "")
-      }
-      UITabBar.appearance().standardAppearance = configureAppearance(for: newValue ?? "")
+      let scrollEdgeAppearance = configureAppearance(for: newValue ?? "")
+      let colorTintAppearance = configureAppearance(appearance: scrollEdgeAppearance, inactiveTint: props.inactiveTintColor, activeTint: selectedActiveTintColor)
+
+      setupTabBarAppearance(colorTintAppearance)
+    }
+    .onChange(of: props.inactiveTintColor) { newValue in
+      let scrollEdgeAppearance = configureAppearance(for: props.scrollEdgeAppearance ?? "")
+      let colorTintAppearance = configureAppearance(appearance: scrollEdgeAppearance, inactiveTint: newValue, activeTint: selectedActiveTintColor)
+
+      setupTabBarAppearance(colorTintAppearance)
+    }
+    .onChange(of: selectedActiveTintColor) { newValue in
+      let scrollEdgeAppearance = configureAppearance(for: props.scrollEdgeAppearance ?? "")
+      let colorTintAppearance = configureAppearance(appearance: scrollEdgeAppearance, inactiveTint: props.inactiveTintColor, activeTint: newValue)
+
+      setupTabBarAppearance(colorTintAppearance)
+    }
+    .onAppear {
+      // we have to keep onAppear to setup the appearance for the first render.
+      let scrollEdgeAppearance = configureAppearance(for: props.scrollEdgeAppearance ?? "")
+      let colorTintAppearance = configureAppearance(appearance: scrollEdgeAppearance, inactiveTint: props.inactiveTintColor, activeTint: selectedActiveTintColor)
+      setupTabBarAppearance(colorTintAppearance)
     }
   }
 }
@@ -95,19 +137,45 @@ private func configureAppearance(for appearanceType: String) -> UITabBarAppearan
     appearance.configureWithDefaultBackground()
   }
 
+  return appearance
+}
+
+private func configureAppearance(appearance: UITabBarAppearance, inactiveTint inactiveTintColor: UIColor?, activeTint activeTintColor: UIColor?) -> UITabBarAppearance {
   // @see https://stackoverflow.com/a/71934882
-  if let inactiveTintColor = props.inactiveTintColor {
-    appearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: UIColor(inactiveTintColor)]
-    appearance.stackedLayoutAppearance.normal.iconColor = UIColor(inactiveTintColor)
+  if let inactiveTintColor {
+    setTabBarItemColors(appearance.stackedLayoutAppearance, inactiveColor: inactiveTintColor)
+    setTabBarItemColors(appearance.inlineLayoutAppearance, inactiveColor: inactiveTintColor)
+    setTabBarItemColors(appearance.compactInlineLayoutAppearance, inactiveColor: inactiveTintColor)
   }
-  if let activeTintColor = props.activeTintColor {
-    appearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: UIColor(activeTintColor)]
-    appearance.stackedLayoutAppearance.selected.iconColor = UIColor(activeTintColor)
+  
+  if let activeTintColor {
+    setTabBarItemColors(appearance.stackedLayoutAppearance, activeColor: activeTintColor)
+    setTabBarItemColors(appearance.inlineLayoutAppearance, activeColor: activeTintColor)
+    setTabBarItemColors(appearance.compactInlineLayoutAppearance, activeColor: activeTintColor)
   }
 
   return appearance
 }
 
+private func setupTabBarAppearance(_ appearance: UITabBarAppearance) {
+      if #available(iOS 15.0, *) {
+      UITabBar.appearance().scrollEdgeAppearance = appearance
+    }
+    UITabBar.appearance().standardAppearance = appearance
+}
+
+private func setTabBarItemColors(_ itemAppearance: UITabBarItemAppearance, inactiveColor: UIColor) {
+  itemAppearance.normal.iconColor = inactiveColor
+  itemAppearance.normal.titleTextAttributes = [.foregroundColor: inactiveColor]
+}
+
+
+private func setTabBarItemColors(_ itemAppearance: UITabBarItemAppearance, activeColor: UIColor) {
+  itemAppearance.selected.iconColor = activeColor
+  itemAppearance.selected.titleTextAttributes = [.foregroundColor: activeColor]
+}
+
+
 struct TabItem: View {
   var title: String?
   var icon: UIImage?

ios/TabViewProvider.swift

@@ -7,6 +7,7 @@ struct TabInfo: Codable {
   let title: String
   let badge: String
   let sfSymbol: String
+  let activeTintColor: Int?
 }
 
 struct TabData: Codable {
@@ -157,7 +158,8 @@ struct TabData: Codable {
             key: itemDict["key"] as? String ?? "",
             title: itemDict["title"] as? String ?? "",
             badge: itemDict["badge"] as? String ?? "",
-            sfSymbol: itemDict["sfSymbol"] as? String ?? ""
+            sfSymbol: itemDict["sfSymbol"] as? String ?? "",
+            activeTintColor: itemDict["activeTintColor"] as? Int
           )
         )
       }

src/TabView.tsx

@@ -1,5 +1,12 @@
 import type { TabViewItems } from './TabViewNativeComponent';
-import { ColorValue, Image, Platform, StyleSheet, View } from 'react-native';
+import {
+  ColorValue,
+  Image,
+  Platform,
+  processColor,
+  StyleSheet,
+  View,
+} from 'react-native';
 
 //@ts-ignore
 import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
@@ -156,6 +163,7 @@ const TabView = <Route extends BaseRoute>({
           title: getLabelText({ route }) ?? route.key,
           sfSymbol: isSfSymbol ? icon.sfSymbol : undefined,
           badge: props.getBadge?.({ route }),
+          activeTintColor: processColor(route.activeTintColor),
         };
       }),
     [getLabelText, icons, trimmedRoutes, props]

src/TabViewNativeComponent.ts

@@ -13,6 +13,7 @@ export type TabViewItems = ReadonlyArray<{
   title: string;
   sfSymbol?: string;
   badge?: string;
+  activeTintColor?: ProcessedColorValue | null;
 }>;
 
 export interface TabViewProps extends ViewProps {

src/types.ts

@@ -12,6 +12,7 @@ export type BaseRoute = {
   lazy?: boolean;
   focusedIcon?: ImageSourcePropType | AppleIcon;
   unfocusedIcon?: ImageSourcePropType | AppleIcon;
+  activeTintColor?: string;
 };
 
 export type NavigationState<Route extends BaseRoute> = {