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'; 6 7import { ColorTheme } from '../constants/Colors'; 8import Themes from '../constants/Themes'; 9import LocalStorage from '../storage/LocalStorage'; 10import DevMenuBottomSheet from './DevMenuBottomSheet'; 11import { DevMenuView } from './DevMenuView'; 12 13function useUserSettings(renderId: string): { preferredAppearance?: string } { 14 const [settings, setSettings] = React.useState({}); 15 16 React.useEffect(() => { 17 async function getUserSettings() { 18 const settings = await LocalStorage.getSettingsAsync(); 19 setSettings(settings); 20 } 21 22 getUserSettings(); 23 }, [renderId]); 24 25 return settings; 26} 27 28function useAppColorScheme(uuid: string): ColorTheme { 29 const colorScheme = useColorScheme(); 30 const { preferredAppearance = undefined } = useUserSettings(uuid); 31 32 let theme = preferredAppearance === undefined ? colorScheme : preferredAppearance; 33 if (theme === undefined) { 34 theme = 'light'; 35 } 36 return theme === 'light' ? ColorTheme.LIGHT : ColorTheme.DARK; 37} 38 39class DevMenuRoot extends React.PureComponent<{ task: { [key: string]: any }; uuid: string }, any> { 40 render() { 41 return <DevMenuApp {...this.props} />; 42 } 43} 44 45function DevMenuApp(props: { task: { [key: string]: any }; uuid: string }) { 46 const theme = useAppColorScheme(props.uuid); 47 48 return ( 49 <GestureHandlerRootView style={{ flex: 1 }}> 50 <DevMenuBottomSheet uuid={props.uuid}> 51 <DCCThemeProvider themePreference={theme as ThemePreference}> 52 <ThemeProvider value={Themes[theme]}> 53 <DevMenuView {...props} /> 54 </ThemeProvider> 55 </DCCThemeProvider> 56 </DevMenuBottomSheet> 57 </GestureHandlerRootView> 58 ); 59} 60 61AppRegistry.registerComponent('HomeMenu', () => DevMenuRoot); 62