Fix mention box position, Fix image flickering

3 files changed, 75 insertions, 31 deletions

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7967fdbc..7444e2d8 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,5 +1,5 @@
-import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
+import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native';
 import {Suggestion} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
@@ -13,15 +13,19 @@ type TaggTypeaheadProps = {
   keyword: string | undefined;
   component: string | undefined;
   onSuggestionPress: (suggestion: Suggestion) => void;
+  isShowBelowStyle?: boolean;
 };
 
 const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   keyword,
   component,
   onSuggestionPress,
+  isShowBelowStyle = false,
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
+  const [viewPx, setViewPx] = useState<number>(0);
+  const viewRef = useRef<View>(null);
   const [height, setHeight] = useState(0);
   const margin = component === 'comment' ? -10 : 0;
 
@@ -33,6 +37,22 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
     }
   }, [keyword]);
 
+  const onLayout = (e: LayoutChangeEvent) => {
+    setHeight(e.nativeEvent.layout.height);
+    viewRef.current?.measure(
+      (
+        _fx: number,
+        _fy: number,
+        _width: number,
+        _height: number,
+        px: number,
+        _py: number,
+      ) => {
+        setViewPx(px);
+      },
+    );
+  };
+
   const getQuerySuggested = async () => {
     if (keyword === undefined || keyword === '@') {
       return;
@@ -50,14 +70,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   }
 
   return (
-    <View>
-      <View style={styles.overlay} />
+    <View ref={viewRef}>
+      {!isShowBelowStyle && <View style={styles.overlay} />}
       <ScrollView
-        style={[styles.container, {top: -height, margin: margin}]}
+        style={[
+          styles.container,
+          isShowBelowStyle
+            ? [styles.topPadding, {left: -viewPx}]
+            : {top: -height, margin: margin},
+        ]}
         showsVerticalScrollIndicator={false}
-        onLayout={(event) => {
-          setHeight(event.nativeEvent.layout.height);
-        }}
+        onLayout={onLayout}
         keyboardShouldPersistTaps={'always'}>
         {results.map((user) => (
           <TaggUserRowCell
@@ -78,10 +101,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
 
 const styles = StyleSheet.create({
   container: {
+    position: 'absolute',
     width: SCREEN_WIDTH,
     maxHeight: 264,
     backgroundColor: 'white',
-    position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
   },
@@ -95,6 +118,9 @@ const styles = StyleSheet.create({
     bottom: 10,
     zIndex: -1,
   },
+  topPadding: {
+    top: 30,
+  },
 });
 
 export default TaggTypeahead;
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),
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 28879622..504631f5 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -82,12 +82,17 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
 export const mentionPartTypes: (
   theme: 'blue' | 'white',
   component: 'caption' | 'comment',
-) => PartType[] = (theme, component) => {
+  isShowBelowStyle?: boolean,
+) => PartType[] = (theme, component, isShowBelowStyle = false) => {
   return [
     {
       trigger: '@',
       renderSuggestions: (props) => (
-        <TaggTypeahead component={component} {...props} />
+        <TaggTypeahead
+          component={component}
+          isShowBelowStyle={isShowBelowStyle}
+          {...props}
+        />
       ),
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,