Cleanup scrolling logic, Fix scrollTo logic

1 files changed, 46 insertions, 39 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()
   );
 };