fix(ios): restore opaque scroll-edge appearance on iOS 26+- #567

.changeset/calm-tabs-scroll.md

@@ -0,0 +1,5 @@
+---
+"react-native-bottom-tabs": patch
+---
+
+Fix `scrollEdgeAppearance` on iOS 26 and newer.

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

@@ -6,6 +6,7 @@
 /// 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 @@
       }
       #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)
@@ -135,7 +139,7 @@
     if #available(iOS 18.0, tvOS 18.0, visionOS 2.0, *),
       let tabController = tabBar.delegate as? UITabBarController,
       let index = tabController.tabs.firstIndex(where: { $0.viewController?.tabBarItem === item })
     {
       return index
     }
     return tabBarIndex
@@ -146,6 +150,20 @@
 
     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
@@ -484,7 +502,7 @@
       .foregroundColor: color,
       .paragraphStyle: paragraphStyle,
     ]
     let titleSize = (title as NSString).size(withAttributes: attributes)
     let imageSize = CGSize(
       width: max(iconSize.width, ceil(titleSize.width)) + 8,
       height: iconSize.height + 3 + ceil(titleSize.height)
@@ -511,7 +529,7 @@
 
       tintedIcon.draw(in: iconFrame)
 
       (title as NSString).draw(
         in: CGRect(
           x: 0,
           y: iconSize.height + 3,
@@ -682,4 +700,4 @@
       self
     }
   }
 }