[MM-14017] Fix whitespace between input box and post list on iOS (#2580)

* fix whitespace between input box and post list on iOS

* corrected viewPosition when pulling down the post list and add constant for thread screen

* corrected changes made to viewPosition

app/components/post_list/post_list.ios.js

@@ -4,7 +4,10 @@
 import React from 'react';
 import {FlatList, StyleSheet} from 'react-native';
 
+import {debounce} from 'mattermost-redux/actions/helpers';
+
 import {ListTypes} from 'app/constants';
+import {THREAD} from 'app/constants/screen';
 import {makeExtraData} from 'app/utils/list_view';
 
 import PostListBase from './post_list_base';
@@ -59,8 +62,8 @@ export default class PostList extends PostListBase {
 
     handleScroll = (event) => {
         const pageOffsetY = event.nativeEvent.contentOffset.y;
+        const contentHeight = event.nativeEvent.contentSize.height;
         if (pageOffsetY > 0) {
-            const contentHeight = event.nativeEvent.contentSize.height;
             const direction = (this.contentOffsetY < pageOffsetY) ?
                 ListTypes.VISIBILITY_SCROLL_UP :
                 ListTypes.VISIBILITY_SCROLL_DOWN;
@@ -72,9 +75,26 @@ export default class PostList extends PostListBase {
             ) {
                 this.props.onLoadMoreUp();
             }
+        } else if (pageOffsetY < 0) {
+            if (this.state.postListHeight > contentHeight || this.props.location === THREAD) {
+                // Posting a message like multiline or jumbo emojis causes the FlatList component for iOS
+                // to render RefreshControl component and remain the space as is when it's unmounted,
+                // leaving a whitespace of ~64 units of height between input box and post list.
+                // This condition explicitly pull down the list to recent post when pageOffsetY is less than zero,
+                // and the height of the layout is greater than its content or is on a thread screen.
+                this.handleScrollToRecentPost();
+            }
         }
     };
 
+    handleScrollToRecentPost = debounce(() => {
+        this.refs.list.scrollToIndex({
+            animated: true,
+            index: 0,
+            viewPosition: 1,
+        });
+    }, 100);
+
     handleScrollToIndexFailed = () => {
         requestAnimationFrame(() => {
             this.hasDoneInitialScroll = false;

app/components/post_list/post_list_base.js

@@ -44,6 +44,7 @@ export default class PostListBase extends PureComponent {
         shouldRenderReplyButton: PropTypes.bool,
         siteURL: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
+        location: PropTypes.string,
     };
 
     static defaultProps = {

app/constants/screen.js

@@ -0,0 +1,4 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export const THREAD = 'thread';

app/screens/thread/__snapshots__/thread.test.js.snap

@@ -17,6 +17,7 @@ exports[`thread should match snapshot, has root post 1`] = `
     <Connect(PostList)
       currentUserId="member_user_id"
       indicateNewMessages={false}
+      location="thread"
       navigator={
         Object {
           "dismissModal": [MockFunction],
@@ -113,6 +114,7 @@ exports[`thread should match snapshot, render footer 1`] = `
 <Connect(PostList)
   currentUserId="member_user_id"
   indicateNewMessages={false}
+  location="thread"
   navigator={
     Object {
       "dismissModal": [MockFunction],
@@ -157,6 +159,7 @@ exports[`thread should match snapshot, render footer 2`] = `
   currentUserId="member_user_id"
   indicateNewMessages={false}
   lastViewedAt={0}
+  location="thread"
   navigator={
     Object {
       "dismissModal": [MockFunction],

app/screens/thread/thread.js

@@ -7,6 +7,8 @@ import {Platform} from 'react-native';
 import {intlShape} from 'react-intl';
 import {General, RequestStatus} from 'mattermost-redux/constants';
 
+import {THREAD} from 'app/constants/screen';
+
 import Loading from 'app/components/loading';
 import KeyboardLayout from 'app/components/layout/keyboard_layout';
 import PostList from 'app/components/post_list';
@@ -148,6 +150,7 @@ export default class Thread extends PureComponent {
                     currentUserId={myMember && myMember.user_id}
                     lastViewedAt={this.state.lastViewedAt}
                     navigator={navigator}
+                    location={THREAD}
                 />
             );