Merge branch 'master' into tma853-tag-selection-screen

# Conflicts:
#	src/components/common/index.ts
#	src/screens/profile/CaptionScreen.tsx

1 files changed, 17 insertions, 3 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 941fea3e..ba180921 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
-import React, {Fragment, useEffect, useState} from 'react';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
 import {
   Image,
   Keyboard,
@@ -14,6 +14,7 @@ import {Button} from 'react-native-elements';
 import {MainStackParams} from 'src/routes';
 import {
   CaptionScreenHeader,
+  MomentTags,
   SearchBackground,
   TaggLoadingIndicator,
 } from '../../components';
@@ -32,7 +33,7 @@ interface TagFriendsScreenProps {
 const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const {image, selectedUsers} = route.params;
   const navigation = useNavigation();
-  const [loading, setLoading] = useState(false);
+  const imageRef = useRef(null);
   const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
 
   /*
@@ -54,7 +55,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 
   return (
     <SearchBackground>
-      {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />}
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
@@ -78,10 +78,24 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               title={'Tap on photo to Tag friends!'}
             />
             <Image
+              ref={imageRef}
               style={styles.image}
               source={{uri: image.path}}
               resizeMode={'cover'}
             />
+            <MomentTags
+              editing={true}
+              tags={taggedUsers.map((user) => ({
+                id: '',
+                x: 0,
+                y: 0,
+                user,
+              }))}
+              imageRef={imageRef}
+              deleteFromList={(user) =>
+                setTaggedUsers(taggedUsers.filter((u) => u.id !== user.id))
+              }
+            />
             <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
               <TagFriendsFooter
                 taggedUsers={taggedUsers}