‹ System UI

Types

Types

The types of system ui.

SectionSystem UIDraftDocumented, not reviewed yet: the API can change.

SafeAreaEdge

Type

An edge of the screen: 'top', 'right', 'bottom' or 'left'. The edges are physical: in a right-to-left layout 'left' stays the left side. A value outside these four is ignored.

type SafeAreaEdge = 'top' | 'right' | 'bottom' | 'left'

Defined in src/interfaces/options/system.ts ↗

LayoutOrientation

Type

An orientation a screen allows. 'all' and 'sensor' allow all four sides; 'portrait' the upright portrait; 'upsideDown' the upside-down portrait; 'landscape' and 'sensorLandscape' both landscape sides; 'sensorPortrait' both portrait sides; 'default' the orientations the app declares (Info.plist on iOS, the manifest on Android). The screen allows the union of the sides of all its values. An unknown value is dropped.

type LayoutOrientation =
  | 'all'
  | 'default'
  | 'portrait'
  | 'landscape'
  | 'upsideDown'
  | 'sensor'
  | 'sensorLandscape'
  | 'sensorPortrait'

Defined in src/interfaces/options/system.ts ↗

NavigationDirection

Type

The direction of the app: right to left, left to right, or as the language of the app.

type NavigationDirection = 'ltr' | 'rtl' | 'locale'

Defined in src/api/theme/theme.ts ↗

OptionsScrollEdge

Interface

(iOS 26+) The scroll edge effect of one edge of the scroll views of a screen.

interface OptionsScrollEdge

Member	Type	Description
hidden	boolean	Whether the effect of this edge is hidden. Without it, the value of scrollEdgeEffect.hidden.
style	ScrollEdgeEffectStyle	The style of this edge: 'automatic', 'soft' or 'hard'. Without it, scrollEdgeEffect.style, and without that, 'automatic'.

Defined in src/interfaces/options/topBar.ts ↗

EdgeInsets

Interface

How much of a screen's content the bars and the system cover on each side, past the screen's own padding: points on iOS, dp on Android.

interface EdgeInsets

Member	Type	Description
topRequired	number
rightRequired	number
bottomRequired	number
leftRequired	number

Defined in src/api/safeArea/screenInsets.ts ↗

KeyCommandPressedEvent

Type

type KeyCommandPressedEvent = NavigationEvents['keyCommandPressed']

Member	Type	Description
keyCommandIdRequired	string	The id of the key command, as set in the keyCommands of the screen.
screenRequired	ScreenRef

Defined in src/api/events/navigationEvents.ts ↗

ReservedRegion

Interface

A part of a screen in its coordinates: points on iOS, dp on Android.

interface ReservedRegion

Member	Type	Description
xRequired	number
yRequired	number
widthRequired	number
heightRequired	number

Defined in src/api/safeArea/screenRegions.ts ↗

ReservedRegions

Interface

The parts of a screen the hardware takes.

interface ReservedRegions

Member	Type	Description
divisionRequired	ReservedRegion[]	Where the screen divides: the fold of a partly folded device. Keep controls and text off it.
occlusionRequired	ReservedRegion[]	Where hardware covers the screen: a camera, a hinge that hides what is under it.

Defined in src/api/safeArea/screenRegions.ts ↗

Hinge

Interface

The device's hinge.

interface Hinge

Member	Type	Description
stateRequired	'closed' | 'partiallyOpen' | 'fullyOpen' | 'unknown'	closed, partiallyOpen, fullyOpen (open as far as the device allows), or unknown. On Android closed is told by the hinge angle sensor: the app's window has no fold and the angle is below 90°.
angleRequired	number | null	Degrees: 0 closed, 180 open flat, beyond 180 on Android devices that fold back. Null where the platform gives no angle: on Android without a hinge sensor, and on iOS while the state is unknown.

Defined in src/api/hinge/hinge.ts ↗