switched to react navigation stacks instead of modals

2023-07-23 19:59:43 +00:00 · 2023-07-23 19:59:43 +00:00 · af351d4168
parent 0b7612a8a6
commit af351d4168
14 changed files with 446 additions and 372 deletions
--- a/App.js
+++ b/App.js
@ -2,7 +2,7 @@ import "react-native-gesture-handler";
 import { StatusBar } from "expo-status-bar";
 import { Text, View } from "react-native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
-import { NavigationContainer } from "@react-navigation/native";
+import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 import SideBar from "./src/Components/SideBar";
 import {
  AppContext,
@ -20,7 +20,18 @@ import { createStackNavigator } from "@react-navigation/stack";
 import { TouchableOpacity } from "react-native";
 import MyIcon from "./src/Components/Icon";
 import { useTranslation } from "react-i18next";
-import { LightsEditActionModalContent } from "./src/Screens/Device/modals/EditActions/Lights";
+import {
+  LayersEditActionColorModeSelectionModalContent,
+  LightsEditActionModalContent,
+} from "./src/Screens/Device/modals/EditActions/Lights";
+import ChooseSceneModalContent from "./src/Screens/Device/modals/ChooseScene";
+import CreateSceneModalContent from "./src/Screens/Device/modals/ChooseScene/CreateScene";
+import AddSceneActionModalContent from "./src/Screens/Device/modals/AddSceneAction";
+import LayerSelectionModalContent from "./src/Screens/Device/modals/AddSceneAction/LayerSelection";
+import {
+  SettingsAppColorSchemeModalContent,
+  SettingsAppLanguageModalContent,
+} from "./src/Screens/Settings";

 const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator();
@ -66,20 +77,32 @@ export function MyApp() {
    loadData();
  }, []);

