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
- Add the JavaScript library dependency in the package.jsonfile.dependencies: { ... "@amazon-devices/expo-system-ui": "~2.0.0", "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0", }
- Reinstall dependencies using npm installcommand.
Examples
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

