fixed bug: can't scroll on draggable list

src/Components/Card/index.js

@@ -11,39 +11,37 @@ export default function Card({ children, cardTopicText, cardBackgroundColor }) {
       : cardBackgroundColor;
 
   return (
-    <>
-      <View
-        style={{
-          paddingTop: 10,
-          paddingLeft: 10,
-          paddingRight: 10,
-          paddingBottom: 10,
-        }}
-      >
-        {cardTopicText !== undefined && (
-          <Text
-            style={{
-              paddingLeft: 10,
-              color: appContext.appTheme.colors.gray,
-              paddingBottom: 6,
-            }}
-          >
-            {cardTopicText}
-          </Text>
-        )}
-        <View
-          style={[
-            {
-              borderRadius: 20,
-              backgroundColor: backgroundColor,
-              padding: 20,
-            },
-            AppStyles.Shadow,
-          ]}
+    <View
+      style={{
+        paddingTop: 10,
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingBottom: 10,
+      }}
+    >
+      {cardTopicText !== undefined && (
+        <Text
+          style={{
+            paddingLeft: 10,
+            color: appContext.appTheme.colors.gray,
+            paddingBottom: 6,
+          }}
         >
-          {children}
-        </View>
+          {cardTopicText}
+        </Text>
+      )}
+      <View
+        style={[
+          {
+            borderRadius: 20,
+            backgroundColor: backgroundColor,
+            padding: 20,
+          },
+          AppStyles.Shadow,
+        ]}
+      >
+        {children}
       </View>
-    </>
+    </View>
   );
 }

src/Screens/Device/index.js

@@ -77,9 +77,9 @@ export default function DeviceScreen({ navigation }) {
         onPress={() => setSelectedView(2)}
       />
 
-      <ScrollView style={{ height: "100%" }}>
+      <View style={{ flex: 1 }}>
         <SelectedView />
-      </ScrollView>
+      </View>
     </View>
   );
 }

src/Screens/Device/scene.js

@@ -19,6 +19,8 @@ import { Divider } from "../../Components/Divider";
 import { MyColorSwatch } from "../../Components/ColorPicker";
 import { MyDotsModal } from "../../Components/Modal";
 import DraggableFlatList, {
+  NestableDraggableFlatList,
+  NestableScrollContainer,
   ScaleDecorator,
 } from "react-native-draggable-flatlist";
 
@@ -69,9 +71,9 @@ export default function SceneView({ navigation }) {
     (a) => a.sceneId === device.selectedScene
   );
 
-  return (
-    <>
-      <Card>
+  const DropdownCard = (style) => {
+    return (
+      <Card style={style}>
         <MyDropdown
           label={t("screens.device.scenes.dropdownSceneSelection.label")}
           onPress={() =>
@@ -82,18 +84,23 @@ export default function SceneView({ navigation }) {
           selectedItemLabel={getSelectedDeviceSceneName()}
         />
       </Card>
+    );
+  };
 
+  return (
+    <>
       {device.selectedScene === "" ? (
-        <MyResult
-          text={t("screens.device.scenes.infoNoSceneSelected")}
-          iconName={"selection-search"}
-        />
+        <>
+          <DropdownCard />
+
+          <MyResult
+            text={t("screens.device.scenes.infoNoSceneSelected")}
+            iconName={"selection-search"}
+          />
+        </>
       ) : (
         <DraggableFlatList
-          style={{ marginTop: 10 }}
-          scrollEnabled={false}
           data={deviceSceneActions}
-          simultaneousHandlers
           onDragEnd={({ data }) =>
             // TODO: api: save sorting new order
             appContext.setDeviceSceneActions((arr) => {
@@ -109,6 +116,7 @@ export default function SceneView({ navigation }) {
             })
           }
           keyExtractor={(item) => item.actionId}
+          ListHeaderComponent={<DropdownCard style={{ marginBottom: 10 }} />}
           ListEmptyComponent={
             <MyResult
               text={t("screens.device.scenes.infoNoActionsAvailableInScene")}

src/Screens/Device/settings.js

@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { ScrollView, Text, View } from "react-native";
 import Card from "../../Components/Card";
 import { useContext, useEffect, useState } from "react";
 import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils";
@@ -23,7 +23,7 @@ export default function SettingsView({ navigation }) {
   }, []);
 
   return (
-    <>
+    <ScrollView>
       <Card cardTopicText={t("screens.device.settings.settingsTitle")}>
         <View
           style={{
@@ -149,6 +149,6 @@ export default function SettingsView({ navigation }) {
           {device.firmware.lastUpdated}
         </Text>
       </Card>
-    </>
+    </ScrollView>
   );
 }