-  const options = ({ navigation }) => {
+  const options = ({ navigation, pageTitle }) => {
    return getScreenStackOptions(
      navigation,
-      t("screens.device.scenes.modalLayersEditAction.headerTitle"),
+      pageTitle,
      appContext.appTheme.text,
      appContext.appTheme.backgroundColor,
      true
    );
  };

+  const navigatonTheme = {
+    ...DefaultTheme,
+    colors: {
+      ...DefaultTheme.colors,
+      background: appContext.appTheme.backgroundColor,
+    },
+  };
+
  return (
    <SafeAreaView style={{ height: "100%" }}>
-      <NavigationContainer>
-        <Stack.Navigator screenOptions={{ headerTitleAlign: "center" }}>
+      <NavigationContainer theme={navigatonTheme}>
+        <Stack.Navigator
+          screenOptions={{
+            headerTitleAlign: "center",
+          }}
+        >
          <Stack.Screen
            name="drawer"
            component={MyDrawer}
@ -87,9 +110,103 @@ export function MyApp() {
          />

          <Stack.Screen
-            name="modalLayersEditActionIsOpen"
+            name="modalChooseScene"
+            component={ChooseSceneModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalChooseScene.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalCreateScene"
+            component={CreateSceneModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalCreateScene.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalAddSceneAction"
+            component={AddSceneActionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalAddSceneAction.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalLayerSection"
+            component={LayerSelectionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalLayerSection.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalLayersEditAction"
            component={LightsEditActionModalContent}
-            options={options}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalLayersEditAction.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalLayersEditActionColorModeSelection"
+            component={LayersEditActionColorModeSelectionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.modalLayersEditActionColorModeSelection.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalSettingsAppColorScheme"
+            component={SettingsAppColorSchemeModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t("screens.settings.appColorSchemeModalTitle"),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalSettingsAppLanguage"
+            component={SettingsAppLanguageModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t("screens.settings.languageModalTitle"),
+              })
+            }
          />
        </Stack.Navigator>
      </NavigationContainer>
--- a/locales/de.json
+++ b/locales/de.json
@ -36,11 +36,11 @@
        "infoNoActionsAvailableInScene": "Keine Aktionen in der Szene vorhanden",
        "buttonAddAction": "Aktion hinzufügen",
        "modalChooseScene": {
-          "headerTitle": "Wähle eine Szene aus",
+          "pageTitle": "Wähle eine Szene aus",
          "textButtonAddScene": "Neue Szene erstellen"
        },
        "modalCreateScene": {
-          "headerTitle": "Szene erstellen",
+          "pageTitle": "Szene erstellen",
          "options": {
            "emptyScene": "Leere Szene erstellen",
            "standardScene": "Standard Szene erstellen",
@ -48,7 +48,7 @@
          }
        },
        "modalAddSceneAction": {
-          "headerTitle": "Aktion hinzufügen",
+          "pageTitle": "Aktion hinzufügen",
          "actions": {
            "layers": "Ebenen",
            "motor": "Motor",
@ -62,10 +62,13 @@
          }
        },
        "modalLayerSection": {
-          "headerTitle": "Layer auswahl"
+          "pageTitle": "Layer auswahl"
        },
        "modalLayersEditAction": {
-          "headerTitle": "Ebenen bearbeiten"
+          "pageTitle": "Ebenen bearbeiten"
+        },
+        "modalLayersEditActionColorModeSelection": {
+          "pageTitle": "Wähle einen Farbmodus"
        }
      }
    },
@ -79,7 +82,9 @@
      "pageTitle": "Einstellungen",
      "settingsCardTitle": "Einstellungen",
      "languageText": "Sprache",
+      "languageModalTitle": "Sprache anpassen",
      "appColorSchemeText": "Anzeigemodus",
+      "appColorSchemeModalTitle": "Anzeigemodus anpassen",
      "appColorSchemePicker": {
        "auto": "System Standard",
        "dark": "Dunkel",
--- a/locales/en.json
+++ b/locales/en.json
@ -36,11 +36,11 @@
        "infoNoActionsAvailableInScene": "No actions available in the scene",
        "buttonAddAction": "Add action",
        "modalChooseScene": {
-          "headerTitle": "Choose a scene",
+          "pageTitle": "Choose a scene",
          "textButtonAddScene": "Create new scene"
        },
        "modalCreateScene": {
-          "headerTitle": "Create scene",
+          "pageTitle": "Create scene",
          "options": {
            "emptyScene": "Create empty scene",
            "standardScene": "Create standard scene",
@ -48,7 +48,7 @@
          }
        },
        "modalAddSceneAction": {
-          "headerTitle": "Add action",
+          "pageTitle": "Add action",
          "actions": {
            "layers": "Layers",
            "motor": "Motor",
@ -62,10 +62,13 @@
          }
        },
        "modalLayerSection": {
-          "headerTitle": "Layer selection"
+          "pageTitle": "Layer selection"
        },
        "modalLayersEditAction": {
-          "headerTitle": "Edit layers"
+          "pageTitle": "Edit layers"
+        },
+        "modalLayersEditActionColorModeSelection": {
+          "pageTitle": "Choose a color mode"
        }
      }
    },
@ -79,7 +82,9 @@
      "pageTitle": "Settings",
      "settingsCardTitle": "Settings",
      "languageText": "Language",
+      "languageModalTitle": "Customize language",
      "appColorSchemeText": "Appearance",
+      "appColorSchemeModalTitle": "Customize appearance",
      "appColorSchemePicker": {
        "auto": "System default",
        "dark": "Dark",
--- a/src/Components/ColorPicker/index.js
+++ b/src/Components/ColorPicker/index.js
@ -268,22 +268,6 @@ export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
        onChange={onColorSelect}
        boundedThumb
      >
-        <TouchableOpacity
-          onPress={() =>
-            setColorSwatchesFavorites([
-              ...colorSwatchesFavorites,
-              selectedColorPickerColor.value,
-            ])
-          }
-          style={{
-            position: "absolute",
-            top: -18,
-            right: 2,
-          }}
-        >
-          <MyIcon name="star-outline" size={20} />
-        </TouchableOpacity>
-
        <View style={{ flexDirection: "row", justifyContent: "space-evenly" }}>
          <Panel3 style={{ width: 200 }} />

--- a/src/Components/Modal/index.js
+++ b/src/Components/Modal/index.js
@ -97,7 +97,7 @@ export function MyDefaultModalHeader({ title, closeModal }) {

      <Text
        style={[
-          AppStyles.typography16,
+          AppStyles.typography20,
          { fontWeight: "bold", color: appContext.appTheme.text },
        ]}
      >
--- a/src/Components/SideBar/index.js
+++ b/src/Components/SideBar/index.js
@ -1,7 +1,7 @@
 import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
 import { useContext } from "react";
 import { Image, Text, TouchableOpacity, View } from "react-native";
-import { AppContext, AppStyles } from "../../utils";
+import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils";
 import { Divider } from "../Divider";
 import { useTranslation } from "react-i18next";
 import MyIcon from "../Icon";
@ -27,6 +27,8 @@ export default function Sidebar(props) {
      ? appContext.appTheme.drawer.item.activeTintColor
      : appContext.appTheme.drawer.item.inactiveTintColor;

+    if (isFocused && isDevice) AppSelectedUserDevice.current = routeName;
+
    return (
      <DrawerItem
        label={() =>
@ -138,11 +140,6 @@ export default function Sidebar(props) {
          label={"Old Device"}
          onPress={() => props.navigation.navigate("Old Turtle")}
        />
-
-        <MyDrawerItem
-          label={"test"}
-          onPress={() => props.navigation.navigate("test")}
-        />
      </DrawerContentScrollView>

      <View style={{ justifyContent: "flex-end" }}>
--- a/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
+++ b/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js
@ -2,6 +2,7 @@ import { useState } from "react";
 import { Text, TouchableHighlight, View } from "react-native";
 import MyButton from "../../../../../Components/Button";
 import { useTranslation } from "react-i18next";
+import { AppSelectedUserDevice, ModalContainer } from "../../../../../utils";

 function Layer({ number, selected, onPress }) {
  return (
@ -36,9 +37,7 @@ function Layer({ number, selected, onPress }) {
  );
 }

-export default function LayerSelectionModalContent({
-  openLayersActionEditModal,
-}) {
+export default function LayerSelectionModalContent({ navigation, route }) {
  const { t } = useTranslation();
  const [selectedLayer, setSelectedLayer] = useState([]);

@ -53,7 +52,7 @@ export default function LayerSelectionModalContent({
  };

  return (
-    <>
+    <ModalContainer>
      <View
        style={{
          flexDirection: "row",
@ -77,9 +76,12 @@ export default function LayerSelectionModalContent({
          title={t("screens.device.scenes.buttonAddAction")}
          style={{ marginTop: 20, width: 180 }}
          disabled={selectedLayer.length === 0}
-          onPress={openLayersActionEditModal}
+          onPress={() => {
+            navigation.navigate(AppSelectedUserDevice.current);
+            navigation.navigate("modalLayersEditAction", route.params);
+          }}
        />
      </View>
-    </>
+    </ModalContainer>
  );
 }
--- a/src/Screens/Device/modals/AddSceneAction/index.js
+++ b/src/Screens/Device/modals/AddSceneAction/index.js
@ -1,6 +1,6 @@
 import { useContext } from "react";
-import { Image, Text, TouchableOpacity, View } from "react-native";
-import { AppContext, AppStyles } from "../../../../utils";
+import { Image, ScrollView, Text, TouchableOpacity, View } from "react-native";
+import { AppContext, AppStyles, ModalContainer } from "../../../../utils";
 import MyIcon from "../../../../Components/Icon";
 import { Divider } from "../../../../Components/Divider";
 import { useTranslation } from "react-i18next";
@ -65,100 +65,103 @@ function Action({
  );
 }

-export default function AddSceneActionModalContent({
-  device,
-  openLayerSelectionModal,
-}) {
+export default function AddSceneActionModalContent({ navigation, route }) {
  const { t } = useTranslation();

-  // TODO: check model type for actions
+  const deviceFirmwareVersion = route.params.deviceFirmwareVersion;
+
+  // TODO: show only actions by device model

  return (
-    <>
-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
-        iconName="lightbulb-on-outline"
-        imageSource={require("../../../../../assets/layers.gif")}
-        onPress={openLayerSelectionModal}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+    <ScrollView>
+      <ModalContainer>
+        <Action
+          text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
+          iconName="lightbulb-on-outline"
+          imageSource={require("../../../../../assets/layers.gif")}
+          onPress={() => navigation.navigate("modalLayerSection", route.params)}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />

-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
-        iconName="axis-z-rotate-counterclockwise"
-        imageSource={require("../../../../../assets/motor.gif")}
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
+          iconName="axis-z-rotate-counterclockwise"
+          imageSource={require("../../../../../assets/motor.gif")}
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />

-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.ambilight")}
-        iconName="television-ambient-light"
-        imageSource={require("../../../../../assets/ambilight.gif")}
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.ambilight"
+          )}
+          iconName="television-ambient-light"
+          imageSource={require("../../../../../assets/ambilight.gif")}
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />

-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.waitXSeconds"
-        )}
-        iconName="timer-sand"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.waitXSeconds"
+          )}
+          iconName="timer-sand"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />

-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
-        )}
-        iconName="clock-time-eight-outline"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
+          )}
+          iconName="clock-time-eight-outline"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />

-      <Action
-        text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
-        iconName="pause-octagon-outline"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
+          iconName="pause-octagon-outline"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />

-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.timeControl"
-        )}
-        iconName="timer-cog"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.1"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.timeControl"
+          )}
+          iconName="timer-cog"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.1"]}
+        />

-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.waitForConfirmationWithKey"
-        )}
-        iconName="gesture-tap-button"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.0"]}
-      />
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.waitForConfirmationWithKey"
+          )}
+          iconName="gesture-tap-button"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.0"]}
+        />

-      <Action
-        text={t(
-          "screens.device.scenes.modalAddSceneAction.actions.jumpToScene"
-        )}
-        iconName="debug-step-over"
-        onPress={() => console.log("pressed action")}
-        deviceFirmwareVersion={device.firmwareVersion}
-        supportedFirmwareVersions={["1.0.0"]}
-      />
-    </>
+        <Action
+          text={t(
+            "screens.device.scenes.modalAddSceneAction.actions.jumpToScene"
+          )}
+          iconName="debug-step-over"
+          onPress={() => console.log("pressed action")}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          supportedFirmwareVersions={["1.0.0"]}
+        />
+      </ModalContainer>
+    </ScrollView>
  );
 }
