Fix zIndex to allow Draggable being rendered on top of others

Mentionned in #90
tongyy · Dec 6, 2023 · b05af09 · b05af09
1 parent 502f92d
commit b05af09
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/Draggable.js b/Draggable.js
@@ -179,15 +179,15 @@ export default function Draggable(props) {
       left: 0,
       width: Window.width,
       height: Window.height,
+      elevation: z,
+      zIndex: z,
     };
-  }, []);
+  }, [z]);
 
   const dragItemCss = React.useMemo(() => {
     const style = {
       top: y,
       left: x,
-      elevation: z,
-      zIndex: z,
     };
     if (renderColor) {
       style.backgroundColor = renderColor;
@@ -208,7 +208,7 @@ export default function Draggable(props) {
       width: renderSize,
       height: renderSize,
     };
-  }, [children, isCircle, renderColor, renderSize, x, y, z]);
+  }, [children, isCircle, renderColor, renderSize, x, y]);
 
   const touchableContent = React.useMemo(() => {
     if (children) {

diff --git a/Draggable.tsx b/Draggable.tsx
@@ -211,15 +211,15 @@ export default function Draggable(props: IProps) {
       left: 0,
       width: Window.width,
       height: Window.height,
+      elevation: z,
+      zIndex: z,
     };
-  }, []);
+  }, [z]);
 
   const dragItemCss = React.useMemo(() => {
     const style: StyleProp<ViewStyle> = {
       top: y,
       left: x,
-      elevation: z,
-      zIndex: z,
     };
     if (renderColor) {
       style.backgroundColor = renderColor;
@@ -240,7 +240,7 @@ export default function Draggable(props: IProps) {
       width: renderSize,
       height: renderSize,
     };
-  }, [children, isCircle, renderColor, renderSize, x, y, z]);
+  }, [children, isCircle, renderColor, renderSize, x, y]);
 
   const touchableContent = React.useMemo(() => {
     if (children) {