From aa25df7dbd192394f2d6d42ed07d1e1f43cc07f0 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 15:23:12 -0400
Subject: Fix mention box position, Fix image flickering

---
 src/screens/profile/CaptionScreen.tsx | 53 ++++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 20 deletions(-)

(limited to 'src/screens')

diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9a1878aa..02b8caf2 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, {FC, useEffect, useState} from 'react';
+import React, {FC, useEffect, useMemo, useState} from 'react';
 import {
   Alert,
   Image,
@@ -293,27 +293,39 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 placeholderTextColor="white"
                 value={caption}
                 onChange={setCaption}
-                partTypes={mentionPartTypes('white', 'caption')}
+                partTypes={mentionPartTypes('white', 'caption', true)}
               />
             </View>
-            <SelectableItem
-              text={'Category'}
-              imageUri={require('../../assets/images/images.png')}
-              onPress={() => navigation.navigate('ChoosingCategoryScreen', {})}
-            />
-            <SelectableItem
-              text={'Tag Friends'}
-              imageUri={require('../../assets/icons/tagging/tag-icon.png')}
-              onPress={() =>
-                navigation.navigate('TagFriendsScreen', {
-                  media: {
-                    uri: mediaUri,
-                    isVideo: isMediaAVideo,
-                  },
-                  selectedTags: tags,
-                })
-              }
-            />
+            {useMemo(
+              () => (
+                <SelectableItem
+                  text={'Category'}
+                  imageUri={require('../../assets/images/images.png')}
+                  onPress={() =>
+                    navigation.navigate('ChoosingCategoryScreen', {})
+                  }
+                />
+              ),
+              [momentCategory],
+            )}
+            {useMemo(
+              () => (
+                <SelectableItem
+                  text={'Tag Friends'}
+                  imageUri={require('../../assets/icons/tagging/tag-icon.png')}
+                  onPress={() =>
+                    navigation.navigate('TagFriendsScreen', {
+                      media: {
+                        uri: mediaUri,
+                        isVideo: isMediaAVideo,
+                      },
+                      selectedTags: tags,
+                    })
+                  }
+                />
+              ),
+              [taggedUsersText],
+            )}
             {momentCategory ? (
               <TaggSquareButton
                 onPress={moment ? handleSubmitEditChanges : handleShare}
@@ -371,6 +383,7 @@ const styles = StyleSheet.create({
     borderColor: 'white',
     borderTopWidth: 1,
     borderBottomWidth: 1,
+    zIndex: 1,
   },
   media: {
     height: normalize(150),
-- 
cgit v1.2.3-70-g09d2