Adaptive Layout

Size classes, foldable hinges, reserved regions, and window segments

Phones, tablets, split screens, and foldables give an app windows of very different shapes. These hooks tell a layout what it is working with, in the terms each platform uses:

• Size class: whether the window is compact or regular in each axis. Branch on this rather than raw width.
• Hinge: a foldable’s posture and angle.
• Reserved regions: areas inside your layout that content should avoid, such as a fold across the middle or a camera on an inner display, and the window segments they leave free.

All of them are named imports from one, and the readings are already current on the first render.

Usage

import { useSizeClass } from 'one'

function Inbox() {
  const { horizontal } = useSizeClass()
  return horizontal === 'regular' ? <SplitInbox /> : <StackedInbox />
}

useSizeClass re-renders when the window changes class, for example when an iPad app enters split view or a foldable opens.

How it works

Size class and hinge come from a Nitro module, OneAdaptive. When one is imported it reads both synchronously from native code, so the first render never shows a default and then flips. The first component that subscribes starts the native monitor; when the last one unmounts the monitor stops, and the next subscriber reads a fresh value.

• iOS reads the window scene’s horizontalSizeClass and verticalSizeClass traits and re-reads them when the trait collection changes (rotation, split view, Stage Manager). The hinge comes from UIHingeInteraction on iOS 27.1 and later.
• Android applies the Jetpack window size class breakpoints to the activity’s WindowMetrics: width below 600dp is compact, height below 480dp is compact, anything else is regular. It re-reads on configuration and window metrics changes. The hinge posture comes from Jetpack WindowManager’s FoldingFeature (FLAT is fully open, HALF_OPENED is partially open) and the angle from the hinge sensor.

Reserved regions come from a native view, One.UI.ReservedRegions.Provider, that reports the regions inside its own bounds. On iOS 27.1 they are UIKit’s reservedRegions and update as the hinge moves. On Android a fold from Jetpack WindowManager is a division, active while it separates or fully covers the display and inactive while the device lies flat, and each display cutout is an occlusion. Window segments are computed in JavaScript: each active division that spans the provider edge to edge cuts it in two.

API reference

Platform differences

Limits and gotchas

• unspecified is a real value. Treat it like compact unless you know better, so an unusual window gets the narrow layout.
• A hinge sensor without a fold reads closed only at 0°. On Android, when the window has no FoldingFeature, the status is closed only for an official 0° sensor reading and unknown otherwise, with the sensor angle kept. A device with no hinge at all reads null.
• Segments need a full-window provider. Window segments are computed inside the provider’s bounds, so wrap the screen, not a child view.
• Unsubscribe onHingeChange. Call the function it returns when the owner unmounts. The hooks clean up on their own.

Examples

import { View } from 'react-native'
import { One, useWindowSegments, type WindowSegment } from 'one'

function Board() {
  const segments = useWindowSegments()
  if (segments.length < 2) return <Canvas />
  const [first, second] = segments
  return (
    <View style={{ flex: 1 }}>
      <View style={place(first)}><Canvas /></View>
      <View style={place(second)}><Palette /></View>
    </View>
  )
}

function place({ x, y, width, height }: WindowSegment) {
  return { position: 'absolute', left: x, top: y, width, height } as const
}

export default function Screen() {
  return (
    <One.UI.ReservedRegions.Provider style={{ flex: 1 }}>
      <Board />
    </One.UI.ReservedRegions.Provider>
  )
}

Each segment is a rect in the provider’s coordinates, so it maps straight to an absolutely positioned view. When the device is not split, there is one segment and the canvas fills the screen.

import { onHingeChange } from 'one'

const stop = onHingeChange((hinge) => {
  if (hinge?.status === 'partiallyOpen') pauseVideo()
})

The callback gets null on a device without a hinge, so check before reading status.

ArrangementView

One.iOS.ArrangementView hosts SwiftUI’s ArrangementView on iOS 27.1 and later, and throws on earlier versions. It places a primary and a secondary pane side by side (split), one over the other (overlay), or lets SwiftUI choose for the window (automatic). On web it renders the two panes in a row.

import { One } from 'one'

function Workspace() {
  return (
    <One.iOS.ArrangementView
      arrangementViewStyle="split"
      splitArrangementLayoutRatio={0.5}
      primary={<Chat />}
      secondary={<Preview />}
    />
  )
}

Each pane can also be a child, ArrangementView.Primary and ArrangementView.Secondary, which take the same split and overlay props to size that pane alone. Leading and Detail are aliases for them.