Add tagged users preview component

1 files changed, 31 insertions, 15 deletions

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index cd722090..146ad86c 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -14,10 +14,9 @@ import {
   View,
 } from 'react-native';
 import {MentionInput} from 'react-native-controlled-mentions';
-import {Button} from 'react-native-elements';
+import {Button, normalize} from 'react-native-elements';
 import {useDispatch, useSelector} from 'react-redux';
-import {ProfilePreviewType} from 'src/types';
-import {SearchBackground} from '../../components';
+import {ProfilePreview, SearchBackground} from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
@@ -29,6 +28,7 @@ import {
   updateProfileCompletionStage,
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType, ScreenType} from '../../types';
 import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
@@ -126,17 +126,29 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            {/* TODO: Add tag friends component */}
-            <TouchableOpacity
-              style={{width: SCREEN_WIDTH}}
-              onPress={() =>
-                navigation.navigate('TagSelectionScreen', {
-                  selectedUsers: taggedUsers,
-                })
-              }>
-              <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-            </TouchableOpacity>
-            {/* TODO: Display tagged friends component */}
+            <View style={{marginHorizontal: '5%', marginTop: '3%'}}>
+              <TouchableOpacity
+                style={{width: SCREEN_WIDTH}}
+                onPress={() =>
+                  navigation.navigate('TagSelectionScreen', {
+                    selectedUsers: taggedUsers,
+                  })
+                }>
+                <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+              </TouchableOpacity>
+              <View style={styles.tagFriendsContainer}>
+                {taggedUsers.map((user) => (
+                  <View>
+                    {/* TODO: Add Icon for Tag Friends */}
+                    <ProfilePreview
+                      profilePreview={user}
+                      previewType={'Tag Selection'}
+                      screenType={ScreenType.Profile}
+                    />
+                  </View>
+                ))}
+              </View>
+            </View>
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -183,8 +195,12 @@ const styles = StyleSheet.create({
   },
   tagFriendsTitle: {
     color: 'white',
-    fontSize: 18,
+    fontSize: normalize(12),
+    lineHeight: normalize(16.71),
+    letterSpacing: normalize(0.3),
+    fontWeight: '600',
   },
+  tagFriendsContainer: {flexDirection: 'row', marginTop: '3%'},
 });
 
 export default CaptionScreen;