1 files changed, 40 insertions, 8 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 2a8c773e..79d4d970 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,12 +1,14 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {
   Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
+  TextInput,
   View,
 } from 'react-native';
-import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import ParsedText from 'react-native-parsed-text';
 import {useDispatch, useSelector} from 'react-redux';
 import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import {TAGG_LIGHT_BLUE} from '../../constants';
@@ -14,7 +16,7 @@ import {postComment} from '../../services';
 import {updateReplyPosted} from '../../store/actions';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {Avatar} from '../common';
+import {Avatar, TaggTypeahead} from '../common';
 
 /**
  * This file provides the add comment view for a user.
@@ -36,7 +38,9 @@ const AddComment: React.FC<AddCommentProps> = ({
   isCommentInFocus,
 }) => {
   const [comment, setComment] = React.useState('');
-  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [isMentioning, setIsMentioning] = useState(false);
+  const [mentionSearch, setMentionSearch] = useState('');
 
   const {avatar} = useSelector((state: RootState) => state.user);
   const dispatch = useDispatch();
@@ -95,6 +99,7 @@ const AddComment: React.FC<AddCommentProps> = ({
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+      {isMentioning && <TaggTypeahead search={mentionSearch} />}
       <View
         style={[
           styles.container,
@@ -106,11 +111,37 @@ const AddComment: React.FC<AddCommentProps> = ({
             style={styles.text}
             placeholder={placeholderText}
             placeholderTextColor="grey"
-            onChangeText={setComment}
-            value={comment}
+            onChangeText={(newText: string) => {
+              const newestChar = newText[newText.length - 1];
+              if (newestChar === ' ') {
+                setIsMentioning(false);
+                setMentionSearch('');
+              }
+              if (newestChar === '@') {
+                setIsMentioning(true);
+              }
+              if (isMentioning) {
+                const match = newText.match(/@(.*)$/);
+                if (match) {
+                  setMentionSearch(match[1]);
+                }
+              }
+              setComment(newText);
+            }}
             multiline={true}
-            ref={ref}
-          />
+            ref={ref}>
+            <ParsedText
+              style={styles.text}
+              parse={[
+                {
+                  pattern: /@\{.*\}/,
+                  style: {color: 'red'},
+                  renderText: (text: string) => '@fooo',
+                },
+              ]}>
+              {comment}
+            </ParsedText>
+          </TextInput>
           <View style={styles.submitButton}>
             <TouchableOpacity style={styles.submitButton} onPress={addComment}>
               <UpArrowIcon width={35} height={35} color={'white'} />
@@ -141,6 +172,7 @@ const styles = StyleSheet.create({
     flex: 1,
     padding: '1%',
     marginHorizontal: '1%',
+    maxHeight: 100,
   },
   avatar: {
     height: 35,