Cleanup scrolling logic, Fix scrollTo logic

3 files changed, 64 insertions, 56 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index 9d9824db..9667046c 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -26,6 +26,7 @@ export interface AddCommentProps {
   placeholderText: string;
   callback?: (message: string) => void;
   onFocus?: () => void;
+  isKeyboardAvoiding?: boolean;
   theme?: 'dark' | 'white';
 }
 
@@ -34,6 +35,7 @@ const AddComment: React.FC<AddCommentProps> = ({
   placeholderText,
   callback = (_) => null,
   onFocus = () => null,
+  isKeyboardAvoiding = true,
   theme = 'white',
 }) => {
   const {setShouldUpdateAllComments = () => null, commentTapped} =
@@ -111,49 +113,54 @@ const AddComment: React.FC<AddCommentProps> = ({
     }
   }, [isReplyingToComment, isReplyingToReply, commentTapped]);
 
-  return (
+  const mainContent = () => (
+    <View
+      style={[
+        theme === 'white' ? styles.containerWhite : styles.containerDark,
+        keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
+      ]}>
+      <View style={styles.textContainer}>
+        <Avatar style={styles.avatar} uri={avatar} />
+        <MentionInputControlled
+          containerStyle={styles.text}
+          placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
+          placeholder={placeholderText}
+          value={inReplyToMention + comment}
+          onFocus={onFocus}
+          onChange={(newText: string) => {
+            // skipping the `inReplyToMention` text
+            setComment(
+              newText.substring(inReplyToMention.length, newText.length),
+            );
+          }}
+          inputRef={ref}
+          partTypes={mentionPartTypes('blue')}
+        />
+        {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
+          <View style={styles.submitButton}>
+            <TouchableOpacity
+              style={
+                comment === ''
+                  ? [styles.submitButton, styles.greyButton]
+                  : styles.submitButton
+              }
+              disabled={comment === ''}
+              onPress={addComment}>
+              <UpArrowIcon width={35} height={35} color={'white'} />
+            </TouchableOpacity>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+  return isKeyboardAvoiding ? (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
-      <View
-        style={[
-          theme === 'white' ? styles.containerWhite : styles.containerDark,
-          keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
-        ]}>
-        <View style={styles.textContainer}>
-          <Avatar style={styles.avatar} uri={avatar} />
-          <MentionInputControlled
-            containerStyle={styles.text}
-            placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
-            placeholder={placeholderText}
-            value={inReplyToMention + comment}
-            onFocus={onFocus}
-            onChange={(newText: string) => {
-              // skipping the `inReplyToMention` text
-              setComment(
-                newText.substring(inReplyToMention.length, newText.length),
-              );
-            }}
-            inputRef={ref}
-            partTypes={mentionPartTypes('blue')}
-          />
-          {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
-            <View style={styles.submitButton}>
-              <TouchableOpacity
-                style={
-                  comment === ''
-                    ? [styles.submitButton, styles.greyButton]
-                    : styles.submitButton
-                }
-                disabled={comment === ''}
-                onPress={addComment}>
-                <UpArrowIcon width={35} height={35} color={'white'} />
-              </TouchableOpacity>
-            </View>
-          )}
-        </View>
-      </View>
+      {mainContent()}
     </KeyboardAvoidingView>
+  ) : (
+    mainContent()
   );
 };
 
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index da04211f..89f2a281 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -49,8 +49,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   );
   const [commentPreview, setCommentPreview] =
     useState<MomentCommentPreviewType | null>(moment.comment_preview);
-  const {keyboardVisible, currentScrollToIndex, scrollTo} =
-    useContext(MomentContext);
+  const {keyboardVisible, scrollTo} = useContext(MomentContext);
+  const [hideText, setHideText] = useState(false);
 
   useEffect(() => {
     setTags(momentTags);
@@ -67,6 +67,12 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
     fade();
   }, [fadeValue]);
 
+  useEffect(() => {
+    if (!keyboardVisible && hideText) {
+      setHideText(false);
+    }
+  }, [keyboardVisible, hideText]);
+
   return (
     <View style={[styles.container, style]}>
       <TouchableWithoutFeedback
@@ -97,7 +103,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           />
         </Animated.View>
       )}
-      {(!keyboardVisible || currentScrollToIndex !== index) && (
+      {!hideText && (
         <>
           {moment.caption !== '' &&
             renderTextWithMentions({
@@ -130,7 +136,11 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
             comment: message,
           })
         }
-        onFocus={() => scrollTo(index)}
+        onFocus={() => {
+          setHideText(true);
+          scrollTo(index);
+        }}
+        isKeyboardAvoiding={false}
         theme={'dark'}
       />
       <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text>
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index ddf4c478..b14b31fa 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -17,7 +17,6 @@ import {normalize, StatusBarHeight} from '../../utils';
 
 type MomentContextType = {
   keyboardVisible: boolean;
-  currentScrollToIndex: number;
   scrollTo: (index: number) => void;
 };
 
@@ -52,8 +51,6 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
     (m) => m.moment_category === moment_category,
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
-  const [currentScrollToIndex, setCurrentScrollToIndex] =
-    useState<number>(initialIndex);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
 
   useEffect(() => {
@@ -68,22 +65,16 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   }, []);
 
   const scrollTo = (index: number) => {
-    setCurrentScrollToIndex(index);
-    setTimeout(() => {
-      console.log('scrolling to', index);
-      scrollRef.current?.scrollToIndex({
-        index: index,
-        // viewOffset: -(AVATAR_DIM + normalize(120)),
-        viewOffset: -(AVATAR_DIM + normalize(90)),
-      });
-    }, 100);
+    scrollRef.current?.scrollToIndex({
+      index: index,
+      viewOffset: -(AVATAR_DIM + normalize(90)),
+    });
   };
 
   return (
     <MomentContext.Provider
       value={{
         keyboardVisible,
-        currentScrollToIndex,
         scrollTo,
       }}>
       <BlurView