Source: https://docs.expo.dev/versions/v52.0.0/sdk/system-ui

Hide navigation

Search

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 52

Archive Expo Snack Discord and Forums Newsletter

Expo SystemUI

GitHub Changelog npm

A library that allows interacting with system UI elements.

GitHub Changelog npm

Android

iOS

Web

Bundled version:

~4.0.9

Copy page

---

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.

Installation

---

Terminal

Copy

- npx expo install expo-system-ui

If you are installing this in an existing React Native app , make sure to install expo in your project.

API

---

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

Methods

---

SystemUI.getBackgroundColorAsync()

Android

iOS

Web

Gets the root view background color.

Returns:

[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) <[ColorValue](https://reactnative.dev/docs/colors) | null>

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

Example

const color = await SystemUI.getBackgroundColorAsync();

SystemUI.setBackgroundColorAsync(color)

Android

iOS

Web

| Parameter | Type | Description | | --- | --- | --- | | color | null \| [ColorValue](https://reactnative.dev/docs/colors) | Any valid CSS 3 (SVG) color<br>. |

Changes the root view background color. Call this function in the root file outside of you component.

Returns:

[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) <void>

Example

SystemUI.setBackgroundColorAsync("black");