--- a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js
@ -1,13 +1,14 @@
 import { useContext } from "react";
-import { AppContext, NewEmptyDeviceScene } from "../../../../../utils";
+import {
+  AppContext,
+  ModalContainer,
+  NewEmptyDeviceScene,
+} from "../../../../../utils";
 import { FlatList } from "react-native";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
 import { useTranslation } from "react-i18next";

-export default function CreateSceneModalContent({
-  device,
-  closeChooseSceneModals,
-}) {
+export default function CreateSceneModalContent({ navigation, route }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

@ -29,27 +30,29 @@ export default function CreateSceneModalContent({
  ];

  return (
-    <FlatList
-      data={options}
-      keyExtractor={(item) => item.id}
-      renderItem={({ item }) => (
-        <MyPickerModalListItem
-          itemName={item.name}
-          onPress={() => {
-            appContext.setDevices((arr) => {
-              const newArr = [...arr];
+    <ModalContainer>
+      <FlatList
+        data={options}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <MyPickerModalListItem
+            itemName={item.name}
+            onPress={() => {
+              appContext.setDevices((arr) => {
+                const newArr = [...arr];

-              newArr[arr.findIndex((d) => d.id === device.id)].scenes.push(
-                NewEmptyDeviceScene()
-              );
+                newArr[
+                  arr.findIndex((d) => d.id === route.params.id)
+                ].scenes.push(NewEmptyDeviceScene());

-              return newArr;
-            });
+                return newArr;
+              });

-            closeChooseSceneModals();
-          }}
-        />
-      )}
-    />
+              navigation.pop(2);
+            }}
+          />
+        )}
+      />
+    </ModalContainer>
  );
 }
