Set middle placement

2 files changed, 35 insertions, 6 deletions

diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index bd0d01bd..0d57c590 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useState} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import {
   Image,
   StyleSheet,
@@ -13,6 +13,7 @@ import {RootState} from '../../store/rootReducer';
 import {ScreenType, UserType} from '../../types';
 import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import TaggAvatar from '../profile/TaggAvatar';
+import {RefObject} from 'react';
 
 interface TaggDraggableProps {
   draggable?: boolean;
@@ -23,6 +24,7 @@ interface TaggDraggableProps {
   taggedUser: UserType;
   redirect: boolean;
   deleteFromList: () => void;
+  setStart: Function;
 }
 
 const TaggDraggable: React.FC<TaggDraggableProps> = (
@@ -42,14 +44,34 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
     taggedUser,
     redirect,
     deleteFromList,
+    setStart,
   } = props;
   let uriTip = require('../../assets/images/tagg-tip.png');
   let uriX = require('../../assets/images/draggableX.png');
 
+  const draggableRef = useRef(null);
+
+  useEffect(() => {
+    draggableRef.current.measure((fx, fy, width, height, px, py) => {
+      console.log('Drag Component width is: ' + width);
+      console.log('Drag Component height is: ' + height);
+      console.log('X offset to frame: ' + fx);
+      console.log('Y offset to frame: ' + fy);
+      console.log('X offset to page: ' + px);
+      console.log('Y offset to page: ' + py);
+      setStart([width, height]);
+    });
+  }, []);
+
   return (
     <TouchableWithoutFeedback>
-      <View style={styles.container}>
-        <TouchableOpacity disabled={true} style={[styles.button]}>
+      <View
+        style={styles.container}
+        onLayout={(event) => console.log(event.nativeEvent.layout)}>
+        <TouchableOpacity
+          disabled={true}
+          style={[styles.button]}
+          ref={draggableRef}>
           <TaggAvatar
             style={styles.avatar}
             screenType={ScreenType.Profile}
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>