@expo/ui 58.0.2 → 58.0.4

package/ios/Modifiers/ViewModifierRegistry.swift

@@ -1993,6 +1993,14 @@ extension ViewModifierRegistry {
       return try NavigationTitleModifier(from: params, appContext: appContext)
     }
 
+    register("navigationSplitViewStyle") { params, appContext, _ in
+      return try NavigationSplitViewStyleModifier(from: params, appContext: appContext)
+    }
+
+    register("navigationSplitViewColumnWidth") { params, appContext, _ in
+      return try NavigationSplitViewColumnWidthModifier(from: params, appContext: appContext)
+    }
+
     register("accessibilityLabel") { params, appContext, _ in
       return try AccessibilityLabelModifier(from: params, appContext: appContext)
     }
@@ -2309,6 +2317,10 @@ extension ViewModifierRegistry {
       return try ScrollIndicatorsModifier(from: params, appContext: appContext)
     }
 
+    register("scrollEdgeEffectStyle") { params, appContext, _ in
+      return try ScrollEdgeEffectStyleModifier(from: params, appContext: appContext)
+    }
+
     register("tabViewStyle") { params, appContext, _ in
       return try TabViewStyleModifier(from: params, appContext: appContext)
     }

package/ios/NavigationSplitViewView.swift

@@ -0,0 +1,180 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+import SwiftUI
+
+internal enum NavigationSplitViewVisibilityOptions: String, Enumerable {
+  case automatic
+  case all
+  case doubleColumn
+  case detailOnly
+
+  func toVisibility() -> NavigationSplitViewVisibility {
+    switch self {
+    case .automatic:
+      return .automatic
+    case .all:
+      return .all
+    case .doubleColumn:
+      return .doubleColumn
+    case .detailOnly:
+      return .detailOnly
+    }
+  }
+
+  static func from(_ visibility: NavigationSplitViewVisibility) -> NavigationSplitViewVisibilityOptions {
+    switch visibility {
+    case .all:
+      return .all
+    case .doubleColumn:
+      return .doubleColumn
+    case .detailOnly:
+      return .detailOnly
+    default:
+      return .automatic
+    }
+  }
+}
+
+internal enum NavigationSplitViewColumnOptions: String, Enumerable {
+  case sidebar
+  case content
+  case detail
+
+  @available(iOS 17.0, tvOS 17.0, *)
+  func toColumn() -> NavigationSplitViewColumn {
+    switch self {
+    case .sidebar:
+      return .sidebar
+    case .content:
+      return .content
+    case .detail:
+      return .detail
+    }
+  }
+
+  @available(iOS 17.0, tvOS 17.0, *)
+  static func from(_ column: NavigationSplitViewColumn) -> NavigationSplitViewColumnOptions {
+    switch column {
+    case .content:
+      return .content
+    case .detail:
+      return .detail
+    default:
+      return .sidebar
+    }
+  }
+}
+
+internal final class NavigationSplitViewProps: UIBaseViewProps {
+  @Field var columnVisibility: NavigationSplitViewVisibilityOptions?
+  @Field var preferredCompactColumn: NavigationSplitViewColumnOptions?
+  var onColumnVisibilityChange = EventDispatcher()
+  var onPreferredCompactColumnChange = EventDispatcher()
+}
+
+internal struct NavigationSplitViewView: ExpoSwiftUI.View {
+  @ObservedObject var props: NavigationSplitViewProps
+
+  // Only used while the matching prop is unset. While it is set, JS is the sole source
+  // of truth, so it stays in control of the columns and can refuse a change the user
+  // made by dragging.
+  @State private var uncontrolledVisibility: NavigationSplitViewVisibilityOptions = .automatic
+  @State private var uncontrolledCompactColumn: NavigationSplitViewColumnOptions = .sidebar
+
+  init(props: NavigationSplitViewProps) {
+    self.props = props
+  }
+
+  private var columnVisibilityBinding: Binding<NavigationSplitViewVisibility> {
+    let props = props
+    let uncontrolled = $uncontrolledVisibility
+    return Binding(
+      get: { (props.columnVisibility ?? uncontrolled.wrappedValue).toVisibility() },
+      set: { newValue in
+        let resolved = NavigationSplitViewVisibilityOptions.from(newValue)
+        guard (props.columnVisibility ?? uncontrolled.wrappedValue) != resolved else {
+          return
+        }
+        if props.columnVisibility == nil {
+          uncontrolled.wrappedValue = resolved
+        }
+        props.onColumnVisibilityChange(["visibility": resolved.rawValue])
+      }
+    )
+  }
+
+  @available(iOS 17.0, tvOS 17.0, *)
+  private var compactColumnBinding: Binding<NavigationSplitViewColumn> {
+    let props = props
+    let uncontrolled = $uncontrolledCompactColumn
+    return Binding(
+      get: { (props.preferredCompactColumn ?? uncontrolled.wrappedValue).toColumn() },
+      set: { newValue in
+        let resolved = NavigationSplitViewColumnOptions.from(newValue)
+        guard (props.preferredCompactColumn ?? uncontrolled.wrappedValue) != resolved else {
+          return
+        }
+        if props.preferredCompactColumn == nil {
+          uncontrolled.wrappedValue = resolved
+        }
+        props.onPreferredCompactColumnChange(["column": resolved.rawValue])
+      }
+    )
+  }
+
+  @ViewBuilder
+  var body: some View {
+    if #available(iOS 17.0, tvOS 17.0, *) {
+      if let contentColumn {
+        NavigationSplitView(
+          columnVisibility: columnVisibilityBinding,
+          preferredCompactColumn: compactColumnBinding
+        ) {
+          sidebarColumn
+        } content: {
+          contentColumn
+        } detail: {
+          detailColumn
+        }
+      } else {
+        NavigationSplitView(
+          columnVisibility: columnVisibilityBinding,
+          preferredCompactColumn: compactColumnBinding
+        ) {
+          sidebarColumn
+        } detail: {
+          detailColumn
+        }
+      }
+    } else {
+      if let contentColumn {
+        NavigationSplitView(columnVisibility: columnVisibilityBinding) {
+          sidebarColumn
+        } content: {
+          contentColumn
+        } detail: {
+          detailColumn
+        }
+      } else {
+        NavigationSplitView(columnVisibility: columnVisibilityBinding) {
+          sidebarColumn
+        } detail: {
+          detailColumn
+        }
+      }
+    }
+  }
+
+  private var sidebarColumn: SlotView? {
+    props.children?.slot("sidebar")
+  }
+
+  private var contentColumn: SlotView? {
+    props.children?.slot("content")
+  }
+
+  private var detailColumn: SlotView? {
+    props.children?.slot("detail")
+  }
+}