--- a/src/Screens/Device/modals/ChooseScene/index.js
+++ b/src/Screens/Device/modals/ChooseScene/index.js
@ -1,20 +1,19 @@
 import { useContext } from "react";
 import { FlatList } from "react-native";
-import { AppContext } from "../../../../utils";
+import { AppContext, ModalContainer } from "../../../../utils";
 import { MyPickerModalListItem } from "../../../../Components/Modal";
 import { useTranslation } from "react-i18next";
 import { MyTextButton } from "../../../../Components/Button";
 import MyResult from "../../../../Components/Result";

-export default function ChooseSceneModalContent({
-  device,
-  openCreateSceneModal,
-}) {
+export default function ChooseSceneModalContent({ navigation, route }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();

+  const device = route.params;
+
  return (
-    <>
+    <ModalContainer>
      {device.scenes.length === 0 ? (
        <MyResult
          text={"Keine Szenen vorhanden"}
@ -38,6 +37,8 @@ export default function ChooseSceneModalContent({

                  return newArr;
                });
+
+                navigation.goBack();
              }}
            />
          )}
@ -47,9 +48,11 @@ export default function ChooseSceneModalContent({
      <MyTextButton
        style={{ marginTop: 10 }}
        actionColor={!device.scenes.length}
-        onPress={openCreateSceneModal}
+        onPress={() =>
+          navigation.navigate("modalCreateScene", { id: device.id })
+        }
        title={t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
      />
-    </>
+    </ModalContainer>
  );
 }
--- a/src/Screens/Device/modals/EditActions/Lights/index.js
+++ b/src/Screens/Device/modals/EditActions/Lights/index.js
@ -7,14 +7,14 @@ import {
 import Card from "../../../../../Components/Card";
 import MyDropdown from "../../../../../Components/Dropdown";
 import { useContext, useState } from "react";
-import { AppContext } from "../../../../../utils";
+import { AppContext, ModalContainer } from "../../../../../utils";
 import MyModal, {
  MyDefaultModalHeader,
  MyPickerModalListItem,
 } from "../../../../../Components/Modal";
 import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";

-export function LightsEditActionModalContent({ route }) {
+export function LightsEditActionModalContent({ navigation, route }) {
  const appContext = useContext(AppContext);
  const [modalColorModeSelectionIsOpen, setModalColorSelectionModeIsOpen] =
    useState(false);
@ -64,7 +64,12 @@ export function LightsEditActionModalContent({ route }) {
                    appContext.appLanguage
                  ]
            }
-            onPress={() => setModalColorSelectionModeIsOpen(true)}
+            onPress={() =>
+              navigation.navigate("modalLayersEditActionColorModeSelection", {
+                supportedLightModes: supportedLightModes,
+                selectedLightMode: selectedLightMode,
+              })
+            }
          />

          <MyColorPickerV2
@ -77,32 +82,31 @@ export function LightsEditActionModalContent({ route }) {
          <Card key={i} />
        ))}
      </ScrollView>
-
-      <MyModal
-        isOpen={modalColorModeSelectionIsOpen}
-        closeModal={() => setModalColorSelectionModeIsOpen(false)}
-        header={
-          <MyDefaultModalHeader
-            title={"Farbmodus wählen"}
-            closeModal={() => setModalColorSelectionModeIsOpen(false)}
-          />
-        }
-        content={
-          <FlatList
-            data={supportedLightModes}
-            renderItem={({ item, index }) => (
-              <MyPickerModalListItem
-                itemName={item.name[appContext.appLanguage]}
-                itemSelected={selectedLightMode === index}
-                onPress={() => {
-                  setSelectedLightMode(index);
-                  setModalColorSelectionModeIsOpen(false);
-                }}
-              />
-            )}
-          />
-        }
-      />
    </View>
  );
 }
