Add tagged users preview component

3 files changed, 73 insertions, 20 deletions

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 66d68d8f..af49c6a2 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -148,6 +148,14 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.discoverUsersUsername;
       nameStyle = styles.discoverUsersName;
       break;
+    case 'Tag Selection':
+      containerStyle = styles.tagSelectionContainer;
+      avatarStyle = styles.tagSelectionAvatar;
+      nameContainerStyle = styles.tagSelectionNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.tagSelectionUsername;
+      nameStyle = styles.tagSelectionName;
+      break;
     case 'Comment':
       containerStyle = styles.commentContainer;
       avatarStyle = styles.commentAvatar;
@@ -195,10 +203,9 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
           </>
         )}
-        {previewType === 'Comment' && (
-          <Text style={usernameStyle}>{usernameToDisplay}</Text>
-        )}
-        {previewType === 'Discover Users' && (
+        {(previewType === 'Discover Users' ||
+          previewType === 'Tag Selection' ||
+          previewType === 'Comment') && (
           <>
             <Text style={usernameStyle}>{usernameToDisplay}</Text>
           </>
@@ -368,6 +375,35 @@ const styles = StyleSheet.create({
     marginRight: 15,
     borderRadius: 50,
   },
+  tagSelectionContainer: {
+    width: 60,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    margin: '1%',
+  },
+  tagSelectionAvatar: {
+    width: 34,
+    height: 34,
+    borderRadius: 20,
+  },
+  tagSelectionNameContainer: {
+    width: '100%',
+    paddingVertical: '5%',
+  },
+  tagSelectionUsername: {
+    fontWeight: '500',
+    fontSize: normalize(9),
+    lineHeight: normalize(10),
+    letterSpacing: normalize(0.2),
+    color: 'white',
+    textAlign: 'center',
+  },
+  tagSelectionName: {
+    fontWeight: '500',
+    fontSize: 8,
+    color: 'white',
+  },
 });
 
 export default ProfilePreview;
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;
diff --git a/src/types/types.ts b/src/types/types.ts
index e9975529..7bf5597f 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -142,7 +142,8 @@ export type PreviewType =
   | 'Discover Users'
   | 'Friend'
   | 'Suggested People Drawer'
-  | 'Suggested People Screen';
+  | 'Suggested People Screen'
+  | 'Tag Selection';
 
 export enum ScreenType {
   Profile,