SplitView

Native UISplitViewController for iPad multi-column layouts under One.iOS.SplitView

One.iOS.SplitView is the native UISplitViewController from react-native-screens, for iPad multi-column layouts. SplitView.Column markers map to the native screen columns and the routed detail arrives through slot; SplitView.Inspector marks an inspector column the same way. On iPhone it collapses to a single column automatically.

Place SplitView in a root layout. It can render through Slot, but cannot be nested inside Stack, Tabs, Drawer, or another SplitView; One rejects that placement before mounting the native split controller.

Usage

import { Text } from 'react-native'
import { One } from 'one'

function SidebarContent() {
  return <Text>Sidebar</Text>
}

function Detail() {
  return <Text>Detail</Text>
}

function Layout() {
  return (
    <One.iOS.SplitView slot={Detail}>
      <One.iOS.SplitView.Column>
        <SidebarContent />
      </One.iOS.SplitView.Column>
    </One.iOS.SplitView>
  )
}

How it works

The SplitView.Column and SplitView.Inspector markers must be direct children of SplitView; One maps them to the native screen columns and supplies the routed detail through slot. At most two columns are allowed, and a SplitView with no column or inspector warns and renders the slot alone. Only one SplitView may live in the navigation hierarchy, and one nested inside another navigator throws unless it renders through Slot.

import { one } from 'one/vite'

one({
  native: {
    app: {
      name: 'MyApp',
      ios: {
        bundleId: 'com.example.myapp',
        screensGamma: true,
      },
      android: { applicationId: 'com.example.myapp' },
    },
  },
})

Platform differences

Off iOS, SplitView warns and renders the slot alone.

Limits and gotchas

• Root layout only. Nesting inside Stack, Tabs, Drawer, or another SplitView throws; rendering through Slot is the one exception.
• Markers are direct. Column and Inspector must be direct children, with at most two columns.
• Gamma mode is required. Without screensGamma, the native split controller the binding maps to is unavailable.

Credit

The native split-view implementation is adapted from Expo Router.