xref: /expo/home/menu/DevMenuApp.tsx (revision 8a424beb)
1import { ThemeProvider } from '@react-navigation/native';
2import { ThemePreference, ThemeProvider as DCCThemeProvider } from 'expo-dev-client-components';
3import React from 'react';
4import { AppRegistry, useColorScheme } from 'react-native';
5import { GestureHandlerRootView } from 'react-native-gesture-handler';
6import { SafeAreaProvider } from 'react-native-safe-area-context';
7
8import DevMenuBottomSheet from './DevMenuBottomSheet';
9import { DevMenuView } from './DevMenuView';
10import { ColorTheme } from '../constants/Colors';
11import Themes from '../constants/Themes';
12import LocalStorage from '../storage/LocalStorage';
13
14function useUserSettings(renderId: string): { preferredAppearance?: string } {
15  const [settings, setSettings] = React.useState({});
16
17  React.useEffect(() => {
18    async function getUserSettings() {
19      const settings = await LocalStorage.getSettingsAsync();
20      setSettings(settings);
21    }
22
23    getUserSettings();
24  }, [renderId]);
25
26  return settings;
27}
28
29function useAppColorScheme(uuid: string): ColorTheme {
30  const colorScheme = useColorScheme();
31  const { preferredAppearance = undefined } = useUserSettings(uuid);
32
33  let theme = preferredAppearance === undefined ? colorScheme : preferredAppearance;
34  if (theme === undefined) {
35    theme = 'light';
36  }
37  return theme === 'light' ? ColorTheme.LIGHT : ColorTheme.DARK;
38}
39
40class DevMenuRoot extends React.PureComponent<
41  { task: { manifestUrl: string; manifestString: string }; uuid: string },
42  any
43> {
44  render() {
45    return <DevMenuApp {...this.props} />;
46  }
47}
48
49function DevMenuApp(props: {
50  task: { manifestUrl: string; manifestString: string };
51  uuid: string;
52}) {
53  const theme = useAppColorScheme(props.uuid);
54
55  return (
56    <GestureHandlerRootView style={{ flex: 1 }}>
57      <SafeAreaProvider>
58        <DevMenuBottomSheet uuid={props.uuid}>
59          <DCCThemeProvider themePreference={theme as ThemePreference}>
60            <ThemeProvider value={Themes[theme]}>
61              <DevMenuView {...props} />
62            </ThemeProvider>
63          </DCCThemeProvider>
64        </DevMenuBottomSheet>
65      </SafeAreaProvider>
66    </GestureHandlerRootView>
67  );
68}
69
70AppRegistry.registerComponent('HomeMenu', () => DevMenuRoot);
71