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

1 files changed, 32 insertions, 14 deletions

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',