‹ Arrangement

Types

Types

The types of arrangement.

SectionArrangementDraftDocumented, not reviewed yet: the API can change.

Arrangement

Interface

An entry of screens made by defineArrangement.

interface Arrangement<Props extends object = {}>

Member	Type	Description
definitionRequired	ArrangementDefinition<Props>
props	Props	Carries the type of the props; never set.

Defined in src/api/screens/arrangement.ts ↗

ArrangementDefinition

Interface

A pair under a name of its own, with every setting: defineArrangement.

interface ArrangementDefinition<Props extends object = {}> extends ScreenArrangement<Props>

Member	Type	Description
primaryRequired	string	The screen that owns the bar: its title, buttons, toolbar and status bar are the pair's. It shows alone outside a large window (compact: 'primary'), and primaryEdge puts it on either side. A name of screens.
axes	'horizontal' | 'vertical' | 'both'	The axes the pair may use. Where the window allows none of them, only the primary shows.
fraction	number	split: the primary's share along the split, above 0 and below 1, where the fold does not decide.
primaryEdge	'leading' | 'trailing' | 'top' | 'bottom'	The edge the primary takes. split: leading or top puts the primary first, at the leading side or on top; trailing or bottom puts it second, at the trailing side or at the bottom (one setting for both ways the pair may lie). overlay: the primary's edge when the pair goes side by side; an edge of the other axis counts as the nearest one (top as leading, bottom as trailing). Whatever the edge, the primary is the screen that shows alone outside a large window with compact: 'primary': to show the other screen there, make it the primary.
compact	'primary' | 'pair'	Outside a large window: primary — the primary alone, as a plain screen; pair — the pair as the system lays it out (one above the other on a phone held upright).
secondaryRequired	string	The screen beside or under this one: a name of screens. What belongs to the whole window is the primary's: the secondary's topBar, toolbar, statusBar and layout.orientation have no effect (iOS: also the home indicator, the deferred system gestures and layout.verticalBars; Android: also navigationBar).
secondaryProps	(props: Props) => object	The props of the secondary from those of the show; without it the same props.
style	'split' | 'overlay'	split: side by side, each on its side of the fold of a partly folded device. overlay: this screen over the secondary, both full size; side by side on a partly folded device.

Defined in src/api/screens/arrangement.ts ↗

ScreenArrangement

Interface

A screen with a second screen beside or under it in a large window (iPad, iPhone Duo open, Android tablets and open foldables): arrangement of defineScreen and nativeScreen. Anywhere else (any phone, iPhone Duo folded, iOS before 27.1) the screen shows alone, as a plain screen.

interface ScreenArrangement<Props extends object = {}>

Member	Type	Description
secondaryRequired	string	The screen beside or under this one: a name of screens. What belongs to the whole window is the primary's: the secondary's topBar, toolbar, statusBar and layout.orientation have no effect (iOS: also the home indicator, the deferred system gestures and layout.verticalBars; Android: also navigationBar).
secondaryProps	(props: Props) => object	The props of the secondary from those of the show; without it the same props.
style	'split' | 'overlay'	split: side by side, each on its side of the fold of a partly folded device. overlay: this screen over the secondary, both full size; side by side on a partly folded device.

Defined in src/api/screens/arrangement.ts ↗

ArrangementState

Interface

How a screen of a pair (defineArrangement) shows now.

interface ArrangementState

Member	Type	Description
placementRequired	'primary' | 'secondary'	Which view of the pair this screen is.
layoutRequired	'sideBySide' | 'stacked' | 'overlay' | 'single'	How the pair lies: sideBySide, stacked (one above the other), overlay (one over the other, both full size), single (only one view is in the window).
frontRequired	boolean	overlay: this view lies over the other one.
hiddenRequired	boolean	single: this screen is out of the window.

Defined in src/api/arrangement/arrangementState.ts ↗