package/ios/ToolbarView.swift

@@ -5,6 +5,42 @@ import ExpoModulesCore
 
 internal final class ToolbarViewProps: UIBaseViewProps {}
 
+private struct ToolbarContentView: View {
+  @ObservedObject var props: SlotViewProps
+  let content: SlotView
+  let base: AnyView
+
+  @ViewBuilder
+  var body: some View {
+    let children = props.children ?? []
+
+    if children.contains(where: isItem) {
+      children.reduce(base) { view, child in
+        let childView: any View = child.childView
+
+        guard let slot = child.childView as? SlotView, slot.props.name == "item" else {
+          return AnyView(placed(AnyView(childView), on: view, placement: .automatic, visibilityPriority: nil))
+        }
+        return AnyView(ToolbarItemLayer(props: slot.props, base: view, content: AnyView(childView)))
+      }
+    } else {
+      base.toolbar {
+        content
+      }
+    }
+  }
+}
+
+private struct ToolbarItemLayer: View {
+  @ObservedObject var props: SlotViewProps
+  let base: AnyView
+  let content: AnyView
+
+  var body: some View {
+    placed(content, on: base, placement: placement(from: props), visibilityPriority: visibilityPriority(from: props))
+  }
+}
+
 internal struct ToolbarView: ExpoSwiftUI.View {
   @ObservedObject var props: ToolbarViewProps
 
@@ -14,10 +50,7 @@ internal struct ToolbarView: ExpoSwiftUI.View {
 
   var body: some View {
     if let content = props.children?.slot("content") {
-      baseContent
-        .toolbar {
-          content
-        }
+      ToolbarContentView(props: content.props, content: content, base: AnyView(baseContent))
     } else {
       baseContent
     }
@@ -31,3 +64,54 @@ internal struct ToolbarView: ExpoSwiftUI.View {
     }
   }
 }
+
+@ViewBuilder
+private func placed(
+  _ content: AnyView,
+  on base: AnyView,
+  placement: ToolbarItemPlacement,
+  visibilityPriority: ToolbarItemVisibilityPriorityOptions?
+) -> some View {
+#if compiler(>=6.4) // Xcode 27
+  if #available(iOS 27.0, macOS 26.1, tvOS 27.0, visionOS 27.0, *),
+    let visibilityPriority {
+    base.toolbar {
+      ToolbarItem(placement: placement) {
+        content
+      }
+      .visibilityPriority(visibilityPriority.toPriority())
+    }
+  } else {
+    base.toolbar {
+      ToolbarItem(placement: placement) {
+        content
+      }
+    }
+  }
+#else
+  base.toolbar {
+    ToolbarItem(placement: placement) {
+      content
+    }
+  }
+#endif
+}
+
+private func isItem(_ child: any ExpoSwiftUI.AnyChild) -> Bool {
+  return (child.childView as? SlotView)?.props.name == "item"
+}
+
+private func placement(from props: SlotViewProps) -> ToolbarItemPlacement {
+  guard let rawPlacement = props.extraProps?["placement"] as? String,
+    let placement = ToolbarItemPlacementOptions(rawValue: rawPlacement) else {
+    return .automatic
+  }
+  return placement.toPlacement()
+}
+
+private func visibilityPriority(from props: SlotViewProps) -> ToolbarItemVisibilityPriorityOptions? {
+  guard let rawPriority = props.extraProps?["visibilityPriority"] as? String else {
+    return nil
+  }
+  return ToolbarItemVisibilityPriorityOptions(rawValue: rawPriority)
+}

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4-sources.jar.md5

@@ -0,0 +1 @@
+feafc8819618513e9a38001814fc14e2

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4-sources.jar.sha1

@@ -0,0 +1 @@
+749807825339b7f72362b37e830ea704ec60f72d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4-sources.jar.sha256

@@ -0,0 +1 @@
+c42bba76435f8b36b4fc0ed86a8290f9e1ccaa3a0ebe4cb6e77d029a4be92be6

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4-sources.jar.sha512

@@ -0,0 +1 @@
+d105c1535934d743de599730ba9b0501a424eece52f1a4190b3764b4e7e280be42e3c9b880e4f80bef8ab6299938a0da275c00d342c593fd54375574d0ecd3ae

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.aar.md5

@@ -0,0 +1 @@
+317b952ccecb056bea4a1e5b20b7b5bf

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.aar.sha1

@@ -0,0 +1 @@
+77a2cb3cfd3195ad299b84c7d844dcb10d52fbe9

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.aar.sha256

@@ -0,0 +1 @@
+7576f0fb76c81d2a1925ffa93e4175b8ab41c4c47a7c4c375b73707812438133

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.aar.sha512

@@ -0,0 +1 @@
+408cceb3d6f97d29c6e734ab578c86c5c2c3f65fba19170bf1edc1f30648e6906b3a0e2284f1721543450bb579ddf37e54b00a51d21f9e5d77ad82e0857fef02

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.2/expo.modules.ui-58.0.2.module → 58.0.4/expo.modules.ui-58.0.4.module}

