diff --git a/.changeset/calm-tabs-scroll.md b/.changeset/calm-tabs-scroll.md new file mode 100644 index 00000000..f46cd20d --- /dev/null +++ b/.changeset/calm-tabs-scroll.md @@ -0,0 +1,5 @@ +--- +"react-native-bottom-tabs": patch +--- + +Fix `scrollEdgeAppearance` on iOS 26 and newer. diff --git a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift index ca8ff60a..42703d59 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift +++ b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift @@ -6,6 +6,7 @@ import SwiftUI /// SwiftUI implementation of TabView used to render React Native views. struct TabViewImpl: View { @ObservedObject var props: TabViewProps + @Environment(\.colorScheme) private var colorScheme #if os(macOS) @Weak var tabBar: NSTabView? #else @@ -81,6 +82,9 @@ struct TabViewImpl: View { } #if !os(macOS) .configureAppearance(props: props, tabBar: tabBar) + .onChange(of: colorScheme) { _ in + updateTabBarAppearance(props: props, tabBar: tabBar) + } #endif .tintColor(props.selectedActiveTintColor) .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false) @@ -146,6 +150,20 @@ struct TabViewImpl: View { tabBar.isHidden = props.tabBarHidden + #if os(iOS) + if #available(iOS 26.0, *) { + let traits = tabBar.window?.traitCollection ?? tabBar.traitCollection + if props.scrollEdgeAppearance == "transparent" { + tabBar.backgroundColor = nil + } else if let barTintColor = props.barTintColor { + tabBar.backgroundColor = barTintColor.resolvedColor(with: traits) + } else { + let isOpaque = props.scrollEdgeAppearance == "opaque" || !props.translucent + tabBar.backgroundColor = isOpaque ? UIColor.systemBackground.resolvedColor(with: traits) : nil + } + } + #endif + if props.scrollEdgeAppearance == "transparent" { configureTransparentAppearance(tabBar: tabBar, props: props) return