as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

expo-system-ui

@amazon-devices/expo-system-ui allows interacting with system UI elements that fall outside of the React tree. Specifically the root view background color.

Installation

  1. Add the JavaScript library dependency in the package.json file.

    Copied to clipboard.

     dependencies: {
         ...
         "@amazon-devices/expo-system-ui": "~2.0.0",
         "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
     }
    
  2. Reinstall dependencies using npm install command.

Examples

Copied to clipboard.

import React, {useState} from 'react';
import {StyleSheet, View, Button} from 'react-native';
import * as SystemUI from '@amazon-devices/expo-system-ui';
import {ColorValue} from 'react-native';

export const App = () => {
  const [backgroundColor, setBackgroundColor] = useState<ColorValue | null>(
    '#0000ff',
  );

  const changeBackgroundColor = async (color: string | null) => {
    console.log(backgroundColor);
    await SystemUI.setBackgroundColorAsync(color);
    setBackgroundColor(await SystemUI.getBackgroundColorAsync());
  };

  return (
    <View style={[styles.container, backgroundColor ? {backgroundColor} : {}]}>
      <Button
        title="Change background color"
        onPress={() =>
          changeBackgroundColor(
            backgroundColor === '#0000ff' ? '#ff0000' : '#0000ff',
          )
        }
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

API reference

Check out the dedicated documentation page for info about this library, API reference and more: Official Expo documentation for expo-system-ui.

Methods

Method Description
getBackgroundColorAsync Gets the root view background color
setBackgroundColorAsync Changes the root view background color

Supported versions

Package Version Based On @amazon-devices/react-native-kepler version
2.0.x 2.7.0 2.0.x

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.


Last updated: Sep 30, 2025