+
+export function LayersEditActionColorModeSelectionModalContent({
+  navigation,
+  route,
+}) {
+  const appContext = useContext(AppContext);
+
+  return (
+    <ModalContainer>
+      <FlatList
+        data={route.params.supportedLightModes}
+        renderItem={({ item, index }) => (
+          <MyPickerModalListItem
+            itemName={item.name[appContext.appLanguage]}
+            itemSelected={route.params.selectedLightMode === index}
+            onPress={() => {
+              // TODO: set selected light mode directly in appContext actions
+              navigation.goBack();
+            }}
+          />
+        )}
+      />
+    </ModalContainer>
+  );
+}
--- a/src/Screens/Device/scene.js
+++ b/src/Screens/Device/scene.js
@ -1,16 +1,12 @@
 import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
-import { AppContext, IsPlatformIos } from "../../utils";
-import { useContext, useState } from "react";
+import { AppContext } from "../../utils";
+import { useContext } from "react";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
-import MyModal, { MyDefaultModalHeader } from "../../Components/Modal";
-import CreateSceneModalContent from "./modals/ChooseScene/CreateScene";
-import ChooseSceneModalContent from "./modals/ChooseScene";
-import AddSceneActionModalContent from "./modals/AddSceneAction";
-import LayerSelectionModalContent from "./modals/AddSceneAction/LayerSelection";
 import { useTranslation } from "react-i18next";
 import MyResult from "../../Components/Result";
