Fix styling for tip,container

1 files changed, 26 insertions, 4 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index f77a2d23..1f49f917 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -59,9 +59,28 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
+  const [isTop, setIsTop] = useState(false);
+  const zIndex = [0, 999];
   // created a state variable to keep track of every tag
   // idea is that each element in the list
-  const [taggList, setTaggList] = useState([]);
+  const [taggList, setTaggList] = useState([
+    {
+      first_name: 'Ivan',
+      id: 'cee45bf8-7f3d-43c8-99bb-ec04908efe58',
+      last_name: 'Chen',
+      thumbnail_url:
+        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-cee45bf8-7f3d-43c8-99bb-ec04908efe58-thumbnail.jpg',
+      username: 'ivan.tagg',
+    },
+    {
+      first_name: 'Ankit',
+      id: '3bcf6947-bee6-46b0-ad02-6f4d25eaeac3',
+      last_name: 'Thanekar',
+      thumbnail_url:
+        'https://tagg-dev.s3.us-east-2.amazonaws.com/thumbnails/smallProfilePicture/spp-3bcf6947-bee6-46b0-ad02-6f4d25eaeac3-thumbnail.jpg',
+      username: 'ankit.thanekar',
+    },
+  ]);
   const imageRef = useRef(null);
   const [offset, setOffset] = useState([0, 0]);
   const [curStart, setCurStart] = useState([0, 0]);
@@ -163,12 +182,15 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             <Draggable
               x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
               y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+              z={isTop ? zIndex[1] : zIndex[0]}
               minX={offset[0]}
               minY={offset[1]}
-              maxX={imageDimensions[0] + offset[0] + curStart[0] / 3}
-              maxY={imageDimensions[1] + offset[1] + curStart[1]}>
+              maxX={imageDimensions[0] + offset[0]}
+              maxY={imageDimensions[1] + offset[1]}
+              onPressIn={() => setIsTop(true)}
+              onPressOut={() => setIsTop(false)}>
               <TaggDraggable
-                taggedUser={testUser}
+                taggedUser={taggList[1]}
                 editingView={true}
                 deleteFromList={() => console.log('Hello world')}
                 setStart={setCurStart}