From 64e6b195188964ab3927d32127c83260bbc82b6a Mon Sep 17 00:00:00 2001 From: Prabin Regmi Date: Sun, 7 Dec 2025 12:04:39 -0500 Subject: [PATCH] fix(iOS): white background on dark mode --- .../ios/RCTTabViewComponentView.mm | 5 ++++- .../react-native-bottom-tabs/ios/RepresentableView.swift | 3 +++ .../ios/TabView/LegacyTabView.swift | 3 ++- .../react-native-bottom-tabs/ios/TabView/NewTabView.swift | 4 ++-- packages/react-native-bottom-tabs/ios/TabViewProps.swift | 1 + .../react-native-bottom-tabs/ios/TabViewProvider.swift | 6 ++++++ packages/react-native-bottom-tabs/src/TabView.tsx | 7 +++++++ .../react-native-bottom-tabs/src/TabViewNativeComponent.ts | 1 + 8 files changed, 26 insertions(+), 4 deletions(-) diff --git a/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm b/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm index c41f9316..efa5bb24 100644 --- a/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm +++ b/packages/react-native-bottom-tabs/ios/RCTTabViewComponentView.mm @@ -175,7 +175,10 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const & if (oldViewProps.tabBarHidden != newViewProps.tabBarHidden) { _tabViewProvider.tabBarHidden = newViewProps.tabBarHidden; } - + + if (oldViewProps.wrapperColor != newViewProps.wrapperColor) { + _tabViewProvider.wrapperColor = RCTUIColorFromSharedColor(newViewProps.wrapperColor); + } [super updateProps:props oldProps:oldProps]; } diff --git a/packages/react-native-bottom-tabs/ios/RepresentableView.swift b/packages/react-native-bottom-tabs/ios/RepresentableView.swift index 09adaca4..29529061 100644 --- a/packages/react-native-bottom-tabs/ios/RepresentableView.swift +++ b/packages/react-native-bottom-tabs/ios/RepresentableView.swift @@ -7,11 +7,13 @@ import SwiftUI */ struct RepresentableView: PlatformViewRepresentable { var view: PlatformView + var wrapperColor: UIColor #if os(macOS) func makeNSView(context: Context) -> PlatformView { let wrapper = NSView() + wrapper.backgroundColor = wrapperColor wrapper.addSubview(view) return wrapper } @@ -22,6 +24,7 @@ struct RepresentableView: PlatformViewRepresentable { func makeUIView(context: Context) -> PlatformView { let wrapper = UIView() + wrapper.backgroundColor = wrapperColor wrapper.addSubview(view) return wrapper } diff --git a/packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift b/packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift index 9d0a6249..99d836cc 100644 --- a/packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift +++ b/packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift @@ -30,6 +30,7 @@ struct LegacyTabView: AnyTabView { if !tabData.hidden || isFocused { let icon = props.icons[index] let child = props.children[safe: index]?.view ?? PlatformView() + let wrapperColor = props.wrapperColor ?? .systemBackground let context = TabAppearContext( index: index, tabData: tabData, @@ -38,7 +39,7 @@ struct LegacyTabView: AnyTabView { onSelect: onSelect ) - RepresentableView(view: child) + RepresentableView(view: child, wrapperColor: wrapperColor) .ignoresSafeArea(.container, edges: .all) .tabItem { TabItem( diff --git a/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift b/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift index d6993158..0f5489e1 100644 --- a/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift +++ b/packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift @@ -27,9 +27,9 @@ struct NewTabView: AnyTabView { updateTabBarAppearance: updateTabBarAppearance, onSelect: onSelect ) - + let wrapperColor = props.wrapperColor ?? .systemBackground Tab(value: tabData.key, role: tabData.role?.convert()) { - RepresentableView(view: child.view) + RepresentableView(view: child.view, wrapperColor: wrapperColor) .ignoresSafeArea(.container, edges: .all) .tabAppear(using: context) .hideTabBar(props.tabBarHidden) diff --git a/packages/react-native-bottom-tabs/ios/TabViewProps.swift b/packages/react-native-bottom-tabs/ios/TabViewProps.swift index cd098c07..bf0cbf62 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProps.swift +++ b/packages/react-native-bottom-tabs/ios/TabViewProps.swift @@ -70,6 +70,7 @@ class TabViewProps: ObservableObject { @Published var fontFamily: String? @Published var fontWeight: String? @Published var tabBarHidden: Bool = false + @Published var wrapperColor: PlatformColor? var selectedActiveTintColor: PlatformColor? { if let selectedPage, diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift index 013032f0..ecd781e8 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift +++ b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift @@ -124,6 +124,12 @@ public final class TabInfo: NSObject { props.activeTintColor = activeTintColor } } + + @objc public var wrapperColor: PlatformColor? { + didSet { + props.wrapperColor = wrapperColor + } + } @objc public var inactiveTintColor: PlatformColor? { didSet { diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 41b9cb37..f7723874 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -73,6 +73,11 @@ interface Props { * Inactive tab color. */ tabBarInactiveTintColor?: ColorValue; + + /** + * native wrapper background color. + */ + wrapperColor?: ColorValue; /** * State for the tab view. * @@ -239,6 +244,7 @@ const TabView = ({ tabBarStyle, tabLabelStyle, renderBottomAccessoryView, + wrapperColor, ...props }: Props) => { // @ts-ignore @@ -403,6 +409,7 @@ const TabView = ({ barTintColor={tabBarStyle?.backgroundColor} rippleColor={rippleColor} labeled={labeled} + wrapperColor={wrapperColor} > {trimmedRoutes.map((route) => { if (getLazy({ route }) !== false && !loaded.includes(route.key)) { diff --git a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts index 7949e156..5adafba3 100644 --- a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts +++ b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts @@ -60,6 +60,7 @@ export interface TabViewProps extends ViewProps { fontFamily?: string; fontWeight?: string; fontSize?: Int32; + wrapperColor?: ColorValue; } export default codegenNativeComponent('RNCTabView', {