+import { MyTextButton } from "../../Components/Button";

 export default function SceneView({ navigation, device }) {
  const appContext = useContext(AppContext);
@ -20,58 +16,18 @@ export default function SceneView({ navigation, device }) {
    (scene) => scene.id === device.selectedScene
  );

-  const [modalOpenStates, setModalOpenStates] = useState({
-    modalChooseSceneIsOpen: false,
-    modalCreateSceneIsOpen: false,
-    modalAddSceneActionIsOpen: false,
-    modalLayerSectionIsOpen: false,
-    modalLayersEditActionIsOpen: false,
-  });
-
-  const setModalOpen = (modalName, open) =>
-    setModalOpenStates((prevState) => ({
-      ...prevState,
-      [modalName]: open,
-    }));
-
-  const closeChooseSceneModals = () =>
-    setModalOpenStates((prevState) => ({
-      ...prevState,
-      modalChooseSceneIsOpen: false,
-      modalCreateSceneIsOpen: false,
-    }));
-
-  const openLayersActionEditModal = () => {
-    setModalOpenStates((prevState) => ({
-      ...prevState,
-      modalChooseSceneIsOpen: false,
-      modalCreateSceneIsOpen: false,
-      modalAddSceneActionIsOpen: false,
-      modalLayerSectionIsOpen: false,
-    }));
-
-    // setTimeout is needed, otherwise the modal would not open on iOS
-    IsPlatformIos()
-      ? setTimeout(
-          () =>
-            setModalOpenStates((prevState) => ({
-              ...prevState,
-              modalLayersEditActionIsOpen: true,
-            })),
-          600
-        )
-      : setModalOpenStates((prevState) => ({
-          ...prevState,
-          modalLayersEditActionIsOpen: true,
-        }));
-  };
-
  return (
    <>
      <Card>
        <MyDropdown
          label={t("screens.device.scenes.dropdownSceneSelection.label")}
-          onPress={() => setModalOpen("modalChooseSceneIsOpen", true)}
+          onPress={() =>
+            navigation.navigate("modalChooseScene", {
+              id: device.id,
+              selectedScene: device.selectedScene,
+              scenes: device.scenes,
+            })
+          }
          selectedItemLabel={
            device.selectedScene === null
              ? t(
@ -110,7 +66,7 @@ export default function SceneView({ navigation, device }) {
                    <Text>{item.name}</Text>
                    <TouchableOpacity
                      onPress={() =>
-                        navigation.navigate("modalLayersEditActionIsOpen", {
+                        navigation.navigate("modalLayersEditAction", {
                          deviceFirmwareVersion: device.firmware.version,
                        })
                      }
@ -122,85 +78,19 @@ export default function SceneView({ navigation, device }) {
              )}
            />
          )}
+
+          <MyTextButton
+            title={t("screens.device.scenes.buttonAddAction")}
+            style={{ marginTop: 10 }}
+            actionColor={deviceScene.actions.length === 0}
+            onPress={() =>
+              navigation.navigate("modalAddSceneAction", {
+                deviceFirmwareVersion: device.firmware.version,
+              })
+            }
+          />
        </View>
      )}
-
-      <MyModal
-        isOpen={modalOpenStates.modalChooseSceneIsOpen}
-        closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
-        header={
-          <MyDefaultModalHeader
-            title={t("screens.device.scenes.modalChooseScene.headerTitle")}
-            closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
-          />
-        }
-        content={
-          <ChooseSceneModalContent
-            device={{
-              id: device.id,
-              selectedScene: device.selectedScene,
-              scenes: device.scenes,
-            }}
-            openCreateSceneModal={() =>
-              setModalOpen("modalCreateSceneIsOpen", true)
-            }
-          />
-        }
-      >
-        <MyModal
-          isOpen={modalOpenStates.modalCreateSceneIsOpen}
-          closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
-          header={
-            <MyDefaultModalHeader
-              title={t("screens.device.scenes.modalCreateScene.headerTitle")}
-              closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
-            />
-          }
-          content={
-            <CreateSceneModalContent
-              device={{ id: device.id }}
-              closeChooseSceneModals={closeChooseSceneModals}
-            />
-          }
-        />
-      </MyModal>
-
-      <MyModal
-        scrollView
-        isOpen={modalOpenStates.modalAddSceneActionIsOpen}
-        closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
-        header={
-          <MyDefaultModalHeader
-            title={t("screens.device.scenes.modalAddSceneAction.headerTitle")}
-            closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
-          />
-        }
-        content={
-          <AddSceneActionModalContent
-            device={{ firmwareVersion: device.firmware.version }}
-            openLayerSelectionModal={() =>
-              setModalOpen("modalLayerSectionIsOpen", true)
-            }
-          />
-        }
-      >
-        <MyModal
-          scrollView
-          isOpen={modalOpenStates.modalLayerSectionIsOpen}
-          closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
-          header={
-            <MyDefaultModalHeader
-              title={t("screens.device.scenes.modalLayerSection.headerTitle")}
-              closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
-            />
-          }
-          content={
-            <LayerSelectionModalContent
-              openLayersActionEditModal={() => openLayersActionEditModal()}
-            />
-          }
-        />
-      </MyModal>
    </>
  );
 }
