Finish logic for draggables, Caption screen logic is done

1 files changed, 41 insertions, 33 deletions

diff --git a/src/components/moments/TagFriendsFoooter.tsx b/src/components/moments/TagFriendsFoooter.tsx
index 2a844680..16158612 100644
--- a/src/components/moments/TagFriendsFoooter.tsx
+++ b/src/components/moments/TagFriendsFoooter.tsx
@@ -1,5 +1,5 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {Dispatch, SetStateAction} from 'react';
+import React, {Dispatch, SetStateAction, useMemo} from 'react';
 import {
   Image,
   ScrollView,
@@ -27,20 +27,25 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
     setTaggedUsers(filteredSelection);
   };
 
-  const TaggMoreButton = () => (
-    <TouchableOpacity
-      onPress={() =>
-        navigation.navigate('TagSelectionScreen', {
-          selectedUsers: taggedUsers,
-        })
-      }
-      style={styles.tagMoreContainer}>
-      <Image
-        source={require('../../assets/icons/tagging/white-plus-icon.png')}
-        style={styles.tagMoreIcon}
-      />
-      <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
-    </TouchableOpacity>
+  const goToSelectionScreen = () => {
+    navigation.navigate('TagSelectionScreen', {
+      selectedUsers: taggedUsers,
+    });
+  };
+
+  const taggMoreButton = useMemo(
+    () => (
+      <TouchableOpacity
+        onPress={goToSelectionScreen}
+        style={styles.tagMoreContainer}>
+        <Image
+          source={require('../../assets/icons/tagging/white-plus-icon.png')}
+          style={styles.tagMoreIcon}
+        />
+        <Text style={styles.tagMoreLabel}>{'Tagg More'}</Text>
+      </TouchableOpacity>
+    ),
+    [],
   );
 
   const TaggedUser = (user: ProfilePreviewType) => (
@@ -66,32 +71,35 @@ const TagFriendsFooter: React.FC<TagFriendsFooterProps> = ({
    * If taggUsers is empty, title acts as a button
    * Else, gets disabled and TaggMore button appears
    */
-  const TagFriendsTitle = () => (
-    <TouchableOpacity
-      style={styles.tagFriendsTitleContainer}
-      disabled={taggedUsers.length !== 0}
-      onPress={() =>
-        navigation.navigate('TagSelectionScreen', {
-          selectedUsers: taggedUsers,
-        })
-      }>
-      <Image
-        source={require('../../assets/icons/tagging/tag-icon.png')}
-        style={styles.tagIcon}
-      />
-      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-    </TouchableOpacity>
+  const tagFriendsTitle = useMemo(
+    () => (
+      <TouchableOpacity
+        style={styles.tagFriendsTitleContainer}
+        disabled={taggedUsers.length !== 0}
+        onPress={() =>
+          navigation.navigate('TagSelectionScreen', {
+            selectedUsers: taggedUsers,
+          })
+        }>
+        <Image
+          source={require('../../assets/icons/tagging/tag-icon.png')}
+          style={styles.tagIcon}
+        />
+        <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
+      </TouchableOpacity>
+    ),
+    [taggedUsers.length],
   );
 
   return (
     <>
-      <TagFriendsTitle />
+      {tagFriendsTitle}
       <View style={styles.tagFriendsContainer}>
         <ScrollView horizontal>
           {taggedUsers.map((user) => (
-            <TaggedUser {...user} />
+            <TaggedUser key={user.id} {...user} />
           ))}
-          {taggedUsers.length !== 0 && <TaggMoreButton />}
+          {taggedUsers.length !== 0 && taggMoreButton}
         </ScrollView>
       </View>
     </>