Fixed styles for comments vs captions

1 files changed, 18 insertions, 5 deletions

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 6686b4d9..6b3df559 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,21 +1,35 @@
 import React, {Fragment, useEffect, useState} from 'react';
 import {ScrollView, StyleSheet, View} from 'react-native';
-import {MentionSuggestionsProps} from 'react-native-controlled-mentions';
+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, SCREEN_HEIGHT, 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, setMargin] = useState(0);
+
+  useEffect(() => {
+    if (component === 'comment') {
+      setMargin(-10);
+    }
+  }, [component]);
 
   useEffect(() => {
     if (keyword === '') {
@@ -45,7 +59,7 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({
     <View>
       <View style={styles.overlay} />
       <ScrollView
-        style={[styles.container, {top: -height}]}
+        style={[styles.container, {top: -height, margin: margin}]}
         showsVerticalScrollIndicator={false}
         onLayout={(event) => {
           setHeight(event.nativeEvent.layout.height);
@@ -76,7 +90,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
-    margin: -10,
   },
   overlay: {
     width: SCREEN_WIDTH,