Merge branch 'main' into fix/icon-inactive-tint-color

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

@@ -184,16 +184,8 @@ Color for inactive tabs.
 
 - Type: `ColorValue`
 
-:::warning
-On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a workaround that bakes tab labels into images for correct tinting. This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels.
-:::
-
-#### `experimental_bakedTintColors` <Badge text="iOS" type="info" /> <Badge text="experimental" type="danger"/>
-
-Enables the iOS 26 Liquid Glass workaround for active and inactive tint colors. When enabled with custom active or inactive tint colors, tab labels are baked into images so the icon and label receive the same tint during normal selection and Liquid Glass tab scrubbing.
-
-:::warning
-This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels, and icon sizing can vary with label width.
+:::note
+On iOS >= 26 (Liquid Glass), this prop is ignored.
 :::
 
 #### `tabBarStyle`

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

@@ -132,16 +132,8 @@ On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a worka
 
 Color for the inactive tabs.
 
-:::warning
-On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a workaround that bakes tab labels into images for correct tinting. This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels.
-:::
-
-#### `experimental_bakedTintColors` <Badge text="iOS" type="info" /> <Badge text="experimental" type="danger"/>
-
-Enables the iOS 26 Liquid Glass workaround for active and inactive tint colors. When enabled with custom active or inactive tint colors, tab labels are baked into images so the icon and label receive the same tint during normal selection and Liquid Glass tab scrubbing.
-
-:::warning
-This disables Dynamic Type (accessibility font sizes) and the Bold Text accessibility setting for tab labels, and icon sizing can vary with label width.
+:::note
+On iOS >= 26 (Liquid Glass), this prop is ignored.
 :::
 
 #### `tabBarStyle`
@@ -261,7 +253,7 @@ On iOS 26 (Liquid Glass), enable `experimental_bakedTintColors` to apply a worka
 :::
 
 :::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`
@@ -332,7 +324,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.
 
@@ -415,7 +407,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

@@ -148,7 +148,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 }
 
@@ -193,10 +193,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
     }
     if let activeTintColor = props.selectedActiveTintColor {

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

@@ -1,3 +1,4 @@
+import Foundation
 import SwiftUI
 
 internal enum MinimizeBehavior: String {
@@ -6,25 +7,25 @@ internal enum MinimizeBehavior: String {
   case onScrollUp
   case onScrollDown
 
-#if compiler(>=6.2)
-  @available(iOS 26.0, macOS 26.0, tvOS 26.0, *)
-  func convert() -> TabBarMinimizeBehavior {
-#if os(macOS) || os(tvOS)
-    return .automatic
-#else
-    switch self {
-    case .automatic:
-      return .automatic
-    case .never:
-      return .never
-    case .onScrollUp:
-      return .onScrollUp
-    case .onScrollDown:
-      return .onScrollDown
+  #if compiler(>=6.2)
+    @available(iOS 26.0, macOS 26.0, tvOS 26.0, *)
+    func convert() -> TabBarMinimizeBehavior {
+      #if os(macOS) || os(tvOS)
+        return .automatic
+      #else
+        switch self {
+        case .automatic:
+          return .automatic
+        case .never:
+          return .never
+        case .onScrollUp:
+          return .onScrollUp
+        case .onScrollDown:
+          return .onScrollDown
+        }
+      #endif
     }
-#endif
-  }
-#endif
+  #endif
 }
 
 public enum TabBarRole: String {
@@ -33,8 +34,8 @@ public enum TabBarRole: String {
   @available(iOS 18, macOS 15, visionOS 2, tvOS 18, *)
   func convert() -> TabRole {
     switch self {
-      case .search:
-        return .search
+    case .search:
+      return .search
     }
   }
 }
@@ -48,9 +49,7 @@ struct IdentifiablePlatformView: Identifiable, Equatable {
   }
 }
 
-/**
- Props that component accepts. SwiftUI view gets re-rendered when ObservableObject changes.
- */
+/// Props that component accepts. SwiftUI view gets re-rendered when ObservableObject changes.
 class TabViewProps: ObservableObject {
   @Published var children: [IdentifiablePlatformView] = []
   @Published var items: [TabInfo] = []
@@ -76,8 +75,9 @@ class TabViewProps: ObservableObject {
 
   var selectedActiveTintColor: PlatformColor? {
     if let selectedPage,
-       let tabData = items.findByKey(selectedPage),
-       let activeTintColor = tabData.activeTintColor {
+      let tabData = items.findByKey(selectedPage),
+      let activeTintColor = tabData.activeTintColor
+    {
       return activeTintColor
     }
 
@@ -86,8 +86,18 @@ class TabViewProps: ObservableObject {
 
   var hasCustomTintColors: Bool {
     activeTintColor != nil
-    || inactiveTintColor != nil
-    || items.contains(where: { $0.activeTintColor != nil })
+      || inactiveTintColor != nil
+      || items.contains(where: { $0.activeTintColor != nil })
+  }
+
+  var effectiveInactiveTintColor: PlatformColor? {
+    #if os(iOS)
+      if ProcessInfo.processInfo.operatingSystemVersion.majorVersion >= 26 {
+        return nil
+      }
+    #endif
+
+    return inactiveTintColor
   }
 
   var filteredItems: [TabInfo] {

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;
   /**