@@ -3,7 +3,7 @@
   "component": {
     "group": "expo.modules.ui",
     "module": "expo.modules.ui",
-    "version": "58.0.2",
+    "version": "58.0.4",
     "attributes": {
       "org.gradle.status": "release"
     }
@@ -24,13 +24,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.2.aar",
-          "url": "expo.modules.ui-58.0.2.aar",
-          "size": 1789469,
-          "sha512": "dfe706437f10aa521a458896b97fa14d945cf66c80dab9cc43fddd444cddd016073b783076f38ba90e07c5076b8752bf66e136ce9c40d85195cf27a231ce7f9d",
-          "sha256": "8faeae3cb56c1d29d1a120a9a8c1964e6015ba993519f244283855a066a1704c",
-          "sha1": "dac5e40669e0f7832763a444814375947cfc1d1c",
-          "md5": "df649a67c82e5ea67b2cbf457d10bb0a"
+          "name": "expo.modules.ui-58.0.4.aar",
+          "url": "expo.modules.ui-58.0.4.aar",
+          "size": 1789426,
+          "sha512": "408cceb3d6f97d29c6e734ab578c86c5c2c3f65fba19170bf1edc1f30648e6906b3a0e2284f1721543450bb579ddf37e54b00a51d21f9e5d77ad82e0857fef02",
+          "sha256": "7576f0fb76c81d2a1925ffa93e4175b8ab41c4c47a7c4c375b73707812438133",
+          "sha1": "77a2cb3cfd3195ad299b84c7d844dcb10d52fbe9",
+          "md5": "317b952ccecb056bea4a1e5b20b7b5bf"
         }
       ]
     },
