Merge pull request #199 from IvanIFChen/tma570-revamp-comments-keyboard-2

[TMA-570] Revamp Comments Keyboard

18 files changed, 182 insertions, 168 deletions

diff --git a/src/assets/icons/up_arrow.svg b/src/assets/icons/up_arrow.svg
new file mode 100644
index 00000000..fc92b551
--- /dev/null
+++ b/src/assets/icons/up_arrow.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 792 792"><defs></defs><path class="cls-1" d="M522.58,375.86l-18.19,16.86a13.06,13.06,0,0,1-18.46-.68l-62.6-67.45v219a22,22,0,0,1-22,22H393.1a22,22,0,0,1-22-22V322l-65,70.05a13.11,13.11,0,0,1-18.5.68l-18.19-16.86a13.12,13.12,0,0,1-.68-18.51l96.52-104,20.39-22,1.52-1.4a13.6,13.6,0,0,1,2.52-1.85,14.44,14.44,0,0,1,2.85-1.16,2.18,2.18,0,0,1,.88-.2,6.27,6.27,0,0,1,1.2-.2,11.3,11.3,0,0,1,1.16-.08h.44a11.3,11.3,0,0,1,1.16.08,6.58,6.58,0,0,1,1.28.2,4.48,4.48,0,0,1,.92.24c.48.12.93.32,1.41.48l1,.48a13.24,13.24,0,0,1,2.84,2l1.52,1.4,20.43,22,96.48,104A13.12,13.12,0,0,1,522.58,375.86Z" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index c6c816b9..24b3473c 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,16 +1,17 @@
-import * as React from 'react';
+import React, {useEffect} from 'react';
 import {
   Image,
+  Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleSheet,
   View,
 } from 'react-native';
-import AsyncStorage from '@react-native-community/async-storage';
-import {TaggBigInput} from '../onboarding';
+import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {postMomentComment} from '../../services';
-import {logout} from '../../store/actions';
-import {useSelector, useDispatch} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
@@ -30,98 +31,114 @@ const AddComment: React.FC<AddCommentProps> = ({
   moment_id,
 }) => {
   const [comment, setComment] = React.useState('');
+  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
 
-  const dispatch = useDispatch();
   const {
     avatar,
     user: {userId},
   } = useSelector((state: RootState) => state.user);
 
-  const handleCommentUpdate = (comment: string) => {
-    setComment(comment);
-  };
-
   const postComment = async () => {
-    try {
-      const token = await AsyncStorage.getItem('token');
-      if (!token) {
-        dispatch(logout());
-        return;
-      }
-      const postedComment = await postMomentComment(
-        userId,
-        comment,
-        moment_id,
-        token,
-      );
-
-      if (postedComment) {
-        //Set the current comment to en empty string if the comment was posted successfully.
-        handleCommentUpdate('');
+    const postedComment = await postMomentComment(
+      userId,
+      comment.trim(),
+      moment_id,
+    );
 
-        //Indicate the MomentCommentsScreen that it needs to download the new comments again
-        setNewCommentsAvailable(true);
-      }
-    } catch (err) {
-      console.log('Error while posting comment!');
+    if (postedComment) {
+      setComment('');
+      setNewCommentsAvailable(true);
     }
   };
 
+  useEffect(() => {
+    const showKeyboard = () => setKeyboardVisible(true);
+    Keyboard.addListener('keyboardWillShow', showKeyboard);
+    return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
+  }, []);
+
+  useEffect(() => {
+    const hideKeyboard = () => setKeyboardVisible(false);
+    Keyboard.addListener('keyboardWillHide', hideKeyboard);
+    return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+  }, []);
+
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      keyboardVerticalOffset={(1 / 9) * SCREEN_HEIGHT}>
-      <View style={styles.container}>
-        <Image
-          style={styles.avatar}
-          source={
-            avatar
-              ? {uri: avatar}
-              : require('../../assets/images/avatar-placeholder.png')
-          }
-        />
-
-        <TaggBigInput
-          style={styles.text}
-          containerStyle={styles.textContainer}
-          multiline
-          placeholder="Add a comment....."
-          placeholderTextColor="gray"
-          onChangeText={handleCommentUpdate}
-          onSubmitEditing={postComment}
-          value={comment}
-        />
+      keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+      <View
+        style={[
+          styles.container,
+          keyboardVisible ? {backgroundColor: '#fff'} : {},
+        ]}>
+        <View style={styles.textContainer}>
+          <Image
+            style={styles.avatar}
+            source={
+              avatar
+                ? {uri: avatar}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+          <TextInput
+            style={styles.text}
+            placeholder="Add a comment..."
+            placeholderTextColor="grey"
+            onChangeText={setComment}
+            value={comment}
+            autoCorrect={false}
+            multiline={true}
+          />
+          <View style={styles.submitButton}>
+            <TouchableOpacity style={styles.submitButton} onPress={postComment}>
+              <UpArrowIcon width={35} height={35} color={'white'} />
+            </TouchableOpacity>
+          </View>
+        </View>
       </View>
     </KeyboardAvoidingView>
   );
 };
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
+    backgroundColor: '#f7f7f7',
+    alignItems: 'center',
     width: SCREEN_WIDTH,
-    marginTop: '5%',
   },
   textContainer: {
-    width: '100%',
-    alignItems: 'flex-start',
-    marginVertical: 11,
+    width: '95%',
+    flexDirection: 'row',
+    backgroundColor: '#e8e8e8',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: '3%',
+    borderRadius: 25,
   },
   text: {
-    backgroundColor: 'white',
-    width: '70%',
-    paddingLeft: '2%',
-    paddingRight: '2%',
-    paddingBottom: '1%',
-    paddingTop: '1%',
-    height: 60,
+    flex: 1,
+    padding: '1%',
+    marginHorizontal: '1%',
   },
   avatar: {
-    height: 40,
-    width: 40,
+    height: 35,
+    width: 35,
     borderRadius: 30,
     marginRight: 10,
-    marginLeft: 20,
+    marginLeft: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
+  },
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: '3%',
+    marginVertical: '2%',
+    alignSelf: 'flex-end',
   },
 });
 
diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 221056c0..9caaffca 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ProfilePreviewType} from '../../types';
 import {SCREEN_WIDTH} from '../../utils';
 import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -55,18 +55,18 @@ const styles = StyleSheet.create({
   },
   acceptButton: {
     padding: 0,
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
   },
   rejectButton: {
     borderWidth: 1,
     backgroundColor: 'white',
-    borderColor: TAGG_TEXT_LIGHT_BLUE,
+    borderColor: TAGG_LIGHT_BLUE,
   },
   acceptButtonTitleColor: {
     color: 'white',
   },
   rejectButtonTitleColor: {
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   buttonTitle: {
     padding: 0,
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 098482ae..a23d7736 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {BottomDrawer} from '.';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 // conforms the JSX onPress attribute type
@@ -87,7 +87,7 @@ const styles = StyleSheet.create({
   panelButtonTitleCancel: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
 });
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index b307a62c..41b044fe 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
 import {TextInput} from 'react-native-gesture-handler';
-import { TAGG_TEXT_LIGHT_BLUE } from '../../constants';
+import { TAGG_LIGHT_BLUE } from '../../constants';
 import {SCREEN_WIDTH} from '../../utils';
 
 interface SocialLinkModalProps {
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     /* identical to box height */
     textAlign: 'center',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   textInput: {
     height: 20,
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 7905e8a9..c591d973 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -11,7 +11,7 @@ import DownIcon from '../../assets/icons/down_icon.svg';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
 import UpIcon from '../../assets/icons/up_icon.svg';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
 import {SCREEN_WIDTH} from '../../utils';
 import MomentTile from './MomentTile';
@@ -87,7 +87,7 @@ const Moment: React.FC<MomentProps> = ({
                 width={19}
                 height={19}
                 onPress={() => move('up', title)}
-                color={TAGG_TEXT_LIGHT_BLUE}
+                color={TAGG_LIGHT_BLUE}
                 style={{marginLeft: 5}}
               />
             )}
@@ -96,7 +96,7 @@ const Moment: React.FC<MomentProps> = ({
                 width={19}
                 height={19}
                 onPress={() => move('down', title)}
-                color={TAGG_TEXT_LIGHT_BLUE}
+                color={TAGG_LIGHT_BLUE}
                 style={{marginLeft: 5}}
               />
             )}
@@ -111,7 +111,7 @@ const Moment: React.FC<MomentProps> = ({
               width={21}
               height={21}
               onPress={() => navigateToImagePicker()}
-              color={TAGG_TEXT_LIGHT_BLUE}
+              color={TAGG_LIGHT_BLUE}
               style={{marginRight: 10}}
             />
             {shouldAllowDeletion && (
@@ -173,7 +173,7 @@ const styles = StyleSheet.create({
   titleText: {
     fontSize: 16,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   // titleContainer: {
   //   flex: 1,
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 93271fa1..508b6d9f 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -27,6 +27,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     setElapsedTime(getTimePosted(dateTime));
     getMomentCommentsCount(momentId, setCommentsCount);
   }, [dateTime, momentId]);
+
   return (
     <View style={[styles.container, style]}>
       <Image
diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx
index 4212afd1..0e42bd13 100644
--- a/src/components/onboarding/TaggBigInput.tsx
+++ b/src/components/onboarding/TaggBigInput.tsx
@@ -7,7 +7,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import { TAGG_LIGHT_PURPLE } from '../../constants';
+import {TAGG_LIGHT_PURPLE} from '../../constants';
 
 interface TaggBigInputProps extends TextInputProps {
   valid?: boolean;
@@ -24,7 +24,7 @@ const TaggBigInput = React.forwardRef((props: TaggBigInputProps, ref: any) => {
     <View
       style={props.containerStyle ? props.containerStyle : styles.container}>
       <TextInput
-        style={[{ width: props.width }, styles.input]}
+        style={[{width: props.width}, styles.input]}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 345079ad..eb60a005 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,3 +1,4 @@
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
 import {
   Alert,
@@ -9,18 +10,35 @@ import {
   Text,
   View,
 } from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {Cover} from '.';
+import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
+import {COVER_HEIGHT, TAGG_LIGHT_BLUE} from '../../constants';
 import {
-  CategorySelectionScreenType,
-  FriendshipStatusType,
-  MomentCategoryType,
-  MomentType,
-  ProfilePreviewType,
-  ProfileType,
-  ScreenType,
-  UserType,
-} from '../../types';
-import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+  UPLOAD_MOMENT_PROMPT_THREE_HEADER,
+  UPLOAD_MOMENT_PROMPT_THREE_MESSAGE,
+  UPLOAD_MOMENT_PROMPT_TWO_HEADER,
+  UPLOAD_MOMENT_PROMPT_TWO_MESSAGE,
+} from '../../constants/strings';
+import {
+  blockUnblockUser,
+  deleteUserMomentsForCategory,
+  friendUnfriendUser,
+  loadFriendsData,
+  updateMomentCategories,
+  updateUserXFriends,
+  updateUserXProfileAllScreens,
+} from '../../store/actions';
+import {
+  EMPTY_MOMENTS_LIST,
+  EMPTY_PROFILE_PREVIEW_LIST,
+  NO_PROFILE,
+  NO_USER,
+} from '../../store/initialStates';
+import {RootState} from '../../store/rootreducer';
+import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
 import {
   fetchUserX,
   getUserAsProfilePreviewType,
@@ -28,39 +46,12 @@ import {
   SCREEN_HEIGHT,
   userLogin,
 } from '../../utils';
-import TaggsBar from '../taggs/TaggsBar';
+import {TaggPrompt} from '../common';
 import {Moment} from '../moments';
+import TaggsBar from '../taggs/TaggsBar';
 import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
-import {useDispatch, useSelector, useStore} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-import {
-  friendUnfriendUser,
-  blockUnblockUser,
-  loadFriendsData,
-  updateUserXFriends,
-  updateMomentCategories,
-  deleteUserMomentsForCategory,
-  updateUserXProfileAllScreens,
-} from '../../store/actions';
-import {
-  NO_USER,
-  NO_PROFILE,
-  EMPTY_PROFILE_PREVIEW_LIST,
-  EMPTY_MOMENTS_LIST,
-} from '../../store/initialStates';
-import {Cover} from '.';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
-import {TaggPrompt} from '../common';
-import {
-  UPLOAD_MOMENT_PROMPT_THREE_HEADER,
-  UPLOAD_MOMENT_PROMPT_THREE_MESSAGE,
-  UPLOAD_MOMENT_PROMPT_TWO_HEADER,
-  UPLOAD_MOMENT_PROMPT_TWO_MESSAGE,
-} from '../../constants/strings';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -119,9 +110,10 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
     false,
   );
-  const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
-    boolean
-  >(false);
+  const [
+    isStageThreePromptClosed,
+    setIsStageThreePromptClosed,
+  ] = useState<boolean>(false);
 
   const onRefresh = useCallback(() => {
     const refrestState = async () => {
@@ -425,7 +417,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   createCategoryButton: {
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
     justifyContent: 'center',
     alignItems: 'center',
     width: '70%',
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 6284ff59..a45e9e43 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -3,7 +3,7 @@ import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
 import {Button} from 'react-native-elements';
 import {
   TAGG_DARK_BLUE,
-  TAGG_TEXT_LIGHT_BLUE,
+  TAGG_LIGHT_BLUE,
   TOGGLE_BUTTON_TYPE,
 } from '../../constants';
 import ToggleButton from './ToggleButton';
@@ -178,7 +178,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.4,
     height: SCREEN_WIDTH * 0.09,
-    borderColor: TAGG_TEXT_LIGHT_BLUE,
+    borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 3,
     borderRadius: 5,
     marginRight: '2%',
@@ -186,7 +186,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   requestedButtonTitle: {
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
     padding: 0,
     fontSize: 14,
     fontWeight: '700',
@@ -205,7 +205,7 @@ const styles = StyleSheet.create({
     padding: 0,
     borderRadius: 5,
     marginRight: '2%',
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
   },
 });
 
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 76f0f27f..9fe36ae1 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -4,7 +4,7 @@ import {StyleSheet, TouchableOpacity} from 'react-native';
 import {useSelector} from 'react-redux';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
 import PersonOutline from '../../assets/ionicons/person-outline.svg';
-import {TAGG_DARK_BLUE, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants';
 import {RootState} from '../../store/rootreducer';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {GenericMoreInfoDrawer} from '../common';
@@ -101,7 +101,7 @@ const styles = StyleSheet.create({
   panelButtonTitleCancel: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
   more: {
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 5d8f7874..236d811c 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {StyleSheet, Text} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';
 
 type ToggleButtonProps = {
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.4,
     height: SCREEN_WIDTH * 0.08,
-    borderColor: TAGG_TEXT_LIGHT_BLUE,
+    borderColor: TAGG_LIGHT_BLUE,
     borderWidth: 3,
     borderRadius: 5,
     marginRight: '2%',
@@ -45,10 +45,10 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
   },
   buttonColor: {
-    backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+    backgroundColor: TAGG_LIGHT_BLUE,
   },
   textColor: {color: 'white'},
   buttonColorToggled: {backgroundColor: 'white'},
-  textColorToggled: {color: TAGG_TEXT_LIGHT_BLUE},
+  textColorToggled: {color: TAGG_LIGHT_BLUE},
 });
 export default ToggleButton;
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 8a06017c..bdbd5773 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,7 +7,7 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import {PreviewType, ProfilePreviewType, ScreenType} from 'src/types';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import SearchResults from './SearchResults';
 
 interface RecentSearchesProps extends TouchableOpacityProps {
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
   clear: {
     fontSize: 18,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
 });
 
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index c971a82c..0cfde857 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -6,7 +6,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import {
   AVATAR_DIM,
   TAGGS_GRADIENT,
-  TAGG_TEXT_LIGHT_BLUE,
+  TAGG_LIGHT_BLUE,
 } from '../../constants';
 import {TwitterPostType} from '../../types';
 import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils';
@@ -237,7 +237,7 @@ const styles = StyleSheet.create({
   },
   replyShowThisThread: {
     fontSize: 15,
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
 });
 
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index b96d9438..37b6e038 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -59,7 +59,7 @@ export const SNAPCHAT_FONT_COLOR: string = '#FFFC00';
 export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
 
 export const TAGG_DARK_BLUE = '#4E699C';
-export const TAGG_TEXT_LIGHT_BLUE: string = '#698DD3';
+export const TAGG_LIGHT_BLUE: string = '#698DD3';
 export const TAGG_LIGHT_PURPLE = '#F4DDFF';
 
 export const TAGGS_GRADIENT = {
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index b2611b62..6434477e 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,19 +1,21 @@
-import * as React from 'react';
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import {ProfileStackParams} from '../../routes/main';
+import React, {useEffect, useRef} from 'react';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useDispatch} from 'react-redux';
+import {getMomentComments} from '../..//services';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 import {CommentTile, TabsGradient} from '../../components';
+import {AddComment} from '../../components/';
+import {ProfileStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils/screenDimensions';
-import {AddComment} from '../../components/';
-import {useEffect} from 'react';
-import AsyncStorage from '@react-native-community/async-storage';
-import {getMomentComments} from '../..//services';
-import {useDispatch} from 'react-redux';
-import {logout} from '../../store/actions';
-import {SafeAreaView} from 'react-native-safe-area-context';
-import Animated from 'react-native-reanimated';
-import BackIcon from '../../assets/icons/back-arrow.svg';
 
 /**
  * Comments Screen for an image uploaded
@@ -36,19 +38,20 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   const [commentsList, setCommentsList] = React.useState([]);
   const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
   const dispatch = useDispatch();
+  const ref = useRef<ScrollView>(null);
 
   useEffect(() => {
     const loadComments = async () => {
-      const token = await AsyncStorage.getItem('token');
-      if (!token) {
-        dispatch(logout());
-        return;
-      }
-      getMomentComments(moment_id, setCommentsList, token);
+      getMomentComments(moment_id, setCommentsList);
       setNewCommentsAvailable(false);
     };
     if (newCommentsAvailable) {
       loadComments();
+      setTimeout(() => {
+        ref.current?.scrollToEnd({
+          animated: true,
+        });
+      }, 500);
     }
   }, [dispatch, moment_id, newCommentsAvailable]);
 
@@ -68,7 +71,8 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
           </Text>
         </View>
         <View style={styles.body}>
-          <Animated.ScrollView
+          <ScrollView
+            ref={ref}
             style={styles.scrollView}
             contentContainerStyle={styles.scrollViewContent}>
             {commentsList &&
@@ -79,7 +83,7 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
                   screenType={screenType}
                 />
               ))}
-          </Animated.ScrollView>
+          </ScrollView>
           <AddComment
             setNewCommentsAvailable={setNewCommentsAvailable}
             moment_id={moment_id}
@@ -117,7 +121,7 @@ const styles = StyleSheet.create({
   },
   body: {
     width: SCREEN_WIDTH,
-    height: (4.9 / 6) * SCREEN_HEIGHT,
+    height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',
   },
   scrollView: {
diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
index 9f98b4d7..f231cb78 100644
--- a/src/screens/search/SearchScreen.tsx
+++ b/src/screens/search/SearchScreen.tsx
@@ -20,7 +20,7 @@ import {
   SearchResultsBackground,
   TabsGradient,
 } from '../../components';
-import {SEARCH_ENDPOINT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {SEARCH_ENDPOINT, TAGG_LIGHT_BLUE} from '../../constants';
 import {loadRecentlySearched, resetScreenType} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType, ScreenType, UserType} from '../../types';
@@ -213,7 +213,7 @@ const styles = StyleSheet.create({
   clear: {
     fontSize: 17,
     fontWeight: 'bold',
-    color: TAGG_TEXT_LIGHT_BLUE,
+    color: TAGG_LIGHT_BLUE,
   },
   image: {
     width: SCREEN_WIDTH,
diff --git a/src/services/MomentServices.ts b/src/services/MomentServices.ts
index 735f2ed2..7bad6d4c 100644
--- a/src/services/MomentServices.ts
+++ b/src/services/MomentServices.ts
@@ -14,9 +14,9 @@ import {checkImageUploadStatus} from '../utils';
 export const getMomentComments = async (
   momentId: string,
   callback: Function,
-  token: string,
 ) => {
   try {
+    const token = await AsyncStorage.getItem('token');
     const response = await fetch(COMMENTS_ENDPOINT + '?moment_id=' + momentId, {
       method: 'GET',
       headers: {
@@ -35,14 +35,13 @@ export const getMomentComments = async (
   }
 };
 
-//Post a comment on a moment
 export const postMomentComment = async (
   commenter: string,
   comment: string,
   momentId: string,
-  token: string,
 ) => {
   try {
+    const token = await AsyncStorage.getItem('token');
     const request = new FormData();
     request.append('moment_id', momentId);
     request.append('commenter', commenter);
@@ -60,7 +59,7 @@ export const postMomentComment = async (
     return await response.json();
   } catch (error) {
     Alert.alert(ERROR_FAILED_TO_COMMENT);
-    return {};
+    return undefined;
   }
 };