1 files changed, 33 insertions, 3 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index bfe9a0e4..5adb27cb 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
 import {
   Alert,
   Image,
@@ -26,7 +26,12 @@ import {
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+  StatusBarHeight,
+} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 import TaggDraggable from '../../components/taggs/TaggDraggable';
@@ -44,6 +49,12 @@ interface CaptionScreenProps {
   route: CaptionScreenRouteProp;
   navigation: CaptionScreenNavigationProp;
 }
+interface momentTag {
+  userID: string;
+  username: string;
+  xLocation: number;
+  yLocation: number;
+}
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const {title, image, screenType} = route.params;
@@ -54,7 +65,12 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
+  // 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 navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -69,6 +85,17 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
    * @returns
    */
 
+  useEffect(() => {
+    imageRef.current.measure((fx, fy, width, height, px, py) => {
+      console.log('Component width is: ' + width);
+      console.log('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);
+    });
+  }, []);
+
   const handleShare = async () => {
     setLoading(true);
     if (!image.filename) {
@@ -115,7 +142,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               />
             </View>
             <CaptionScreenHeader style={styles.header} {...{title: title}} />
+            {/* this is the image we want to center our tags' initial location within */}
             <Image
+              ref={imageRef}
               style={styles.image}
               source={{uri: image.path}}
               resizeMode={'cover'}
@@ -128,8 +157,9 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            <Draggable x={50} y={50}>
+            <Draggable x={207} y={(414 + 153) / 2}>
               <TaggDraggable
+                ref={draggableRef}
                 draggable={true}
                 minX={0}
                 minY={0}