Fixed styles for comments vs captions

4 files changed, 27 insertions, 11 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c48ce627..db85d525 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -122,7 +122,7 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
               );
             }}
             inputRef={ref}
-            partTypes={mentionPartTypes('blue')}
+            partTypes={mentionPartTypes('blue', 'comment')}
             addComment={addComment}
           />
         </View>
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,
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 8bffd82b..05095d16 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -167,7 +167,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               placeholderTextColor="gray"
               value={caption}
               onChange={setCaption}
-              partTypes={mentionPartTypes('blue')}
+              partTypes={mentionPartTypes('blue', 'caption')}
             />
             <TouchableOpacity
               onPress={() =>
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 5c17cefe..80786b74 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -79,13 +79,16 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
   );
 };
 
-export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = (
-  style,
-) => {
+export const mentionPartTypes: (
+  style: 'blue' | 'white',
+  component: 'caption' | 'comment',
+) => PartType[] = (style, component) => {
   return [
     {
       trigger: '@',
-      renderSuggestions: (props) => <TaggTypeahead {...props} />,
+      renderSuggestions: (props) => (
+        <TaggTypeahead component={component} {...props} />
+      ),
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,
       textStyle: