as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
AWS
ドキュメント
Support
Contact Us
My Cases
開発
設計と開発
公開
リファレンス
サポート
アクセスいただきありがとうございます。こちらのページは現在英語のみのご用意となっております。順次日本語化を進めてまいりますので、ご理解のほどよろしくお願いいたします。

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