diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index 8f9062e570b..4ecfe10415b 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/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. diff --git a/src/components/InvertedFlatList/index.ios.js b/src/components/InvertedFlatList/index.ios.js index 9a9ae537e0c..e34d2d26028 100644 --- a/src/components/InvertedFlatList/index.ios.js +++ b/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} /> )); diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index 3dab8062b6a..a2dd20b2c99 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -61,7 +61,6 @@ class InvertedFlatList extends React.Component { {...this.props} ref={el => this.list = el} shouldMeasureItems - initialNumToRender={25} /> ); } diff --git a/src/components/Text.js b/src/components/Text.js index 16f0836da08..090e60fef72 100644 --- a/src/components/Text.js +++ b/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 ( diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 7f5f73b2058..29a39f9881c 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/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