@@ -141,13 +141,13 @@
       ],
       "files": [
         {
-          "name": "expo.modules.ui-58.0.2.aar",
-          "url": "expo.modules.ui-58.0.2.aar",
-          "size": 1789469,
-          "sha512": "dfe706437f10aa521a458896b97fa14d945cf66c80dab9cc43fddd444cddd016073b783076f38ba90e07c5076b8752bf66e136ce9c40d85195cf27a231ce7f9d",
-          "sha256": "8faeae3cb56c1d29d1a120a9a8c1964e6015ba993519f244283855a066a1704c",
-          "sha1": "dac5e40669e0f7832763a444814375947cfc1d1c",
-          "md5": "df649a67c82e5ea67b2cbf457d10bb0a"
+          "name": "expo.modules.ui-58.0.4.aar",
+          "url": "expo.modules.ui-58.0.4.aar",
+          "size": 1789426,
+          "sha512": "408cceb3d6f97d29c6e734ab578c86c5c2c3f65fba19170bf1edc1f30648e6906b3a0e2284f1721543450bb579ddf37e54b00a51d21f9e5d77ad82e0857fef02",
+          "sha256": "7576f0fb76c81d2a1925ffa93e4175b8ab41c4c47a7c4c375b73707812438133",
+          "sha1": "77a2cb3cfd3195ad299b84c7d844dcb10d52fbe9",
+          "md5": "317b952ccecb056bea4a1e5b20b7b5bf"
         }
       ]
     },
@@ -161,13 +161,13 @@
       },
       "files": [
         {
-          "name": "expo.modules.ui-58.0.2-sources.jar",
-          "url": "expo.modules.ui-58.0.2-sources.jar",
-          "size": 106165,
-          "sha512": "59ec9e524c62a8b77c41e894e4833d24d2c9bb1912ef1be23d81ab6eb04bcf1f8743cdc11528bf2630b0f1f29db20b017e8015ebde418530196d7dcea06a90bc",
-          "sha256": "297ecd2b76dbb6908b0b2897c6adba6be5dd10cb16c8ca169525a40e207d52c2",
-          "sha1": "51a2f1006c7baddabf82bef24f20526a08f172ed",
-          "md5": "8794b8164746750abcd5634353883d4b"
+          "name": "expo.modules.ui-58.0.4-sources.jar",
+          "url": "expo.modules.ui-58.0.4-sources.jar",
+          "size": 106170,
+          "sha512": "d105c1535934d743de599730ba9b0501a424eece52f1a4190b3764b4e7e280be42e3c9b880e4f80bef8ab6299938a0da275c00d342c593fd54375574d0ecd3ae",
+          "sha256": "c42bba76435f8b36b4fc0ed86a8290f9e1ccaa3a0ebe4cb6e77d029a4be92be6",
+          "sha1": "749807825339b7f72362b37e830ea704ec60f72d",
+          "md5": "feafc8819618513e9a38001814fc14e2"
         }
       ]
     }

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.module.md5

@@ -0,0 +1 @@
+6f395b4604efe8cb782c2d07ed0a034f

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.module.sha1

@@ -0,0 +1 @@
+a5735cfc927a4a919d056a8d002778b3b03a9571

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.module.sha256

@@ -0,0 +1 @@
+6ac59cdec02bfaab3cc9a0201b3f3efc2472ebdae06731eb1754f50be6adeb56

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.module.sha512

@@ -0,0 +1 @@
+dd59787b0055dc18c4dae85147258bdbce099df415a74de7bd47a403b17d9138fdffbf7351e383761e9bea7c3c7aa72ed062784da242edfa312a4d8a4703e4dd

