opening bug on ios

src/Components/Modal/index.js

@@ -47,7 +47,9 @@ export default function MyModal({
     <View>
       <Modal
         visible={isOpen}
-        animationType={disableAnimationForIos ? "none" : "slide"}
+        animationType={
+          disableAnimationForIos && IsPlatformIos() ? "none" : "slide"
+        }
         onRequestClose={() => closeModal()}
         transparent
       >
@@ -72,7 +74,7 @@ export default function MyModal({
   );
 }
 
-export function MyPickerDefaultHeader({ title, closeModal }) {
+export function MyDefaultModalHeader({ title, closeModal }) {
   const appContext = useContext(AppContext);
 
   return (

src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js

@@ -75,7 +75,7 @@ export default function LayerSelectionModalContent({
           title={"Hinzufügen"}
           style={{ marginTop: 20, width: 180 }}
           disabled={selectedLayer.length === 0}
-          onPress={() => openLayersActionEditModal()}
+          onPress={openLayersActionEditModal}
         />
       </View>
     </>

src/Screens/Device/scene.js

@@ -1,11 +1,16 @@
-import { FlatList, Text, TouchableOpacity, View } from "react-native";
+import {
+  FlatList,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import Card from "../../Components/Card";
-import { AppContext, AppStyles, DevDeviceId } from "../../utils";
+import { AppContext, AppStyles, DevDeviceId, IsPlatformIos } from "../../utils";
 import { useContext, useState } from "react";
-import { useTranslation } from "react-i18next";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
-import MyModal, { MyPickerDefaultHeader } from "../../Components/Modal";
+import MyModal, { MyDefaultModalHeader } from "../../Components/Modal";
 import CreateSceneModalContent from "./modals/ChooseScene/CreateScene";
 import ChooseSceneModalContent from "./modals/ChooseScene";
 import AddSceneActionModalContent from "./modals/AddSceneAction";
@@ -46,14 +51,11 @@ export default function SceneView() {
     modalLayersActionEditIsOpen: false,
   });
 
-  const setModalOpen = (modalName, open) => {
-    console.log("setModalOpen", modalName, open);
-
+  const setModalOpen = (modalName, open) =>
     setModalOpenStates((prevState) => ({
       ...prevState,
       [modalName]: open,
     }));
-  };
 
   const device = appContext.devices.find((device) => device.id === DevDeviceId);
 
@@ -61,12 +63,36 @@ export default function SceneView() {
     (scene) => scene.id === device.selectedScene
   );
 
-  const closeChooseSceneModals = () => {
+  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,
+              modalLayersActionEditIsOpen: true,
+            })),
+          600
+        )
+      : setModalOpenStates((prevState) => ({
+          ...prevState,
+          modalLayersActionEditIsOpen: true,
+        }));
   };
 
   const actionColor =
@@ -79,10 +105,7 @@ export default function SceneView() {
       <Card>
         <MyDropdown
           label={"Szene"}
-          onPress={() => {
-            console.log("pressed");
-            setModalOpen("modalChooseSceneIsOpen", true);
-          }}
+          onPress={() => setModalOpen("modalChooseSceneIsOpen", true)}
           selectedItemLabel={
             device.selectedScene === 0
               ? "Keine Szene ausgewählt"
@@ -91,6 +114,7 @@ export default function SceneView() {
           }
         />
       </Card>
+
       {device.selectedScene === 0 ? (
         <NothingSelected text="Keine Szene ausgewählt" />
       ) : (
@@ -104,7 +128,24 @@ export default function SceneView() {
               keyExtractor={(item) => item.id}
               renderItem={({ item }) => (
                 <Card cardBackgroundColor={appContext.appTheme.colors.primary}>
-                  <Text>{item.name}</Text>
+                  <View
+                    style={{
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                    }}
+                  >
+                    <Text>{item.name}</Text>
+                    <TouchableOpacity
+                      onPress={() =>
+                        setModalOpenStates((prevState) => ({
+                          ...prevState,
+                          modalLayersActionEditIsOpen: true,
+                        }))
+                      }
+                    >
+                      <MyIcon name="pencil" size={24} />
+                    </TouchableOpacity>
+                  </View>
                 </Card>
               )}
             />
@@ -138,7 +179,7 @@ export default function SceneView() {
         isOpen={modalOpenStates.modalChooseSceneIsOpen}
         closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
         header={
-          <MyPickerDefaultHeader
+          <MyDefaultModalHeader
             title={"Wähle eine Szene aus"}
             closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
           />
@@ -155,7 +196,7 @@ export default function SceneView() {
           isOpen={modalOpenStates.modalCreateSceneIsOpen}
           closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
           header={
-            <MyPickerDefaultHeader
+            <MyDefaultModalHeader
               title={"Szene erstellen"}
               closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
             />
@@ -173,7 +214,7 @@ export default function SceneView() {
         isOpen={modalOpenStates.modalAddSceneActionIsOpen}
         closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
         header={
-          <MyPickerDefaultHeader
+          <MyDefaultModalHeader
             title={"Aktion hinzufügen"}
             closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
           />
@@ -191,37 +232,33 @@ export default function SceneView() {
           isOpen={modalOpenStates.modalLayerSectionIsOpen}
           closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
           header={
-            <MyPickerDefaultHeader
+            <MyDefaultModalHeader
               title={"Layer auswahl"}
               closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
             />
           }
           content={
             <LayerSelectionModalContent
-              openLayersActionEditModal={() =>
-                setModalOpen("modalLayersActionEditIsOpen", true)
-              }
+              openLayersActionEditModal={() => openLayersActionEditModal()}
             />
           }
-        >
-          <MyModal
-            scrollView
-            isOpen={modalOpenStates.modalLayersActionEditIsOpen}
+        />
+      </MyModal>
+
+      <MyModal
+        scrollView
+        isOpen={modalOpenStates.modalLayersActionEditIsOpen}
+        closeModal={() => setModalOpen("modalLayersActionEditIsOpen", false)}
+        header={
+          <MyDefaultModalHeader
+            title={"Layer Action bearbeiten"}
             closeModal={() =>
               setModalOpen("modalLayersActionEditIsOpen", false)
             }
-            header={
-              <MyPickerDefaultHeader
-                title={"Layer Action bearbeiten"}
-                closeModal={() =>
-                  setModalOpen("modalLayersActionEditIsOpen", false)
-                }
-              />
-            }
-            content={<LayersActionEditModalContent />}
           />
-        </MyModal>
-      </MyModal>
+        }
+        content={<LayersActionEditModalContent />}
+      />
     </>
   );
 }