feat: add Tab api support on newer OS

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

@@ -0,0 +1,33 @@
+import SwiftUI
+
+struct TabAppearContext {
+  let index: Int
+  let tabData: TabInfo
+  let props: TabViewProps
+  let updateTabBarAppearance: () -> Void
+  let onSelect: (_ key: String) -> Void
+}
+
+struct TabAppearModifier: ViewModifier {
+  let context: TabAppearContext
+
+  func body(content: Content) -> some View {
+    content.onAppear {
+      #if !os(macOS)
+        context.updateTabBarAppearance()
+      #endif
+
+      #if os(iOS)
+        if context.index >= 4, context.props.selectedPage != context.tabData.key {
+          context.onSelect(context.tabData.key)
+        }
+      #endif
+    }
+  }
+}
+
+extension View {
+  func tabAppear(using context: TabAppearContext) -> some View {
+    self.modifier(TabAppearModifier(context: context))
+  }
+}

packages/react-native-bottom-tabs/ios/TabView/AnyTabView.swift

@@ -0,0 +1,7 @@
+import SwiftUI
+
+public protocol AnyTabView: View {
+  var onLayout: (_ size: CGSize) -> Void { get }
+  var onSelect: (_ key: String) -> Void { get }
+  var updateTabBarAppearance: () -> Void { get }
+}

packages/react-native-bottom-tabs/ios/TabView/LegacyTabView.swift

@@ -0,0 +1,56 @@
+import SwiftUI
+
+struct LegacyTabView: AnyTabView {
+  @ObservedObject var props: TabViewProps
+
+  var onLayout: (CGSize) -> Void
+  var onSelect: (String) -> Void
+  var updateTabBarAppearance: () -> Void
+
+  @ViewBuilder
+  var body: some View {
+    TabView(selection: $props.selectedPage) {
+      ForEach(props.children.indices, id: \.self) { index in
+        renderTabItem(at: index)
+      }
+      .measureView { size in
+        onLayout(size)
+      }
+    }
+    .hideTabBar(props.tabBarHidden)
+  }
+
+  @ViewBuilder
+  private func renderTabItem(at index: Int) -> some View {
+    if let tabData = props.items[safe: index] {
+      let isFocused = props.selectedPage == tabData.key
+
+      if !tabData.hidden || isFocused {
+        let icon = props.icons[index]
+        let child = props.children[safe: index] ?? PlatformView()
+        let context = TabAppearContext(
+          index: index,
+          tabData: tabData,
+          props: props,
+          updateTabBarAppearance: updateTabBarAppearance,
+          onSelect: onSelect
+        )
+
+        RepresentableView(view: child)
+          .ignoresSafeArea(.container, edges: .all)
+          .tabItem {
+            TabItem(
+              title: tabData.title,
+              icon: icon,
+              sfSymbol: tabData.sfSymbol,
+              labeled: props.labeled
+            )
+            .accessibilityIdentifier(tabData.testID ?? "")
+          }
+          .tag(tabData.key)
+          .tabBadge(tabData.badge)
+          .tabAppear(using: context)
+      }
+    }
+  }
+}

packages/react-native-bottom-tabs/ios/TabView/NewTabView.swift

@@ -0,0 +1,54 @@
+import SwiftUI
+
+@available(iOS 18, macOS 15, visionOS 2, tvOS 18, *)
+struct NewTabView: AnyTabView {
+  @ObservedObject var props: TabViewProps
+
+  var onLayout: (CGSize) -> Void
+  var onSelect: (String) -> Void
+  var updateTabBarAppearance: () -> Void
+
+  @ViewBuilder
+  var body: some View {
+    TabView(selection: $props.selectedPage) {
+      ForEach(props.children.indices, id: \.self) { index in
+        if let tabData = props.items[safe: index] {
+          let isFocused = props.selectedPage == tabData.key
+
+          if !tabData.hidden || isFocused {
+            let icon = props.icons[index]
+
+            let platformChild = props.children[safe: index] ?? PlatformView()
+            let child = RepresentableView(view: platformChild)
+            let context = TabAppearContext(
+              index: index,
+              tabData: tabData,
+              props: props,
+              updateTabBarAppearance: updateTabBarAppearance,
+              onSelect: onSelect
+            )
+
+            Tab(value: tabData.key) {
+              child
+                .ignoresSafeArea(.container, edges: .all)
+                .tabAppear(using: context)
+            } label: {
+              TabItem(
+                title: tabData.title,
+                icon: icon,
+                sfSymbol: tabData.sfSymbol,
+                labeled: props.labeled
+              )
+            }
+            .badge(tabData.badge.flatMap { !$0.isEmpty ? Text($0) : nil })
+            .accessibilityIdentifier(tabData.testID ?? "")
+          }
+        }
+      }
+    }
+    .measureView { size in
+      onLayout(size)
+    }
+    .hideTabBar(props.tabBarHidden)
+  }
+}