Fix mention box position, Fix image flickering

1 files changed, 35 insertions, 9 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;