fix(iOS): white background on dark mode

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];
 }

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
   }

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(

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)

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,

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 {

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

@@ -73,6 +73,11 @@ interface Props<Route extends BaseRoute> {
    * Inactive tab color.
    */
   tabBarInactiveTintColor?: ColorValue;
+
+  /**
+   * native wrapper background color.
+   */
+  wrapperColor?: ColorValue;
   /**
    * State for the tab view.
    *
@@ -239,6 +244,7 @@ const TabView = <Route extends BaseRoute>({
   tabBarStyle,
   tabLabelStyle,
   renderBottomAccessoryView,
+  wrapperColor,
   ...props
 }: Props<Route>) => {
   // @ts-ignore
@@ -403,6 +409,7 @@ const TabView = <Route extends BaseRoute>({
         barTintColor={tabBarStyle?.backgroundColor}
         rippleColor={rippleColor}
         labeled={labeled}
+        wrapperColor={wrapperColor}
       >
         {trimmedRoutes.map((route) => {
           if (getLazy({ route }) !== false && !loaded.includes(route.key)) {

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<TabViewProps>('RNCTabView', {