Jannex
/
expo-app
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modal

main
alex 2023-07-12 20:24:06 +00:00
parent 5adb288565
commit 1a2f47bf7c
2 changed files with 89 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
App.js
View File

@ -63,7 +63,7 @@ export function MyApp() {
<NavigationContainer>
<Drawer.Navigator
screenOptions={{
headerShown: false,
// headerShown: false,
drawerStyle: {
backgroundColor: appContext.appTheme.drawer.backgroundColor,
},

98
src/Screens/Settings/index.js
View File

@ -105,13 +105,28 @@ export default function SettingsScreen() {
onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
/>
</View>
<Text onPress={() => setModalVisible(true)}>Test</Text>
<TouchableOpacity onPress={() => setModalVisible(true)}>
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
}}
>
<Text style={{ color: appContext.appTheme.text }}>
Anzeigemodus
</Text>
<Text style={{ color: appContext.appTheme.colors.primary }}>
{appContext.appColorScheme}
</Text>
</View>
</TouchableOpacity>
<Modal
visible={modalVisible}
animationType="slide"
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
@ -119,16 +134,79 @@ export default function SettingsScreen() {
<Icon
name="window-close"
size={24}
style={{ marginLeft: 10, marginTop: 20 }}
style={{ marginLeft: 10, marginTop: 20, marginBottom: 20 }}
/>
<Text style={([AppStyles.typography16])}>
System default
</Text>
<Divider />
<Text style={[AppStyles.typography16]}>Dark</Text>
<Divider />
<Text style={[AppStyles.typography16]}>Light</Text>
</TouchableOpacity>
<Text style={[AppStyles.typography16, { marginLeft: 20 }]}>
System default
</Text>
<Divider />
{appContext.appColorScheme === "dark" ? (
<TouchableOpacity onPress={() => setModalVisible(false)}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
marginLeft: 20,
marginRight: 20,
}}
>
<Text style={[AppStyles.typography16]}>Dark</Text>
<Icon
name="check"
size={24}
color={appContext.appTheme.colors.primary}
/>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
setModalVisible(false);
appContext.setAppColorScheme("dark");
}}
>
<Text style={[AppStyles.typography16, { marginLeft: 20 }]}>
Dark
</Text>
</TouchableOpacity>
)}
<Divider />
{appContext.appColorScheme === "light" ? (
<TouchableOpacity onPress={() => setModalVisible(false)}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
marginLeft: 20,
marginRight: 20,
}}
>
<Text style={[AppStyles.typography16]}>Light</Text>
<Icon
name="check"
size={24}
color={appContext.appTheme.colors.primary}
/>
</View>
</TouchableOpacity>
) : (
<TouchableOpacity
onPress={() => {
setModalVisible(false);
appContext.setAppColorScheme("light");
}}
>
<Text style={[AppStyles.typography16, { marginLeft: 20 }]}>
Light
</Text>
</TouchableOpacity>
)}
</Modal>
</Card>
</View>