expo-app/src/Screens/Settings/index.js

106 lines
3.2 KiB
JavaScript

import { useEffect, useState } from "react";
import { Text, View } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import { Picker, Switch } from "react-native-ui-lib";
import Card from "../../Components/Card";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { AppStyles, GetData, GetMultipleData, StoreData } from "../../utils";
export default function SettingsScreen() {
const [switchDeveloperMode, setSwitchDeveloperMode] = useState(false);
const [switchExpertMode, setSwitchExpertMode] = useState(false);
const [selectedColorScheme, setSelectedColorScheme] = useState("auto");
const [selectedLanguage, setSelectedLanguage] = useState("de");
useEffect(() => {
async function getModes() {
const data = await GetMultipleData(["developerMode", "expertMode"]);
setSwitchDeveloperMode(data[0][1]);
setSwitchExpertMode(data[1][1]);
}
getModes();
}, []);
return (
<View style={{ height: "100%", backgroundColor: "#2e2e30" }}>
<Card>
<Text
style={[
AppStyles.typography20,
{
color: "#fff",
marginBottom: 10,
},
]}
>
Einstellungen
</Text>
<Picker
label="Sprache"
value={selectedLanguage}
onChange={(v) => setSelectedLanguage(v)}
fieldType={Picker.fieldTypes.settings}
showSearch
searchPlaceholder="Search a language"
searchStyle={{ color: "#fff", placeholderTextColor: "#fff" }}
>
<Picker.Item key={1} label="System default" value={"auto"} />
<Picker.Item key={2} label="Deutsch" value={"de"} />
<Picker.Item key={3} label="English" value={"en"} />
</Picker>
<Picker
label="Anzeigemodus"
value={selectedColorScheme}
onChange={(v) => setSelectedColorScheme(v)}
fieldType={Picker.fieldTypes.settings}
>
<Picker.Item key={1} label="System default" value={"auto"} />
<Picker.Item key={2} label="Dark" value={"dark"} />
<Picker.Item key={3} label="White" value={"white"} />
</Picker>
</Card>
<Card>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Text style={{ color: "#fff" }}>Developer Mode</Text>
<Switch
value={switchDeveloperMode}
onValueChange={(e) => {
setSwitchDeveloperMode(e);
StoreData("developerMode", e);
}}
/>
</View>
<View
style={{
marginTop: 10,
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Text style={{ color: "#fff" }}>Expert Mode</Text>
<Switch
value={switchExpertMode}
onValueChange={async (e) => {
setSwitchExpertMode(e);
StoreData("expertMode", e);
}}
/>
</View>
</Card>
</View>
);
}