1 files changed, 46 insertions, 28 deletions

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 747e0bb5..7967fdbc 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,21 +1,29 @@
 import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
-import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
+import {ScrollView, StyleSheet, View} from 'react-native';
+import {Suggestion} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_WIDTH, shuffle} from '../../utils';
+import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
-const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
+type TaggTypeaheadProps = {
+  keyword: string | undefined;
+  component: string | undefined;
+  onSuggestionPress: (suggestion: Suggestion) => void;
+};
+
+const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   keyword,
+  component,
   onSuggestionPress,
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
   const [height, setHeight] = useState(0);
+  const margin = component === 'comment' ? -10 : 0;
 
   useEffect(() => {
     if (keyword === '') {
@@ -42,40 +50,50 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
   }
 
   return (
-    <ScrollView
-      style={[styles.container, {top: -(height + 30)}]}
-      showsVerticalScrollIndicator={false}
-      onLayout={(event) => {
-        setHeight(event.nativeEvent.layout.height);
-      }}
-      keyboardShouldPersistTaps={'always'}>
-      {results.map((user) => (
-        <TaggUserRowCell
-          onPress={() => {
-            setResults([]);
-            onSuggestionPress({
-              id: user.id,
-              name: user.username,
-            });
-          }}
-          user={user}
-        />
-      ))}
-    </ScrollView>
+    <View>
+      <View style={styles.overlay} />
+      <ScrollView
+        style={[styles.container, {top: -height, margin: margin}]}
+        showsVerticalScrollIndicator={false}
+        onLayout={(event) => {
+          setHeight(event.nativeEvent.layout.height);
+        }}
+        keyboardShouldPersistTaps={'always'}>
+        {results.map((user) => (
+          <TaggUserRowCell
+            onPress={() => {
+              setResults([]);
+              onSuggestionPress({
+                id: user.id,
+                name: user.username,
+              });
+            }}
+            user={user}
+          />
+        ))}
+      </ScrollView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    marginLeft: SCREEN_WIDTH * 0.05,
-    width: SCREEN_WIDTH * 0.9,
+    width: SCREEN_WIDTH,
     maxHeight: 264,
-    borderRadius: 10,
     backgroundColor: 'white',
     position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
-    borderWidth: 1,
+  },
+  overlay: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'gray',
+    opacity: 0.4,
+    position: 'absolute',
+    alignSelf: 'center',
+    bottom: 10,
+    zIndex: -1,
   },
 });