Guides
Plan-enterprise-icon
Expo Application Services
API Reference

SystemUI

expo-system-ui enables you to interact with UI elements that fall outside of the React tree. Specifically the root view background color, and locking the user interface style globally on Android.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-success-icon

Installation

Terminal
→ npx expo install expo-system-ui

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

API

import * as SystemUI from 'expo-system-ui';

Methods

SystemUI.getBackgroundColorAsync()

Gets the root view background color.

Example

const color = await SystemUI.getBackgroundColorAsync();
  • Undo-iconPromise<ColorValue | null>

Current root view background color in hex format. Returns null if the background color is not set.

SystemUI.setBackgroundColorAsync(color)

NameTypeDescription
colorColorValue

Any valid CSS 3 (SVG) color.

Changes the root view background color.

Example

SystemUI.setBackgroundColorAsync("white");
  • Message-iconAsk a question on the forums about SystemUI
  • Github-iconView open bug reports for SystemUI
  • Code-iconView source code for SystemUI
  • Build-iconView package in npm Registry
  • Edit-iconEdit this page

Was this doc helpful?