fix: appearance handling on iOS

Author: okwasniewski

ios/Extensions.swift

@@ -37,3 +37,16 @@ extension UIImage {
     return resizedImage
   }
 }
+
+extension View {
+  @ViewBuilder
+  func introspectTabView(closure: @escaping (UITabBarController) -> Void) -> some View {
+    self
+      .introspect(
+        .tabView,
+        on: .iOS(.v14, .v15, .v16, .v17, .v18),
+        .tvOS(.v14,.v15, .v16, .v17, .v18),
+        customize: closure
+      )
+  }
+}

ios/TabItemEventModifier.swift

@@ -18,12 +18,9 @@ struct TabItemEventModifier: ViewModifier {
 
   func body(content: Content) -> some View {
     content
-      .introspect(.tabView, on: .iOS(.v14, .v15, .v16, .v17, .v18)) { tabController in
+      .introspectTabView(closure: { tabController in
         handle(tabController: tabController)
-      }
-      .introspect(.tabView, on: .tvOS(.v14, .v15, .v16, .v17, .v18)) { tabController in
-        handle(tabController: tabController)
-      }
+      })
   }
 
   func handle(tabController: UITabBarController) {

ios/TabViewImpl.swift

@@ -1,6 +1,8 @@
 import Foundation
 import SwiftUI
 import React
+@_spi(Advanced) import SwiftUIIntrospect
+
 
 /**
  Props that component accepts. SwiftUI view gets re-rendered when ObservableObject changes.
@@ -20,14 +22,14 @@ class TabViewProps: ObservableObject {
   @Published var ignoresTopSafeArea: Bool = true
   @Published var disablePageAnimations: Bool = false
   @Published var hapticFeedbackEnabled: Bool = true
-
+  
   var selectedActiveTintColor: UIColor? {
     if let selectedPage = selectedPage,
        let tabData = items.findByKey(selectedPage),
        let activeTintColor = tabData.activeTintColor {
       return activeTintColor
     }
-
+    
     return activeTintColor
   }
 }
@@ -37,11 +39,11 @@ class TabViewProps: ObservableObject {
  */
 struct RepresentableView: UIViewRepresentable {
   var view: UIView
-
+  
   func makeUIView(context: Context) -> UIView {
     return view
   }
-
+  
   func updateUIView(_ uiView: UIView, context: Context) {}
 }
 
@@ -52,7 +54,9 @@ struct TabViewImpl: View {
   @ObservedObject var props: TabViewProps
   var onSelect: (_ key: String) -> Void
   var onLongPress: (_ key: String) -> Void
-
+  @Weak var tabBar: UITabBar?
+  
+  
   var body: some View {
     TabView(selection: $props.selectedPage) {
       ForEach(props.children.indices, id: \.self) { index in
@@ -63,7 +67,7 @@ struct TabViewImpl: View {
       guard let key = props.items.filter({
         !$0.hidden || $0.key == props.selectedPage
       })[safe: index]?.key else { return }
-
+      
       if isLongPress {
         onLongPress(key)
         emitHapticFeedback(longPress: true)
@@ -72,9 +76,15 @@ struct TabViewImpl: View {
         emitHapticFeedback()
       }
     })
+    .introspectTabView(closure: { tabController in
+      tabBar = tabController.tabBar
+    })
+    .onChange(of: tabBar) { newValue in
+      updateTabBarAppearance(props: props, tabBar: tabBar)
+    }
+    .configureAppearance(props: props, tabBar: tabBar)
     .tintColor(props.selectedActiveTintColor)
     .getSidebarAdaptable(enabled: props.sidebarAdaptable ?? false)
-    .configureAppearance(props: props)
     .onChange(of: props.selectedPage ?? "") { newValue in
       if (props.disablePageAnimations) {
         UIView.setAnimationsEnabled(false)
@@ -84,17 +94,17 @@ struct TabViewImpl: View {
       }
     }
   }
-
+  
   @ViewBuilder
   private func renderTabItem(at index: Int) -> some View {
     let tabData = props.items[safe: index]
     let isHidden = tabData?.hidden ?? false
     let isFocused = props.selectedPage == tabData?.key
-
+    
     if !isHidden || isFocused {
       let child = props.children[safe: index] ?? UIView()
       let icon = props.icons[index]
-
+      
       RepresentableView(view: child)
         .ignoresTopSafeArea(
           props.ignoresTopSafeArea,
@@ -120,13 +130,13 @@ struct TabViewImpl: View {
 #endif
     }
   }
-
+  
   func emitHapticFeedback(longPress: Bool = false) {
 #if os(iOS)
     if !props.hapticFeedbackEnabled {
       return
     }
-
+    
     if longPress {
       UINotificationFeedbackGenerator().notificationOccurred(.success)
     } else {
@@ -136,72 +146,12 @@ struct TabViewImpl: View {
   }
 }
 
-@available(iOS 15.0, *)
-private func configureAppearance(for appearanceType: String, appearance: UITabBarAppearance) -> UITabBarAppearance {
-  if (appearanceType == "transparent") {
-    return appearance
-  }
-
-  switch appearanceType {
-  case "opaque":
-    appearance.configureWithOpaqueBackground()
-  default:
-    appearance.configureWithDefaultBackground()
-  }
-
-  UITabBar.appearance().scrollEdgeAppearance = appearance
-
-  return appearance
-}
-
-private func setTabBarItemColors(_ itemAppearance: UITabBarItemAppearance, inactiveColor: UIColor) {
-  itemAppearance.normal.iconColor = inactiveColor
-  itemAppearance.normal.titleTextAttributes = [.foregroundColor: inactiveColor]
-}
-
-private func configureAppearance(inactiveTint inactiveTintColor: UIColor?, appearance: UITabBarAppearance) -> UITabBarAppearance {
-  // @see https://stackoverflow.com/a/71934882
-  if let inactiveTintColor {
-    setTabBarItemColors(appearance.stackedLayoutAppearance, inactiveColor: inactiveTintColor)
-    setTabBarItemColors(appearance.inlineLayoutAppearance, inactiveColor: inactiveTintColor)
-    setTabBarItemColors(appearance.compactInlineLayoutAppearance, inactiveColor: inactiveTintColor)
-  }
-
-  return appearance
-}
-
-private func updateTabBarAppearance(props: TabViewProps) {
-  var appearance = UITabBarAppearance()
-  appearance = configureAppearance(
-    inactiveTint: props.inactiveTintColor,
-    appearance: appearance
-  )
-
-
-  if #available(iOS 15.0, *) {
-    appearance = configureAppearance(for: props.scrollEdgeAppearance ?? "", appearance: appearance)
-
-    if props.translucent == false {
-      appearance.configureWithOpaqueBackground()
-    }
-
-    if props.barTintColor != nil {
-      appearance.backgroundColor = props.barTintColor
-    }
-  } else {
-    UITabBar.appearance().barTintColor = props.barTintColor
-    UITabBar.appearance().isTranslucent = props.translucent
-  }
-
-  UITabBar.appearance().standardAppearance = appearance
-}
-
 struct TabItem: View {
   var title: String?
   var icon: UIImage?
   var sfSymbol: String?
   var labeled: Bool?
-
+  
   var body: some View {
     if let icon {
       Image(uiImage: icon)
@@ -215,6 +165,40 @@ struct TabItem: View {
   }
 }
 
+private func updateTabBarAppearance(props: TabViewProps, tabBar: UITabBar?) {
+  guard let tabBar else { return }
+  
+  if (props.scrollEdgeAppearance == "transparent") {
+    tabBar.barTintColor = props.barTintColor
+    tabBar.isTranslucent = props.translucent
+    tabBar.unselectedItemTintColor = props.inactiveTintColor
+    
+    return
+  }
+  
+  let appearance = UITabBarAppearance()
+  
+  
+  appearance.configureWithDefaultBackground()
+  
+  appearance.backgroundColor = props.barTintColor
+  
+  if let inactiveTintColor = props.inactiveTintColor {
+    let itemAppearance = UITabBarItemAppearance()
+    itemAppearance.normal.iconColor = inactiveTintColor
+    itemAppearance.normal.titleTextAttributes = [.foregroundColor: inactiveTintColor]
+    
+    appearance.stackedLayoutAppearance = itemAppearance
+    appearance.inlineLayoutAppearance = itemAppearance
+    appearance.compactInlineLayoutAppearance = itemAppearance
+  }
+  
+  tabBar.standardAppearance = appearance
+  if #available(iOS 15.0, *) {
+    tabBar.scrollEdgeAppearance = appearance.copy()
+  }
+}
+
 extension View {
   @ViewBuilder
   func getSidebarAdaptable(enabled: Bool) -> some View {
@@ -232,7 +216,7 @@ extension View {
       self
     }
   }
-
+  
   @ViewBuilder
   func tabBadge(_ data: String?) -> some View {
     if #available(iOS 15.0, macOS 15.0, visionOS 2.0, tvOS 15.0, *) {
@@ -249,7 +233,27 @@ extension View {
       self
     }
   }
-
+  
+  @ViewBuilder
+  func configureAppearance(props: TabViewProps, tabBar: UITabBar?) -> some View {
+    self
+      .onChange(of: props.barTintColor) { newValue in
+        updateTabBarAppearance(props: props, tabBar: tabBar)
+      }
+      .onChange(of: props.scrollEdgeAppearance) { newValue in
+        updateTabBarAppearance(props: props, tabBar: tabBar)
+      }
+      .onChange(of: props.translucent) { newValue in
+        updateTabBarAppearance(props: props, tabBar: tabBar)
+      }
+      .onChange(of: props.inactiveTintColor) { newValue in
+        updateTabBarAppearance(props: props, tabBar: tabBar)
+      }
+      .onChange(of: props.selectedActiveTintColor) { newValue in
+        updateTabBarAppearance(props: props, tabBar: tabBar)
+      }
+  }
+  
   @ViewBuilder
   func ignoresTopSafeArea(
     _ flag: Bool,
@@ -266,30 +270,7 @@ extension View {
         .frame(idealWidth: frame.width, idealHeight: frame.height)
     }
   }
-
-  @ViewBuilder
-  func configureAppearance(props: TabViewProps) -> some View {
-    self
-      .onAppear() {
-        updateTabBarAppearance(props: props)
-      }
-      .onChange(of: props.barTintColor) { newValue in
-        updateTabBarAppearance(props: props)
-      }
-      .onChange(of: props.scrollEdgeAppearance) { newValue in
-        updateTabBarAppearance(props: props)
-      }
-      .onChange(of: props.translucent) { newValue in
-        updateTabBarAppearance(props: props)
-      }
-      .onChange(of: props.inactiveTintColor) { newValue in
-        updateTabBarAppearance(props: props)
-      }
-      .onChange(of: props.selectedActiveTintColor) { newValue in
-        updateTabBarAppearance(props: props)
-      }
-  }
-
+  
   @ViewBuilder
   func tintColor(_ color: UIColor?) -> some View {
     if let color {
@@ -303,7 +284,7 @@ extension View {
       self
     }
   }
-
+  
   // Allows TabView to use unfilled SFSymbols.
   // By default they are always filled.
   @ViewBuilder