fix(iOS): disable tabBarInactiveTintColor on iOS >= 26 (#527)

Author: thiagobrez

.changeset/grumpy-otters-report.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+Disable tabBarInactiveTintColor on iOS >= 26

.gitignore

@@ -2,9 +2,6 @@
 #
 .DS_Store
 
-# XDE
-.expo/
-
 # VSCode
 .vscode/
 jsconfig.json
@@ -82,3 +79,6 @@ lib/
 # React Native Codegen
 ios/generated
 android/generated
+
+# Codex
+.codex

docs/docs/docs/guides/standalone-usage.md

@@ -180,6 +180,10 @@ Color for inactive tabs.
 
 - Type: `ColorValue`
 
+:::note
+On iOS >= 26 (Liquid Glass), this prop is ignored.
+:::
+
 #### `tabBarStyle`
 
 Object containing styles for the tab bar.

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -128,6 +128,10 @@ Color for the active tab.
 
 Color for the inactive tabs.
 
+:::note
+On iOS >= 26 (Liquid Glass), this prop is ignored.
+:::
+
 #### `tabBarStyle`
 
 Object containing styles for the tab bar.
@@ -241,7 +245,7 @@ Label text of the tab displayed in the navigation bar. When undefined, scene tit
 Color for the active tab.
 
 :::note
-The `tabBarInactiveTintColor` is not supported on route level due to native limitations. Use `inactiveTintColor` in the `Tab.Navigator` instead.
+The `tabBarInactiveTintColor` is not supported on route level due to native limitations. Use `tabBarInactiveTintColor` in the `Tab.Navigator` instead.
 :::
 
 #### `tabBarIcon`
@@ -312,7 +316,7 @@ To display a badge without text (just a dot), you need to pass a string with a s
 #### `tabBarBadgeBackgroundColor`
 
  - Type: `string`
- 
+
 Set the background color for the badge on android.
 Uses the system color by default.
 
@@ -395,7 +399,7 @@ React.useEffect(() => {
   const unsubscribe = navigation.addListener('tabPress', (e) => {
     // Note: For iOS 26+, use the `preventsDefault` option instead of `e.preventDefault()`
     // to avoid animation delays
-    
+
     // Do something manually
     // ...
   });

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

@@ -132,7 +132,7 @@ struct TabViewImpl: View {
     #if !os(visionOS)
       tabBar.isTranslucent = props.translucent
     #endif
-    tabBar.unselectedItemTintColor = props.inactiveTintColor
+    tabBar.unselectedItemTintColor = props.effectiveInactiveTintColor
 
     guard let items = tabBar.items else { return }
 
@@ -174,10 +174,10 @@ struct TabViewImpl: View {
       fontSize: props.fontSize,
       fontFamily: props.fontFamily,
       fontWeight: props.fontWeight,
-      inactiveColor: props.inactiveTintColor
+      inactiveColor: props.effectiveInactiveTintColor
     )
 
-    if let inactiveTintColor = props.inactiveTintColor {
+    if let inactiveTintColor = props.effectiveInactiveTintColor {
       itemAppearance.normal.iconColor = inactiveTintColor
     }
 

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

@@ -1,3 +1,4 @@
+import Foundation
 import SwiftUI
 
 internal enum MinimizeBehavior: String {
@@ -82,6 +83,16 @@ class TabViewProps: ObservableObject {
     return activeTintColor
   }
 
+  var effectiveInactiveTintColor: PlatformColor? {
+    #if os(iOS)
+      if ProcessInfo.processInfo.operatingSystemVersion.majorVersion >= 26 {
+        return nil
+      }
+    #endif
+
+    return inactiveTintColor
+  }
+
   var filteredItems: [TabInfo] {
     items.filter {
       !$0.hidden || $0.key == selectedPage

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -77,6 +77,7 @@ interface Props<Route extends BaseRoute> {
   tabBarActiveTintColor?: ColorValue;
   /**
    * Inactive tab color.
+   * Has no effect on iOS 26 and above (Liquid Glass).
    */
   tabBarInactiveTintColor?: ColorValue;
   /**