1import * as SystemUI from 'expo-system-ui';
2import * as React from 'react';
3import { ColorValue, ScrollView } from 'react-native';
4
5import Button from '../components/Button';
6import { Page, Section } from '../components/Page';
7import { getRandomColor } from '../utilities/getRandomColor';
8
9export default function SystemUIScreen() {
10  return (
11    <ScrollView>
12      <Page>
13        <Section title="Background Color">
14          <BackgroundColorExample />
15        </Section>
16      </Page>
17    </ScrollView>
18  );
19}
20
21SystemUIScreen.navigationOptions = {
22  title: 'System UI',
23};
24
25function BackgroundColorExample() {
26  const [color, setColor] = React.useState<ColorValue | null>(null);
27
28  return (
29    <>
30      <Button
31        onPress={() => SystemUI.setBackgroundColorAsync(getRandomColor())}
32        title="Set background color to random color"
33      />
34      <Button
35        onPress={async () => setColor(await SystemUI.getBackgroundColorAsync())}
36        title={`Get background color: ${color?.toString()}`}
37      />
38    </>
39  );
40}
41