From a8f095c734b748b38e2ac50483c41923ab0078f6 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 19 May 2021 15:10:04 -0700
Subject: Set middle placement

---
 src/components/taggs/TaggDraggable.tsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

(limited to 'src/components')

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}
-- 
cgit v1.2.3-70-g09d2