Merge pull request #4371 from rdjuric/calculateIdealNumOfMessages

[Performance] Approximate the ideal number of reports to render on first render

src/components/InvertedFlatList/index.android.js

@@ -6,7 +6,6 @@ export default forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
-        initialNumToRender={20}
 
         // Remove clipped subviews helps prevent avatars and attachments from eating up excess memory on Android. When
         // we run out of memory images stop appearing without any warning.

src/components/InvertedFlatList/index.ios.js

@@ -6,6 +6,5 @@ export default forwardRef((props, ref) => (
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
-        initialNumToRender={20}
     />
 ));

src/components/InvertedFlatList/index.js

@@ -61,7 +61,6 @@ class InvertedFlatList extends React.Component {
                 {...this.props}
                 ref={el => this.list = el}
                 shouldMeasureItems
-                initialNumToRender={25}
             />
         );
     }

src/components/Text.js

@@ -60,7 +60,7 @@ const Text = React.forwardRef(({
     };
 
     if (componentStyle.fontSize === variables.fontSizeNormal) {
-        componentStyle.lineHeight = 20;
+        componentStyle.lineHeight = variables.fontSizeNormalHeight;
     }
 
     return (

src/pages/home/report/ReportActionsView.js

@@ -36,6 +36,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFocusManager';
 import {contextMenuRef} from './ContextMenu/ReportActionContextMenu';
 import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionContextMenu';
+import variables from '../../../styles/variables';
 
 const propTypes = {
     /** The ID of the report actions will be created for */
@@ -258,6 +259,20 @@ class ReportActionsView extends React.Component {
         });
     }
 
+    /**
+     * Calculates the ideal number of report actions to render in the first render, based on the screen height and on
+     * the height of the smallest report action possible.
+     * @return {Number}
+     */
+    calculateInitialNumToRender() {
+        const minimumReportActionHeight = styles.chatItem.paddingTop + styles.chatItem.paddingBottom
+            + variables.fontSizeNormalHeight;
+        const availableHeight = this.props.windowHeight
+            - (styles.chatItemCompose.minHeight + variables.contentHeaderHeight);
+        return Math.ceil(availableHeight / minimumReportActionHeight);
+    }
+
+
     /**
      * Updates and sorts the report actions by sequence number
      *
@@ -420,6 +435,7 @@ class ReportActionsView extends React.Component {
                     contentContainerStyle={styles.chatContentScrollView}
                     keyExtractor={this.keyExtractor}
                     initialRowHeight={32}
+                    initialNumToRender={this.calculateInitialNumToRender()}
                     onEndReached={this.loadMoreChats}
                     onEndReachedThreshold={0.75}
                     ListFooterComponent={this.state.isLoadingMoreChats