package/local-maven-repo/expo/modules/ui/expo.modules.ui/{58.0.2/expo.modules.ui-58.0.2.pom → 58.0.4/expo.modules.ui-58.0.4.pom}

@@ -9,7 +9,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
-  <version>58.0.2</version>
+  <version>58.0.4</version>
   <packaging>aar</packaging>
   <name>expo.modules.ui</name>
   <url>https://github.com/expo/expo</url>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.pom.md5

@@ -0,0 +1 @@
+7d3bc2e18bfdc6ff7dde3b9952e57b0d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.pom.sha1

@@ -0,0 +1 @@
+686f495f389f5d58061c48dd2be09c59dff6d282

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.pom.sha256

@@ -0,0 +1 @@
+ed17ef29d2de582e5dd219506d2f5c6a83ae6b9499877a208b82c4642389afab

package/local-maven-repo/expo/modules/ui/expo.modules.ui/58.0.4/expo.modules.ui-58.0.4.pom.sha512

@@ -0,0 +1 @@
+ec8c0d91c6f8c40ced69d655e02868faa9945e2417cd82852b5455e3ddec9a1a23b14093fbb0e07093570af8823812af20ad0a61d84c035ae88fb093d0aee7fd

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml

@@ -3,11 +3,11 @@
   <groupId>expo.modules.ui</groupId>
   <artifactId>expo.modules.ui</artifactId>
   <versioning>
-    <latest>58.0.2</latest>
-    <release>58.0.2</release>
+    <latest>58.0.4</latest>
+    <release>58.0.4</release>
     <versions>
-      <version>58.0.2</version>
+      <version>58.0.4</version>
     </versions>
-    <lastUpdated>20260915202028</lastUpdated>
+    <lastUpdated>20260921105157</lastUpdated>
   </versioning>
 </metadata>

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.md5

@@ -1 +1 @@
-d7c3c6a248e2d4455c24cf0936e1758b
+aeb3687fda3babb900b2707c7eccdb58

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha1

@@ -1 +1 @@
-3458af1a4a9a6ab21225912c0e7698e4e8a92256
+dd275fe2064eb6646022d5d7a7267798f746ae78

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha256

@@ -1 +1 @@
-28e20d52b7f98238d64827356e5527fa7d8a6305534bc7487a122234f0c6d4ea
+bf551fbc49828d971a3be529217cfc4eabd7be7be59392253769cf5e900a2f80

package/local-maven-repo/expo/modules/ui/expo.modules.ui/maven-metadata.xml.sha512

@@ -1 +1 @@
-8d39d2c57f8dec121f2ad766fd9efc4754a79752aa34839a211ad40f950c1fe0497e1f226bbf2feec15f532b92d7e8fa84d70e4e82a60e770788d28e9ea691f1
+be2b24ecf8748c7315ba41f174f8b07f3150d103136753794b87a2793af26ee5ae9c7bc4d0620dd6d6af95e0bd56bc8895b6c9ab35e1929a19e3c8fe3bda6d27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "58.0.2",
+  "version": "58.0.4",
   "description": "A collection of UI components",
   "keywords": [
     "Jetpack Compose",
@@ -147,7 +147,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/jest": "^29.2.1",
     "@types/node": "^22.14.0",
-    "@types/react": "~19.2.0",
+    "@types/react": "~19.3.0",
     "expo-module-scripts": "56.0.3",
     "react-native-reanimated": "4.6.0",
     "react-native-worklets": "0.12.2"
@@ -171,7 +171,7 @@
       "optional": true
     }
   },
