expo-app/App.js

131 lines
3.6 KiB
JavaScript

import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import { Appearance, StyleSheet } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
import SideBar from "./src/Components/SideBar";
import FaqScreen from "./src/Screens/FAQ";
import FeedbackScreen from "./src/Screens/Feedback";
import { PaperProvider } from "react-native-paper";
import {
AppContext,
AppProvider,
Constants,
GetData,
GetDataFromList,
GetMultipleData,
Theme,
} from "./src/utils";
import DeviceOldScreen from "./src/Screens/DeviceOld";
import DeviceScreen from "./src/Screens/Device";
import { Colors } from "react-native-ui-lib";
import SettingsScreen from "./src/Screens/Settings";
import { useContext, useEffect } from "react";
Colors.loadSchemes({
light: {
screenBG: "transparent",
textColor: Colors.grey10,
moonOrSun: Colors.yellow30,
mountainForeground: Colors.green30,
mountainBackground: Colors.green50,
$backgroundSuccess: Colors.green40,
$backgroundSuccessLight: Colors.green70,
},
dark: {
screenBG: Colors.grey10,
textColor: Colors.white,
moonOrSun: Colors.grey80,
mountainForeground: Colors.violet10,
mountainBackground: Colors.violet20,
$backgroundSuccess: Colors.green40,
$backgroundSuccessLight: Colors.green20,
},
});
Colors.setScheme("dark");
const Drawer = createDrawerNavigator();
/*
PRIMARY: "#e67e22",
SECONDARY: "#9b59b6",
*/
export function MyApp() {
const appContext = useContext(AppContext);
useEffect(() => {
const loadData = async () => {
const data = await GetMultipleData([
"appLanguage",
"appColorScheme",
"userExpertMode",
"userDeveloperMode",
]);
const appLanguage = GetDataFromList(data, "appLanguage");
const appColorScheme = GetDataFromList(data, "appColorScheme");
const userExpertMode = GetDataFromList(data, "userExpertMode");
const userDeveloperMode = GetDataFromList(data, "userDeveloperMode");
appContext.setAppLanguage(
appLanguage === null ? Constants.defaultLanguage : appLanguage
);
appContext.setAppColorScheme(
appColorScheme === null ? Appearance.getColorScheme() : appColorScheme
);
appContext.setIsUserExpertModeEnabled(
userExpertMode == null ? false : userExpertMode
);
appContext.setUserIsDeveloperModeEnabled(
userDeveloperMode == null ? false : userDeveloperMode
);
};
loadData();
}, []);
return (
<PaperProvider theme={Theme}>
<NavigationContainer>
<Drawer.Navigator
screenOptions={{
drawerStyle: {
backgroundColor: appContext.appTheme.drawer.backgroundColor,
},
}}
drawerContent={(props) => <SideBar {...props} />}
>
<Drawer.Screen name="Splash X3" component={DeviceScreen} />
<Drawer.Screen name="Spinner V6" component={DeviceOldScreen} />
<Drawer.Screen name="FAQ" component={FaqScreen} />
<Drawer.Screen name="Feedback" component={FeedbackScreen} />
<Drawer.Screen name="Settings" component={SettingsScreen} />
</Drawer.Navigator>
</NavigationContainer>
<StatusBar style="dark" />
</PaperProvider>
);
}
export default function App() {
return (
<AppProvider>
<MyApp />
</AppProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});