Squashed commit of the following:

commit 7711d92c8dab4f00e36ad3bbca9bc202fa313e43
Author: Brian Kim <brian@tagg.id>
Date:   Tue May 25 17:08:41 2021 -0400

    Integrate with layering

commit cbd01996ae4784b737fb4b634eb0048bb7d85967
Author: Brian Kim <brian@tagg.id>
Date:   Tue May 25 16:48:52 2021 -0400

    Fix yarn

commit 39164064b903df36b7373e177d00c3307a8a311a
Author: Brian Kim <brian@tagg.id>
Date:   Tue May 25 16:46:34 2021 -0400

    Add horizontal scroll

commit 02841df862aa68dcf615d0264236d9a14b52befe
Author: Brian Kim <brian@tagg.id>
Date:   Tue May 25 15:03:13 2021 -0400

    Lint fixes

commit 5c6e8e453026005f6621efe751d90c76f457a72f
Author: Brian Kim <brian@tagg.id>
Date:   Tue May 25 14:46:39 2021 -0400

    Set boundaries, fix offset calculation, fix length and height calculation to be individual

commit 6d27d859fd5364556928e5a2feadad1aff4dc6b9
Author: Brian Kim <brian@tagg.id>
Date:   Tue May 25 11:32:08 2021 -0400

    Pause

