Add back button, Exchange selected users

1 files changed, 15 insertions, 3 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index fb382e53..bc7c9ed0 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
@@ -16,6 +16,7 @@ import {
 import {MentionInput} from 'react-native-controlled-mentions';
 import {Button} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
+import {ProfilePreviewType} from 'src/types';
 import {SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
@@ -45,13 +46,18 @@ interface CaptionScreenProps {
 }
 
 const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
-  const {title, image, screenType} = route.params;
+  const {title, image, screenType, selectedUsers} = route.params;
   const {
     user: {userId},
   } = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
   const [caption, setCaption] = useState('');
   const [loading, setLoading] = useState(false);
+  const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]);
+
+  useEffect(() => {
+    setTaggedUsers(selectedUsers ? selectedUsers : []);
+  }, selectedUsers);
 
   const navigateToProfile = () => {
     //Since the logged In User is navigating to own profile, useXId is not required
@@ -122,11 +128,17 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
             />
             <TouchableOpacity
               style={{width: SCREEN_WIDTH}}
-              onPress={() => navigation.navigate('TagSelection')}>
+              onPress={() =>
+                navigation.navigate('TagSelection', {
+                  selectedUsers: taggedUsers,
+                })
+              }>
+              {/* TODO: Add tag friends component */}
               <Text style={{color: 'white', fontSize: normalize(14)}}>
                 Tag Friends
               </Text>
             </TouchableOpacity>
+            {/* TODO: Display tagged friends component */}
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>