2 files changed, 28 insertions, 18 deletions
diff --git a/src/components/common/Draggable.tsx b/src/components/common/Draggable.tsx
index edd29b78..1253fed4 100644
--- a/src/components/common/Draggable.tsx
+++ b/src/components/common/Draggable.tsx
@@ -59,7 +59,7 @@ interface IProps {
   minY?: number;
   maxX?: number;
   maxY?: number;
-  onDragStart?: () => void;
+  onDragStart?: () => number;
 }
 
 export default function Draggable(props: IProps) {
@@ -103,8 +103,8 @@ export default function Draggable(props: IProps) {
   // Whether we're currently dragging or not
   const isDragging = React.useRef(false);
 
-  // const [zIndex, setZIndex] = React.useState(z);
-  const zIndex = z;
+  const [zIndex, setZIndex] = React.useState(z);
+  // const zIndex = z;
 
   const getBounds = React.useCallback(() => {
     const left = x + offsetFromStart.current.x;
@@ -147,18 +147,17 @@ export default function Draggable(props: IProps) {
     [onDragRelease, shouldReverse, onRelease, reversePosition],
   );
 
-  const onPanResponderGrant = React.useCallback(
-    (_: GestureResponderEvent) => {
-      startBounds.current = getBounds();
-      isDragging.current = true;
-      if (!shouldReverse) {
-        pan.current.setOffset(offsetFromStart.current);
-        pan.current.setValue({x: 0, y: 0});
-      }
-      onDragStart();
-    },
-    [getBounds, shouldReverse],
-  );
+  const onPanResponderGrant = (_: GestureResponderEvent) => {
+    startBounds.current = getBounds();
+    isDragging.current = true;
+    if (!shouldReverse) {
+      pan.current.setOffset(offsetFromStart.current);
+      pan.current.setValue({x: 0, y: 0});
+    }
+    if (onDragStart) {
+      setZIndex(onDragStart());
+    }
+  };
 
   const handleOnDrag = React.useCallback(
     (e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 04b0558b..9a6cd08b 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -19,6 +19,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [offset, setOffset] = useState([0, 0]);
   const [curStart, setCurStart] = useState([0, 0]);
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
+  const [maxZIndex, setMaxZIndex] = useState(1);
 
   useEffect(() => {
     imageRef.current.measure((fx, fy, width, height, px, py) => {
@@ -34,17 +35,25 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     <>
       {tags.map((tag) => (
         <Draggable
+          key={tag.user.id}
           x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
           y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+          z={maxZIndex + 1}
           minX={offset[0]}
           minY={offset[1]}
           maxX={imageDimensions[0] + offset[0]}
           maxY={imageDimensions[1] + offset[1]}
-          onDragStart={() => null}>
+          onDragStart={() => {
+            const currZIndex = maxZIndex;
+            setMaxZIndex(currZIndex + 1);
+            return currZIndex;
+          }}>
           <TaggDraggable
             taggedUser={tag.user}
             editingView={true}
-            deleteFromList={() => deleteFromList(tag.user)}
+            deleteFromList={() => {
+              deleteFromList(tag.user);
+            }}
             setStart={setCurStart}
           />
         </Draggable>
@@ -54,13 +63,15 @@ const MomentTags: React.FC<MomentTagsProps> = ({
     <>
       {tags.map((tag) => (
         <Draggable
+          key={tag.user.id}
           x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
           y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+          z={tag.z}
           minX={offset[0]}
           minY={offset[1]}
           maxX={imageDimensions[0] + offset[0]}
           maxY={imageDimensions[1] + offset[1]}
-          onDragStart={() => null}>
+          disabled={true}>
           <TaggDraggable
             taggedUser={tag.user}
             editingView={editing}