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

src/components/InvertedFlatList/index.android.js

@@ -1,16 +1,25 @@
 import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 
-export default forwardRef((props, ref) => (
+const propTypes = {
+    /** The initial number of items to render */
+    initialNumToRender: PropTypes.number.isRequired,
+};
+
+const InvertedFlatList = forwardRef((props, ref) => (
     <BaseInvertedFlatList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
-        initialNumToRender={20}
+        initialNumToRender={props.initialNumToRender}
 
         // 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.
         // eslint-disable-next-line react/jsx-props-no-multi-spaces
         shouldRemoveClippedSubviews
     />
 ));
+
+InvertedFlatList.propTypes = propTypes;
+export default InvertedFlatList;

src/components/InvertedFlatList/index.ios.js

@@ -1,11 +1,20 @@
 import React, {forwardRef} from 'react';
+import PropTypes from 'prop-types';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 
-export default forwardRef((props, ref) => (
+const propTypes = {
+    /** The initial number of items to render */
+    initialNumToRender: PropTypes.number.isRequired,
+};
+
+const InvertedFlatList = forwardRef((props, ref) => (
     <BaseInvertedFlatList
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
         ref={ref}
-        initialNumToRender={20}
+        initialNumToRender={props.initialNumToRender}
     />
 ));
+
+InvertedFlatList.propTypes = propTypes;
+export default InvertedFlatList;

src/components/InvertedFlatList/index.js

@@ -11,6 +11,9 @@ const propTypes = {
     innerRef: PropTypes.shape({
         current: PropTypes.instanceOf(FlatList),
     }).isRequired,
+
+    /** The initial number of items to render */
+    initialNumToRender: PropTypes.number.isRequired,
 };
 
 // This is adapted from https://codesandbox.io/s/react-native-dsyse
@@ -61,7 +64,7 @@ class InvertedFlatList extends React.Component {
                 {...this.props}
                 ref={el => this.list = el}
                 shouldMeasureItems
-                initialNumToRender={25}
+                initialNumToRender={this.props.initialNumToRender}
             />
         );
     }

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 reports to render in the first render, based on the screen height and on
+     * the height of the smallest report possible.
+     * @return {Number}
+     */
+    calculateInitialNumToRender() {
+        const smallestReport = styles.chatItem.paddingTop + styles.chatItem.paddingBottom
+            + variables.fontSizeNormalHeight;
+        const availableHeight = this.props.windowHeight
+            - (styles.chatItemCompose.minHeight + variables.contentHeaderHeight);
+        return Math.ceil(availableHeight / smallestReport);
+    }
+
+
     /**
      * 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