diff --git a/.changeset/grumpy-otters-report.md b/.changeset/grumpy-otters-report.md new file mode 100644 index 00000000..04e4f9d0 --- /dev/null +++ b/.changeset/grumpy-otters-report.md @@ -0,0 +1,5 @@ +--- +'react-native-bottom-tabs': patch +--- + +Disable tabBarInactiveTintColor on iOS >= 26 diff --git a/.gitignore b/.gitignore index 43be36d3..7ce0532c 100644 --- a/.gitignore +++ b/.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 diff --git a/docs/docs/docs/guides/standalone-usage.md b/docs/docs/docs/guides/standalone-usage.md index 959a84f1..c184b286 100644 --- a/docs/docs/docs/guides/standalone-usage.md +++ b/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. diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index 8272217d..c505e942 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/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 // ... }); diff --git a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift index 29eb3bb1..4f9ec926 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift +++ b/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 } diff --git a/packages/react-native-bottom-tabs/ios/TabViewProps.swift b/packages/react-native-bottom-tabs/ios/TabViewProps.swift index e9dc5d9d..5dc0898a 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProps.swift +++ b/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 diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 4e93f090..d8a6e754 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -77,6 +77,7 @@ interface Props { tabBarActiveTintColor?: ColorValue; /** * Inactive tab color. + * Has no effect on iOS 26 and above (Liquid Glass). */ tabBarInactiveTintColor?: ColorValue; /**