1import { ThemeProvider } from '@react-navigation/native'; 2import React from 'react'; 3import { AppRegistry } from 'react-native'; 4import { AppearanceProvider, useColorScheme } from 'react-native-appearance'; 5 6import * as Themes from '../constants/Themes'; 7import LocalStorage from '../storage/LocalStorage'; 8import DevMenuBottomSheet from './DevMenuBottomSheet'; 9import DevMenuView from './DevMenuView'; 10 11function useUserSettings(renderId): { preferredAppearance?: string } { 12 const [settings, setSettings] = React.useState({}); 13 14 React.useEffect(() => { 15 async function getUserSettings() { 16 const settings = await LocalStorage.getSettingsAsync(); 17 setSettings(settings); 18 } 19 20 getUserSettings(); 21 }, [renderId]); 22 23 return settings; 24} 25 26function useAppColorScheme(uuid: string) { 27 const colorScheme = useColorScheme(); 28 const { preferredAppearance = 'no-preference' } = useUserSettings(uuid); 29 30 let theme = preferredAppearance === 'no-preference' ? colorScheme : preferredAppearance; 31 if (theme === 'no-preference') { 32 theme = 'light'; 33 } 34 return theme; 35} 36 37class DevMenuRoot extends React.PureComponent<any, any> { 38 render() { 39 return <DevMenuApp {...this.props} />; 40 } 41} 42 43function DevMenuApp(props) { 44 const theme = useAppColorScheme(props.uuid); 45 return ( 46 <AppearanceProvider> 47 <DevMenuBottomSheet uuid={props.uuid}> 48 <ThemeProvider value={Themes[theme]}> 49 <DevMenuView {...props} /> 50 </ThemeProvider> 51 </DevMenuBottomSheet> 52 </AppearanceProvider> 53 ); 54} 55 56AppRegistry.registerComponent('HomeMenu', () => DevMenuRoot); 57