--- a/src/Screens/Settings/index.js
+++ b/src/Screens/Settings/index.js
@ -1,18 +1,15 @@
-import { useContext, useState } from "react";
-import { Text, TouchableOpacity, View } from "react-native";
+import { useContext } from "react";
+import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
-import { AppContext, AppStyles, Constants } from "../../utils";
+import { AppContext, AppStyles, Constants, ModalContainer } from "../../utils";
 import { Divider } from "../../Components/Divider";
 import { useTranslation } from "react-i18next";
 import MySwitch from "../../Components/Switch";
-import { MyPickerModal } from "../../Components/Modal";
+import { MyPickerModalListItem } from "../../Components/Modal";

-export default function SettingsScreen() {
+export default function SettingsScreen({ navigation }) {
  const appContext = useContext(AppContext);
  const { t } = useTranslation();
-  const [modalAppColorSchemeVisible, setAppColorSchemeModalVisible] =
-    useState(false);
-  const [modalAppLanguageVisible, setModalAppLanguageVisible] = useState(false);

  return (
    <View
@ -35,7 +32,7 @@ export default function SettingsScreen() {
        </Text>

        <TouchableOpacity
-          onPress={() => setModalAppLanguageVisible(true)}
+          onPress={() => navigation.navigate("modalSettingsAppLanguage")}
          style={{ marginBottom: 6 }}
        >
          <View
@ -63,7 +60,9 @@ export default function SettingsScreen() {
          </View>
        </TouchableOpacity>

-        <TouchableOpacity onPress={() => setAppColorSchemeModalVisible(true)}>
+        <TouchableOpacity
+          onPress={() => navigation.navigate("modalSettingsAppColorScheme")}
+        >
          <View
            style={{
              flexDirection: "row",
@ -138,41 +137,72 @@ export default function SettingsScreen() {
            onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
          />
        </View>
-
-        <MyPickerModal
-          isOpen={modalAppColorSchemeVisible}
-          setIsOpen={setAppColorSchemeModalVisible}
-          items={[
-            {
-              label: t("screens.settings.appColorSchemePicker.auto"),
-              onPress: () => appContext.setAppColorScheme("auto"),
-              selected: appContext.appColorScheme === "auto",
-            },
-            {
-              label: t("screens.settings.appColorSchemePicker.dark"),
-              onPress: () => appContext.setAppColorScheme("dark"),
-              selected: appContext.appColorScheme === "dark",
-            },
-            {
-              label: t("screens.settings.appColorSchemePicker.light"),
-              onPress: () => appContext.setAppColorScheme("light"),
-              selected: appContext.appColorScheme === "light",
-            },
-          ]}
-        />
-
-        <MyPickerModal
-          isOpen={modalAppLanguageVisible}
-          setIsOpen={setModalAppLanguageVisible}
-          items={Constants.languages.map((language) => {
-            return {
-              label: language.label,
-              onPress: () => appContext.setAppLanguage(language.name),
-              selected: appContext.appLanguage === language.name,
-            };
-          })}
-        />
      </Card>
    </View>
  );
 }
+
+export function SettingsAppLanguageModalContent({ navigation }) {
+  const appContext = useContext(AppContext);
+
+  return (
+    <ModalContainer>
+      <FlatList
+        data={Constants.languages}
+        renderItem={({ item, index }) => (
+          <MyPickerModalListItem
+            key={index}
+            itemName={item.label}
+            onPress={() => {
+              appContext.setAppLanguage(item.name);
+              navigation.goBack();
+            }}
+            itemSelected={appContext.appLanguage === item.name}
+          />
+        )}
+      />
+    </ModalContainer>
+  );
+}
+
+export function SettingsAppColorSchemeModalContent({ navigation }) {
+  const appContext = useContext(AppContext);
+  const { t } = useTranslation();
+
+  const items = [
+    {
+      label: t("screens.settings.appColorSchemePicker.auto"),
+      onPress: () => appContext.setAppColorScheme("auto"),
+      selected: appContext.appColorScheme === "auto",
+    },
+    {
+      label: t("screens.settings.appColorSchemePicker.dark"),
+      onPress: () => appContext.setAppColorScheme("dark"),
+      selected: appContext.appColorScheme === "dark",
+    },
+    {
+      label: t("screens.settings.appColorSchemePicker.light"),
+      onPress: () => appContext.setAppColorScheme("light"),
+      selected: appContext.appColorScheme === "light",
+    },
+  ];
+
+  return (
+    <ModalContainer>
+      <FlatList
+        data={items}
+        renderItem={({ item, index }) => (
+          <MyPickerModalListItem
+            key={index}
+            itemName={item.label}
+            itemSelected={item.selected}
+            onPress={() => {
+              item.onPress();
+              navigation.goBack();
+            }}
+          />
+        )}
+      />
+    </ModalContainer>
+  );
+}
--- a/src/utils.js
+++ b/src/utils.js
@ -1,7 +1,13 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { createContext, useState } from "react";
+import { createContext, createRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Appearance, Platform, StyleSheet, Vibration } from "react-native";
+import {
+  Appearance,
+  Platform,
+  StyleSheet,
+  Vibration,
+  View,
+} from "react-native";
 import uuid from "react-native-uuid";

 export const Constants = {
@ -39,6 +45,10 @@ export const AppStyles = StyleSheet.create({
    shadowOpacity: 0.2, // only ios
    shadowRadius: 1, // only ios
  },
+  modal: {
+    flex: 1,
+    padding: 10,
+  },
 });

 const DarkAppTheme = {
@ -342,7 +352,18 @@ const devDevices = [
      lastUpdated: "11.07.2023 um 20:33 Uhr",
    },
    selectedScene: null,
-    scenes: [],
+    scenes: [
+      {
+        id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
+        name: "Yolo",
+        actions: [
+          {
+            id: 0,
+            name: "Haha",
+          },
+        ],
+      },
+    ],
  },
 ];

@ -354,6 +375,8 @@ export function NewEmptyDeviceScene() {
  };
 }

+export const AppSelectedUserDevice = createRef(null);
+
 export const AppContext = createContext(appContextPreview);

 export function AppProvider({ children }) {
@ -429,3 +452,11 @@ export function IsPlatformIos() {
 export function VibrateShort() {
  Vibration.vibrate(50);
 }
+
+export function ModalContainer({ children }) {
+  return (
+    <View style={AppStyles.modal}>
+      <View>{children}</View>
+    </View>
+  );
+}