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.json
file.dependencies: { ... "@amazon-devices/expo-system-ui": "~2.0.0", "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0", }
- Reinstall dependencies using
npm install
command.
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