Options
The options of system ui.
Options
Every key, with the platforms it works on. A dashed platform means the key does nothing there.
15 options shown
The screen's layout: its background, safe area, orientation.
The edges on which the screen keeps its content out of what covers it: the bars, the status bar, the home indicator or navigation bar, the camera cutout. [] lets the content reach every edge. The array replaces the one from a lower layer. The screen adds the padding itself; useSafeAreaInsets() returns what is still covered, which is 0 on an edge the screen keeps and the whole covered size on an edge where the content goes under a bar. Edges listed here win, but the top under a large title: there the list keeps its first rows clear of the bar itself and scrolls under it, which collapses the title, so a 'top' listed here counts for nothing.
Without it the screen keeps the top and the sides, and its content goes down to the bottom: under the home indicator or the navigation bar, and under a tab bar or toolbar it goes under. A list keeps its last rows clear with useSafeAreaInsets().bottom. The top is free where the content goes under a top bar: on iOS under a bar that shows, on Android under a bar that hides on scroll; on both under a large title, so the list scrolls under the bar. On iOS the side of a vertical bar is free too. To have the screen keep the bottom, list every edge it keeps: listed edges replace the default.
The color of the screen, also under its React content. On iOS it is the background of the screen's view (the system background without it); stacks, tabs and side menus paint their view with the color of the screen that shows, seen behind transparent bars and around screens during transitions. On Android it fills the screen and its containers but leaves room at the top for the status bar while it shows; without it a React screen takes android:colorBackground of the app's theme (in a sheet it shows the sheet's surface, and a native screen paints its own view), so the screen below never shows through. null makes the background transparent.
The color under the React content only, drawn over backgroundColor, for content that should differ from the screen around it. Without it, backgroundColor shows under the content. null removes the color.
The orientations the screen allows. The screen on top decides. An empty array, or no value in any layer, leaves the orientations of the app. The array replaces the one from a lower layer. The change applies when the screen appears and at once through mergeOptions; the interface turns by itself if the current orientation is no longer allowed. On iOS 15 the interface only turns if the device is held in an allowed orientation. On iOS a modal decides only when it covers the whole screen (fullScreen, overFullScreen); under a sheet or a popover the screen below keeps deciding. On Android a sheet decides like any modal. An overlay decides only when its own options set it. The system does not apply the request on large screens: an iPad that runs in multitasking, and on Android 16 an app that targets API 36 on a screen at least 600 dp wide.
(iOS 27.1+) Whether the bars and the status bar of the screen may stand in a vertical strip at the side, as on iPhone Duo. false keeps them horizontal; without it, the system decides. Set it once for a screen rather than switching it by state. With false the screen has no vertical strip, so drawBehindVerticalBar has no side to act on. It does nothing before iOS 27.1 or in an app built with an older SDK.
(iOS 27.1+) Whether the screen goes under the vertical bar of iPhone Duo, as it goes under a top bar: a list draws its blur up to the edge and keeps its rows clear of the bar itself with useSafeAreaInsets(). false keeps the content outside the bar like any other safe area edge. Explicit safeAreaEdges decide in its place. The side is the physical side where the bar stands. It updates with every layout and with mergeOptions.
Whether the system hides the home indicator after the user has not touched the screen for a while and shows it again on touch, for video, games or photos. The value comes from the screen on top with its containers, read when the system asks, and mergeOptions applies it at once.
The edges that give the app the first swipe the system would take (home from the bottom, the notification and control centers from the top). The system shows a hint, and a second swipe runs its gesture. The edges are physical and do not swap in a right-to-left layout. Without it, no edge is deferred. It applies after the screen appears and at once through mergeOptions.
Whether the screen makes room for the keyboard. true ends the React content above the keyboard (the bottom inset is the larger of the keyboard and the navigation bar); false keeps the size of the screen and lets the keyboard cover its bottom, as on iOS, for a screen that handles the keyboard itself. It needs edge-to-edge: without it the system resizes the window by the manifest's windowSoftInputMode, and the option changes nothing. mergeOptions applies it at once, also with the keyboard open. On iOS the keyboard always covers the screen.
The status bar while the screen shows.
(iOS 26+) How the content fades or blurs where it scrolls under a bar.
The keyboard shortcuts of the screen, shown by the system when a hardware keyboard is held.
Whether a text field of the screen loses the focus, and the keyboard hides, as the screen leaves: when the transition that takes it away starts (a pop, a modal's dismiss, a new stack root or app root), so the keyboard doesn't stay up during the transition.