Set middle placement

1 files changed, 10 insertions, 3 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 5adb27cb..309701b5 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -68,9 +68,12 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   // created a state variable to keep track of every tag
   // idea is that each element in the list
   const [taggList, setTaggList] = useState([]);
-  const draggableRef = useRef(null);
   const imageRef = useRef(null);
   const [tagInitCoords, setTagInitCoords] = useState([]);
+  const [offset, setOffset] = useState([0, 0]);
+
+  const [curStart, setCurStart] = useState([0, 0]);
+  const [dim, setDim] = useState([0, 0]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -93,6 +96,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       console.log('Y offset to frame: ' + fy);
       console.log('X offset to page: ' + px);
       console.log('Y offset to page: ' + py);
+      setOffset([px, py]);
+      setDim([width, height]);
     });
   }, []);
 
@@ -157,9 +162,10 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            <Draggable x={207} y={(414 + 153) / 2}>
+            <Draggable
+              x={dim[0] / 2 - curStart[0] / 2 + offset[0]}
+              y={offset[1] + dim[1] / 2 - curStart[1] / 2}>
               <TaggDraggable
-                ref={draggableRef}
                 draggable={true}
                 minX={0}
                 minY={0}
@@ -168,6 +174,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 taggedUser={user}
                 redirect={true}
                 deleteFromList={() => console.log('Hello world')}
+                setStart={setCurStart}
               />
             </Draggable>
           </View>