4 files changed, 47 insertions, 24 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 18b9c24e..9d9824db 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -25,13 +25,15 @@ export interface AddCommentProps {
   momentId: string;
   placeholderText: string;
   callback?: (message: string) => void;
+  onFocus?: () => void;
   theme?: 'dark' | 'white';
 }
 
 const AddComment: React.FC<AddCommentProps> = ({
   momentId,
   placeholderText,
-  callback = (msg) => null,
+  callback = (_) => null,
+  onFocus = () => null,
   theme = 'white',
 }) => {
   const {setShouldUpdateAllComments = () => null, commentTapped} =
@@ -125,6 +127,7 @@ const AddComment: React.FC<AddCommentProps> = ({
             placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
             placeholder={placeholderText}
             value={inReplyToMention + comment}
+            onFocus={onFocus}
             onChange={(newText: string) => {
               // skipping the `inReplyToMention` text
               setComment(
diff --git a/src/components/moments/IndividualMomentTitleBar.tsx b/src/components/moments/IndividualMomentTitleBar.tsx
index 2bebafa7..4ae9471f 100644
--- a/src/components/moments/IndividualMomentTitleBar.tsx
+++ b/src/components/moments/IndividualMomentTitleBar.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
-import {TouchableOpacity} from 'react-native';
-import {Text, View, StyleSheet, ViewProps} from 'react-native';
-import {normalize} from '../../utils';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from 'react-native';
 import CloseIcon from '../../assets/ionicons/close-outline.svg';
+import {normalize} from '../../utils';
 
 interface IndividualMomentTitleBarProps extends ViewProps {
   title: string;
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 02dbffa3..7a588325 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -11,12 +11,14 @@ interface MomentPostProps {
   moment: MomentPostType;
   userXId: string | undefined;
   screenType: ScreenType;
+  index: number;
 }
 
 const MomentPost: React.FC<MomentPostProps> = ({
   moment,
   userXId,
   screenType,
+  index,
 }) => {
   const {userId: loggedInUserId, username: loggedInUsername} = useSelector(
     (state: RootState) => state.user.user,
@@ -88,6 +90,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
         moment={moment}
         screenType={screenType}
         momentTags={tags}
+        index={index}
       />
     </>
   );
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 5192fdf0..eb89fd03 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -1,9 +1,10 @@
 import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import Animated, {EasingNode} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
+import {MomentContext} from '../../screens/profile/IndividualMoment';
 import {RootState} from '../../store/rootReducer';
 import {
   MomentCommentPreviewType,
@@ -13,11 +14,11 @@ import {
   UserType,
 } from '../../types';
 import {
+  getLoggedInUserAsProfilePreview,
   getTimePosted,
   navigateToProfile,
   normalize,
   SCREEN_WIDTH,
-  getLoggedInUserAsProfilePreview,
 } from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
 import {AddComment} from '../comments';
@@ -28,12 +29,14 @@ interface MomentPostContentProps extends ViewProps {
   screenType: ScreenType;
   moment: MomentPostType;
   momentTags: MomentTagType[];
+  index: number;
 }
 const MomentPostContent: React.FC<MomentPostContentProps> = ({
   screenType,
   moment,
   style,
   momentTags,
+  index,
 }) => {
   const state: RootState = useStore().getState();
   const navigation = useNavigation();
@@ -46,6 +49,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   );
   const [commentPreview, setCommentPreview] =
     useState<MomentCommentPreviewType | null>(moment.comment_preview);
+  const {keyboardVisible, setScrollToTargetIndex} = useContext(MomentContext);
 
   useEffect(() => {
     setTags(momentTags);
@@ -92,20 +96,30 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           />
         </Animated.View>
       )}
-      {moment.caption !== '' &&
-        renderTextWithMentions({
-          value: moment.caption,
-          styles: styles.captionText,
-          partTypes: mentionPartTypes('momentCaption'),
-          onPress: (user: UserType) =>
-            navigateToProfile(state, dispatch, navigation, screenType, user),
-        })}
-      <MomentCommentPreview
-        momentId={moment.moment_id}
-        commentsCount={moment.comments_count}
-        commentPreview={commentPreview}
-        screenType={screenType}
-      />
+      {!keyboardVisible && (
+        <>
+          {moment.caption !== '' &&
+            renderTextWithMentions({
+              value: moment.caption,
+              styles: styles.captionText,
+              partTypes: mentionPartTypes('momentCaption'),
+              onPress: (user: UserType) =>
+                navigateToProfile(
+                  state,
+                  dispatch,
+                  navigation,
+                  screenType,
+                  user,
+                ),
+            })}
+          <MomentCommentPreview
+            momentId={moment.moment_id}
+            commentsCount={moment.comments_count}
+            commentPreview={commentPreview}
+            screenType={screenType}
+          />
+        </>
+      )}
       <AddComment
         placeholderText={'Add a comment here!'}
         momentId={moment.moment_id}
@@ -115,6 +129,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
             comment: message,
           })
         }
+        onFocus={() => setScrollToTargetIndex(index)}
         theme={'dark'}
       />
       <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text>
@@ -123,9 +138,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    borderWidth: 1,
-  },
+  container: {},
   image: {
     width: SCREEN_WIDTH,
     aspectRatio: 1,
@@ -147,7 +160,6 @@ const styles = StyleSheet.create({
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
     marginBottom: normalize(18),
-    borderWidth: 1,
   },
   tapTag: {
     position: 'absolute',