From b05af09a711c1033a65a8522110c85e836d2b12a Mon Sep 17 00:00:00 2001
From: Brandon Vigne <brandon.vigne@makesuccess.io>
Date: Wed, 6 Dec 2023 13:12:07 +0100
Subject: [PATCH] Fix zIndex to allow Draggable being rendered on top of others

Mentionned in https://github.com/tongyy/react-native-draggable/issues/90
---
 Draggable.js  | 8 ++++----
 Draggable.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Draggable.js b/Draggable.js
index d1c8650..cd32096 100644
--- 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
index 363ab4a..5be696e 100644
--- 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) {