Create basic component and styling

1 files changed, 19 insertions, 10 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 3fd2e7ef..bfe9a0e4 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -30,6 +30,7 @@ import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 import TaggDraggable from '../../components/taggs/TaggDraggable';
+import Draggable from 'react-native-draggable';
 
 /**
  * Upload Screen to allow users to upload posts to Tagg
@@ -53,6 +54,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
+  const [taggList, setTaggList] = useState([]);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -62,6 +64,11 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     });
   };
 
+  /**
+   * need a handler to take care of creating a tagged user object, append that object to the taggList state variable.
+   * @returns
+   */
+
   const handleShare = async () => {
     setLoading(true);
     if (!image.filename) {
@@ -121,16 +128,18 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            <TaggDraggable
-              draggable={true}
-              minX={0}
-              minY={0}
-              maxX={50}
-              maxY={50}
-              taggedUser={user}
-              redirect={true}
-              deleteFromList={() => console.log('Hello world')}
-            />
+            <Draggable x={50} y={50}>
+              <TaggDraggable
+                draggable={true}
+                minX={0}
+                minY={0}
+                maxX={50}
+                maxY={50}
+                taggedUser={user}
+                redirect={true}
+                deleteFromList={() => console.log('Hello world')}
+              />
+            </Draggable>
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>