From 8272e2d75bd1bdc9b1d28960d2e896d20ae73a21 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 15:52:37 -0400
Subject: Fix mention box padding issue

---
 src/components/common/TaggTypeahead.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

(limited to 'src/components/common')

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7444e2d8..672cff69 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -6,7 +6,7 @@ import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
 type TaggTypeaheadProps = {
@@ -24,7 +24,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
-  const [viewPx, setViewPx] = useState<number>(0);
+  const [viewPxy, setViewPxy] = useState<{px: number; py: number}>({
+    px: 0,
+    py: 0,
+  });
   const viewRef = useRef<View>(null);
   const [height, setHeight] = useState(0);
   const margin = component === 'comment' ? -10 : 0;
@@ -46,9 +49,9 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
         _width: number,
         _height: number,
         px: number,
-        _py: number,
+        py: number,
       ) => {
-        setViewPx(px);
+        setViewPxy({px, py});
       },
     );
   };
@@ -70,17 +73,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   }
 
   return (
-    <View ref={viewRef}>
+    <View ref={viewRef} onLayout={onLayout}>
+      {/* <View ref={viewRef} onLayout={onLayout}> */}
       {!isShowBelowStyle && <View style={styles.overlay} />}
       <ScrollView
         style={[
           styles.container,
           isShowBelowStyle
-            ? [styles.topPadding, {left: -viewPx}]
+            ? [styles.topPadding, {left: -viewPxy.px}]
             : {top: -height, margin: margin},
         ]}
         showsVerticalScrollIndicator={false}
-        onLayout={onLayout}
         keyboardShouldPersistTaps={'always'}>
         {results.map((user) => (
           <TaggUserRowCell
@@ -119,7 +122,7 @@ const styles = StyleSheet.create({
     zIndex: -1,
   },
   topPadding: {
-    top: 30,
+    top: isIPhoneX() ? 180 : 150,
   },
 });
 
-- 
cgit v1.2.3-70-g09d2