Add grey background

3 files changed, 49 insertions, 22 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c48ce627..c17fdd93 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -137,6 +137,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     width: SCREEN_WIDTH,
+    // paddingTop: 10,
+    // marginTop: 10,
   },
   textContainer: {
     width: '95%',
diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx
index c52f3286..a3229bb0 100644
--- a/src/components/comments/MentionInputControlled.tsx
+++ b/src/components/comments/MentionInputControlled.tsx
@@ -27,6 +27,7 @@ import {Avatar} from '../common';
 import {normalize} from 'react-native-elements';
 
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils';
 
 const MentionInputControlled: FC<MentionInputProps> = ({
   value,
@@ -246,6 +247,15 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-end',
   },
   text: {flex: 1},
+  overlay: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'blue',
+    position: 'absolute',
+    left: 0,
+    bottom: 0,
+    zIndex: -1,
+  },
 });
 
 export {MentionInputControlled};
diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7379b5e0..a7789881 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,12 +1,12 @@
 import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet} from 'react-native';
+import {ScrollView, StyleSheet, View} from 'react-native';
 import {MentionSuggestionsProps} 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_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
 const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
@@ -42,26 +42,29 @@ 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}]}
+        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>
   );
 };
 
@@ -75,10 +78,22 @@ const styles = StyleSheet.create({
     // borderRadius: 10,
     backgroundColor: 'white',
     position: 'absolute',
+    // bottom: 0,
     alignSelf: 'center',
     zIndex: 1,
     // borderWidth: 1,
   },
+  overlay: {
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+    backgroundColor: 'gray',
+    opacity: 0.4,
+    position: 'absolute',
+    alignSelf: 'center',
+    // left: 0,
+    bottom: 0,
+    zIndex: -1,
+  },
 });
 
 export default TaggTypeahead;