Use ShadowDecorator

dtun · Aug 12, 2024 · 9653782 · 9653782
1 parent 96daf91
commit 9653782
Showing 1 changed file with 11 additions and 18 deletions.
diff --git a/components/MyMenuEdit.tsx b/components/MyMenuEdit.tsx
@@ -1,5 +1,7 @@
 import { StyleSheet } from "react-native";
-import DraggableFlatList from "react-native-draggable-flatlist";
+import DraggableFlatList, {
+  ShadowDecorator,
+} from "react-native-draggable-flatlist";
 
 import { red } from "@/constants";
 import { useEvent } from "@/hooks";
@@ -35,12 +37,14 @@ export function MyMenuEdit({
       keyExtractor={({ id }) => id}
       onDragEnd={({ data }) => setMenuData(data)}
       renderItem={(params) => (
-        <RenderMenuItem
-          {...params}
-          menuData={menuData}
-          moveMenuItem={moveMenuItem}
-          toggleMenuItem={toggleMenuItem}
-        />
+        <ShadowDecorator>
+          <RenderMenuItem
+            {...params}
+            menuData={menuData}
+            moveMenuItem={moveMenuItem}
+            toggleMenuItem={toggleMenuItem}
+          />
+        </ShadowDecorator>
       )}
       style={styles.list}
     />
@@ -49,7 +53,6 @@ export function MyMenuEdit({
 
 function RenderMenuItem({
   drag: onLongPress,
-  isActive,
   item: { icon, id, checked, title },
   menuData,
   toggleMenuItem,
@@ -86,7 +89,6 @@ function RenderMenuItem({
         styles.listItem,
         isFirst && styles.listItemTop,
         isLast && styles.listItemBottom,
-        isActive && styles.listItemActive,
       ]}
     >
       <View style={styles.iconContainer}>
@@ -185,15 +187,6 @@ let styles = StyleSheet.create({
     height: 48,
     padding: 4,
   },
-  listItemActive: {
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-  },
   listItemTop: {
     borderTopLeftRadius: 8,
     borderTopRightRadius: 8,