-  "gitHead": "313e67f5c9dfb16f9deca74a271cd1d4f33a6f82",
+  "gitHead": "ebb1fd7569c9c9e172cb9abd73dfede027c1d674",
   "scripts": {
     "precompile-ios": "et prebuild-package-for-publish",
     "build": "pnpm run build:lib && pnpm run build:plugin",

package/src/swift-ui/NavigationSplitView/index.tsx

@@ -0,0 +1,122 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export type NavigationSplitViewVisibility = 'automatic' | 'all' | 'doubleColumn' | 'detailOnly';
+
+/**
+ * The column shown when the split view collapses into a single column.
+ */
+export type NavigationSplitViewColumn = 'sidebar' | 'content' | 'detail';
+
+export interface NavigationSplitViewProps extends CommonViewModifierProps {
+  /**
+   * The columns of the split view. Provide `NavigationSplitView.Sidebar` and
+   * `NavigationSplitView.Detail`, and add `NavigationSplitView.Content` for a
+   * three-column layout.
+   */
+  children: React.ReactNode;
+  /**
+   * The columns to show. Setting it makes the value controlled: pass the value from
+   * `onColumnVisibilityChange` back in, otherwise dragging the divider has no effect.
+   * Leave it unset to let the split view manage its own columns.
+   * @default 'automatic'
+   */
+  columnVisibility?: NavigationSplitViewVisibility;
+  /**
+   * Called when the visible columns change, including when the user drags the sidebar.
+   */
+  onColumnVisibilityChange?: (visibility: NavigationSplitViewVisibility) => void;
+  /**
+   * The column to show when the split view collapses to a single column, for example
+   * in a narrow window. Setting it makes the value controlled in the same way as
+   * `columnVisibility`.
+   * @default 'sidebar'
+   * @platform ios 17.0+
+   */
+  preferredCompactColumn?: NavigationSplitViewColumn;
+  /**
+   * Called when the collapsed column changes.
+   * @platform ios 17.0+
+   */
+  onPreferredCompactColumnChange?: (column: NavigationSplitViewColumn) => void;
+}
+
+type NativeNavigationSplitViewProps = Omit<
+  NavigationSplitViewProps,
+  'onColumnVisibilityChange' | 'onPreferredCompactColumnChange'
+> & {
+  onColumnVisibilityChange?: (event: {
+    nativeEvent: { visibility: NavigationSplitViewVisibility };
+  }) => void;
+  onPreferredCompactColumnChange?: (event: {
+    nativeEvent: { column: NavigationSplitViewColumn };
+  }) => void;
+};
+
+const NavigationSplitViewNativeView: React.ComponentType<NativeNavigationSplitViewProps> =
+  requireNativeView('ExpoUI', 'NavigationSplitViewView');
+
+function NavigationSplitViewSidebar(props: { children: React.ReactNode }) {
+  return <Slot name="sidebar">{props.children}</Slot>;
+}
+
+function NavigationSplitViewContent(props: { children: React.ReactNode }) {
+  return <Slot name="content">{props.children}</Slot>;
+}
+
+function NavigationSplitViewDetail(props: { children: React.ReactNode }) {
+  return <Slot name="detail">{props.children}</Slot>;
+}
+
+NavigationSplitView.Sidebar = NavigationSplitViewSidebar;
+NavigationSplitView.Content = NavigationSplitViewContent;
+NavigationSplitView.Detail = NavigationSplitViewDetail;
+
+/**
+ * NavigationSplitView uses the native [NavigationSplitView](https://developer.apple.com/documentation/swiftui/navigationsplitview) view.
+ *
+ * It presents a collection, a selection and a detail in one hierarchy: side by side
+ * when there is room, and stacked when there is not.
+ * @example
+ * ```tsx
+ * <Host style={{ flex: 1 }}>
+ *   <NavigationSplitView>
+ *     <NavigationSplitView.Sidebar>
+ *       <List>{items}</List>
+ *     </NavigationSplitView.Sidebar>
+ *     <NavigationSplitView.Detail>
+ *       <ItemDetail item={selectedItem} />
+ *     </NavigationSplitView.Detail>
+ *   </NavigationSplitView>
+ * </Host>
+ * ```
+ * @platform ios 16.0+
+ * @platform tvos 16.0+
+ */
+export function NavigationSplitView(props: NavigationSplitViewProps) {
+  const {
+    modifiers,
+    children,
+    onColumnVisibilityChange,
+    onPreferredCompactColumnChange,
+    ...restProps
+  } = props;
+
+  return (
+    <NavigationSplitViewNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      onColumnVisibilityChange={({ nativeEvent: { visibility } }) =>
+        onColumnVisibilityChange?.(visibility)
+      }
+      onPreferredCompactColumnChange={({ nativeEvent: { column } }) =>
+        onPreferredCompactColumnChange?.(column)
+      }
+      {...restProps}>
+      {children}
+    </NavigationSplitViewNativeView>
+  );
+}