1import React from 'react'; 2import {StyleSheet, View} from 'react-native'; 3 4import NavBar from './components/navBar'; 5import Operations from './components/operations'; 6import MySheets from './components/mySheets'; 7import MusicBar from '@/components/musicBar'; 8import {createDrawerNavigator} from '@react-navigation/drawer'; 9import HomeDrawer from './components/drawer'; 10import {SafeAreaView} from 'react-native-safe-area-context'; 11import StatusBar from '@/components/base/statusBar'; 12import useOrientation from '@/hooks/useOrientation'; 13import HorizonalSafeAreaView from '@/components/base/horizonalSafeAreaView'; 14import globalStyle from '@/constants/globalStyle'; 15import Divider from '@/components/base/divider'; 16 17function Home() { 18 return ( 19 <SafeAreaView edges={['top', 'bottom']} style={styles.appWrapper}> 20 <StatusBar backgroundColor="transparent" /> 21 <HorizonalSafeAreaView style={globalStyle.flex1}> 22 <> 23 <NavBar /> 24 <Divider /> 25 <Body /> 26 </> 27 </HorizonalSafeAreaView> 28 <MusicBar /> 29 </SafeAreaView> 30 ); 31} 32 33function Body() { 34 const orientation = useOrientation(); 35 return ( 36 <View 37 style={[ 38 styles.appWrapper, 39 orientation === 'horizonal' ? styles.flexRow : null, 40 ]}> 41 <Operations orientation={orientation} /> 42 <MySheets /> 43 </View> 44 ); 45} 46 47const LeftDrawer = createDrawerNavigator(); 48export default function App() { 49 return ( 50 <LeftDrawer.Navigator 51 screenOptions={{ 52 headerShown: false, 53 drawerStyle: { 54 width: '80%', 55 }, 56 }} 57 initialRouteName="HOME-MAIN" 58 drawerContent={props => <HomeDrawer {...props} />}> 59 <LeftDrawer.Screen name="HOME-MAIN" component={Home} /> 60 </LeftDrawer.Navigator> 61 ); 62} 63 64const styles = StyleSheet.create({ 65 appWrapper: { 66 flexDirection: 'column', 67 flex: 1, 68 }, 69 flexRow: { 70 flexDirection: 'row', 71 }, 72}); 73