5 files changed, 145 insertions, 0 deletions
diff --git a/src/assets/images/tagg-rectangle.png b/src/assets/images/tagg-rectangle.png
new file mode 100644
index 00000000..24bfd67e
--- /dev/null
+++ b/src/assets/images/tagg-rectangle.png
diff --git a/src/assets/images/tagg-tip.png b/src/assets/images/tagg-tip.png
new file mode 100644
index 00000000..eb3c5bad
--- /dev/null
+++ b/src/assets/images/tagg-tip.png
diff --git a/src/assets/images/tagg-x-button.png b/src/assets/images/tagg-x-button.png
new file mode 100644
index 00000000..5ce3846d
--- /dev/null
+++ b/src/assets/images/tagg-x-button.png
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx
new file mode 100644
index 00000000..0990d924
--- /dev/null
+++ b/src/components/taggs/TaggDraggable.tsx
@@ -0,0 +1,144 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useState} from 'react';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import Draggable from 'react-native-draggable';
+import {ScreenType} from 'src/types';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import TaggAvatar from '../profile/TaggAvatar';
+
+interface TaggDraggableProps {
+  draggable?: boolean;
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+  taggedUser: string;
+  redirect: boolean;
+  deleteFromList: Function;
+}
+
+const TaggDraggable: React.FC<TaggDraggableProps> = (props) => {
+  const [xCoord, setXcoord] = useState<number>(SCREEN_HEIGHT / 2);
+  const [yCoord, setYcoord] = useState<number>(SCREEN_WIDTH / 2);
+  const navigation = useNavigation();
+  const {
+    draggable,
+    minX,
+    minY,
+    maxX,
+    maxY,
+    taggedUser,
+    redirect,
+    deleteFromList,
+  } = props;
+  let uriTip = require('../../assets/images/tagg-tip.png');
+  let uriX = require('../../assets/images/tagg-x-button.png');
+
+  // <Image style={styles.image} source={uri} />
+
+  /**
+   * This function returns x,y pairing for each tagg.
+   */
+  const getCoords = () => {
+    return [xCoord, yCoord];
+  };
+  const renderTagg = () => {
+    <View style={styles.container}>
+      {/* user profile pic */}
+      <TouchableOpacity style={styles.imageRectangle}>
+        <TaggAvatar
+          screenType={ScreenType.Tagging}
+          editable={false}
+          userXId={taggedUser}
+        />
+        {/* @username  */}
+        <Text
+          onPress={navigation.push('Profile', {
+            userXId: taggedUser,
+            screenType: ScreenType.Profile,
+          })}>
+          {taggedUser}
+        </Text>
+        {/* x button */}
+        <Image style={styles.imageTip} source={uriTip} />
+        <TouchableOpacity onPress={() => deleteFromList()}>
+          <Image style={styles.imageX} source={uriX} />
+        </TouchableOpacity>
+      </TouchableOpacity>
+    </View>;
+  };
+  if (redirect) {
+    if (draggable) {
+      return (
+        <View style={styles.container}>
+          <Draggable
+            minX={minX}
+            minY={minY}
+            maxX={maxX}
+            maxY={maxY}
+            onDragRelease={(_, gestureState) => {
+              setXcoord(gestureState.moveX);
+              setYcoord(gestureState.moveY);
+            }}>
+            <TouchableOpacity style={styles.imageRectangle}>
+              <TaggAvatar
+                screenType={ScreenType.Tagging}
+                editable={false}
+                userXId={taggedUser}
+              />
+              <Text>{taggedUser}</Text>
+              <Image style={styles.imageTip} source={uriTip} />
+              <TouchableOpacity onPress={() => deleteFromList()}>
+                <Image style={styles.imageX} source={uriX} />
+              </TouchableOpacity>
+            </TouchableOpacity>
+          </Draggable>
+          <TouchableOpacity style={styles.imageRectangle}>
+            <Text>{taggedUser}</Text>
+            <Image style={styles.imageTip} source={uriTip} />
+            <TouchableOpacity onPress={() => deleteFromList()}>
+              <Image style={styles.imageX} source={uriX} />
+            </TouchableOpacity>
+          </TouchableOpacity>
+        </View>
+      );
+    } else {
+      renderTagg;
+    }
+  } else {
+  }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: normalize(42),
+    marginBottom: '5%',
+  },
+  bodyContainer: {
+    flexDirection: 'column',
+    height: normalize(42),
+    justifyContent: 'space-around',
+  },
+  inviteButton: {
+    backgroundColor: 'transparent',
+  },
+  imageRectangle: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'black',
+    borderWidth: 2,
+    borderRadius: 2,
+  },
+  imageTip: {
+    backgroundColor: 'black',
+  },
+  imageX: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default TaggDraggable;
diff --git a/src/types/types.ts b/src/types/types.ts
index e9975529..5aae9a6d 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -150,6 +150,7 @@ export enum ScreenType {
   Notifications,
   SuggestedPeople,
   Chat,
+  Tagging,
 }
 
 /**