4 files changed, 95 insertions, 36 deletions

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 9a6cd08b..75a81814 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -17,27 +17,56 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   deleteFromList,
 }) => {
   const [offset, setOffset] = useState([0, 0]);
-  const [curStart, setCurStart] = useState([0, 0]);
+  const [curStart, setCurStart] = useState({});
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
 
+  const editCurStart = (idName: number, coords: number[]) => {
+    setCurStart((prev) => ({...prev, [idName]: coords}));
+  };
+
   useEffect(() => {
-    imageRef.current.measure((fx, fy, width, height, px, py) => {
-      setOffset([px, py]);
-      setImageDimensions([width, height]);
-    });
+    setTimeout(() => {
+      imageRef.current.measure(
+        (
+          fx: number,
+          fy: number,
+          width: number,
+          height: number,
+          _x: number,
+          _y: number,
+        ) => {
+          setOffset([fx, fy]);
+          setImageDimensions([width, height]);
+        },
+      );
+    }, 250);
   }, []);
 
+  useEffect(() => {}, [curStart]);
+
   if (!tags) {
     return null;
   }
   return editing && deleteFromList ? (
     <>
-      {tags.map((tag) => (
+      {tags.map((tag, index) => (
         <Draggable
           key={tag.user.id}
-          x={imageDimensions[0] / 2 - curStart[0] / 2 + offset[0]}
-          y={offset[1] + imageDimensions[1] / 2 - curStart[1] / 2}
+          x={
+            curStart[index]
+              ? (imageDimensions[0] * tag.x) / 100 +
+                offset[0] -
+                curStart[index][0] / 2
+              : (imageDimensions[0] * tag.x) / 100 + offset[0]
+          }
+          y={
+            curStart[index]
+              ? (imageDimensions[1] * tag.y) / 100 +
+                offset[1] -
+                curStart[index][1] / 2
+              : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1]
+          }
           z={maxZIndex + 1}
           minX={offset[0]}
           minY={offset[1]}
@@ -51,21 +80,31 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           <TaggDraggable
             taggedUser={tag.user}
             editingView={true}
-            deleteFromList={() => {
-              deleteFromList(tag.user);
-            }}
-            setStart={setCurStart}
+            deleteFromList={() => deleteFromList(tag.user)}
+            setStart={(coords: number[]) => editCurStart(index, coords)}
           />
         </Draggable>
       ))}
     </>
   ) : (
     <>
-      {tags.map((tag) => (
+      {tags.map((tag, index) => (
         <Draggable
           key={tag.user.id}
-          x={imageDimensions[0] / 2 - curStart[0] / 2 + tag.x}
-          y={imageDimensions[0] / 2 - curStart[0] / 2 + tag.y}
+          x={
+            curStart[index]
+              ? (imageDimensions[0] * tag.x) / 100 +
+                offset[0] -
+                curStart[index][0] / 2
+              : (imageDimensions[0] * tag.x) / 100 + offset[0]
+          }
+          y={
+            curStart[index]
+              ? (imageDimensions[1] * tag.y) / 100 +
+                offset[1] -
+                curStart[index][1] / 2
+              : (imageDimensions[1] * tag.y) / 100 + offset[1] + offset[1]
+          }
           z={tag.z}
           minX={offset[0]}
           minY={offset[1]}
@@ -76,7 +115,7 @@ const MomentTags: React.FC<MomentTagsProps> = ({
             taggedUser={tag.user}
             editingView={editing}
             deleteFromList={() => null}
-            setStart={setCurStart}
+            setStart={(coords: number[]) => editCurStart(index, coords)}
           />
         </Draggable>
       ))}
diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 7b109877..2a844680 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,9 +1,16 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {Dispatch, SetStateAction} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  Image,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import {ProfilePreview} from '..';
 import {ProfilePreviewType, ScreenType} from '../../types';
-import {normalize} from '../../utils/layouts';
+import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
 
 interface TagFriendsFooterProps {
   taggedUsers: ProfilePreviewType[];
@@ -80,10 +87,12 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
     <>
       <TagFriendsTitle />
       <View style={styles.tagFriendsContainer}>
-        {taggedUsers.map((user) => (
-          <TaggedUser {...user} />
-        ))}
-        {taggedUsers.length !== 0 && <TaggMoreButton />}
+        <ScrollView horizontal>
+          {taggedUsers.map((user) => (
+            <TaggedUser {...user} />
+          ))}
+          {taggedUsers.length !== 0 && <TaggMoreButton />}
+        </ScrollView>
       </View>
     </>
   );
@@ -99,10 +108,9 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
   tagFriendsContainer: {
-    flexDirection: 'row',
-    marginTop: '3%',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
+    height: SCREEN_HEIGHT * 0.1,
+    marginTop: 2,
+    marginBottom: 5,
   },
   tagMoreLabel: {
     fontWeight: '500',
@@ -111,7 +119,6 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.2),
     color: 'white',
     textAlign: 'center',
-    marginVertical: '5%',
   },
   closeIconContainer: {
     width: 20,
@@ -120,14 +127,25 @@ const styles = StyleSheet.create({
     zIndex: 1,
   },
   tagMoreContainer: {
-    flexDirection: 'column',
+    width: 60,
     alignItems: 'center',
+    justifyContent: 'flex-start',
+    marginTop: -12,
+  },
+  tagMoreIcon: {
+    width: 38,
+    height: 38,
+    marginTop: 13,
+    marginBottom: '10%',
+  },
+  taggedUserContainer: {
+    marginTop: -12,
   },
-  tagMoreIcon: {width: 38, height: 38, top: -2},
-  taggedUserContainer: {flexDirection: 'row-reverse'},
   closeIcon: {
     width: 20,
     height: 20,
+    left: 15,
+    top: 10,
   },
   tagFriendsTitleContainer: {
     flexDirection: 'row',
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 88c075e2..dd93a5fd 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -377,10 +377,8 @@ const styles = StyleSheet.create({
   },
   tagSelectionContainer: {
     width: 60,
-    flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    margin: '1%',
   },
   tagSelectionAvatar: {
     width: 34,
@@ -389,7 +387,7 @@ const styles = StyleSheet.create({
   },
   tagSelectionNameContainer: {
     width: '100%',
-    marginVertical: '10%',
+    marginVertical: normalize(5),
   },
   tagSelectionUsername: {
     fontWeight: '500',
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
index 55f8162b..3dd5f230 100644
--- a/src/components/taggs/TaggDraggable.tsx
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -35,9 +35,13 @@ const TaggDraggable: React.FC<TaggDraggableProps> = (
   const draggableRef = useRef(null);
 
   useEffect(() => {
-    draggableRef.current.measure((width: number, height: number) => {
-      setStart([width, height]);
-    });
+    setTimeout(() => {
+      draggableRef.current.measure(
+        (_1: number, _2: number, width: number, height: number) => {
+          setStart([width, height]);
+        },
+      );
+    }, 250);
   }, []);
 
   const user: UserType = {