From 8af948e1d0236b587ca2690727034c3446172939 Mon Sep 17 00:00:00 2001 From: Rafael Date: Mon, 2 Aug 2021 14:56:40 -0300 Subject: [PATCH 1/3] helper function, changes to native --- src/components/InvertedFlatList/index.android.js | 13 +++++++++++-- src/components/InvertedFlatList/index.ios.js | 13 +++++++++++-- src/components/InvertedFlatList/index.js | 5 ++++- src/components/Text.js | 2 +- src/pages/home/report/ReportActionsView.js | 16 ++++++++++++++++ 5 files changed, 43 insertions(+), 6 deletions(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index 8f9062e570b..409f3be9200 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -1,12 +1,18 @@ 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) => ( ( shouldRemoveClippedSubviews /> )); + +InvertedFlatList.propTypes = propTypes; +export default InvertedFlatList; diff --git a/src/components/InvertedFlatList/index.ios.js b/src/components/InvertedFlatList/index.ios.js index 9a9ae537e0c..ffaa2e1554b 100644 --- a/src/components/InvertedFlatList/index.ios.js +++ b/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) => ( )); + +InvertedFlatList.propTypes = propTypes; +export default InvertedFlatList; diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index 3dab8062b6a..4862d4ddaae 100644 --- a/src/components/InvertedFlatList/index.js +++ b/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} /> ); } 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..615e17272c2 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 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 From 979792732f335e5ea8f0460ffe9223ebcd97bfe5 Mon Sep 17 00:00:00 2001 From: Rafael Date: Mon, 2 Aug 2021 17:37:42 -0300 Subject: [PATCH 2/3] improvements --- src/components/InvertedFlatList/index.ios.js | 17 ++++++----------- src/components/InvertedFlatList/index.js | 4 ---- src/pages/home/report/ReportActionsView.js | 8 ++++---- 3 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/components/InvertedFlatList/index.ios.js b/src/components/InvertedFlatList/index.ios.js index ffaa2e1554b..4ecfe10415b 100644 --- a/src/components/InvertedFlatList/index.ios.js +++ b/src/components/InvertedFlatList/index.ios.js @@ -1,20 +1,15 @@ import React, {forwardRef} from 'react'; -import PropTypes from 'prop-types'; import BaseInvertedFlatList from './BaseInvertedFlatList'; -const propTypes = { - /** The initial number of items to render */ - initialNumToRender: PropTypes.number.isRequired, -}; - -const InvertedFlatList = forwardRef((props, ref) => ( +export default forwardRef((props, ref) => ( )); - -InvertedFlatList.propTypes = propTypes; -export default InvertedFlatList; diff --git a/src/components/InvertedFlatList/index.js b/src/components/InvertedFlatList/index.js index 4862d4ddaae..a2dd20b2c99 100644 --- a/src/components/InvertedFlatList/index.js +++ b/src/components/InvertedFlatList/index.js @@ -11,9 +11,6 @@ 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 @@ -64,7 +61,6 @@ class InvertedFlatList extends React.Component { {...this.props} ref={el => this.list = el} shouldMeasureItems - initialNumToRender={this.props.initialNumToRender} /> ); } diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 615e17272c2..29a39f9881c 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -260,16 +260,16 @@ 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. + * 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 smallestReport = styles.chatItem.paddingTop + styles.chatItem.paddingBottom + const minimumReportActionHeight = styles.chatItem.paddingTop + styles.chatItem.paddingBottom + variables.fontSizeNormalHeight; const availableHeight = this.props.windowHeight - (styles.chatItemCompose.minHeight + variables.contentHeaderHeight); - return Math.ceil(availableHeight / smallestReport); + return Math.ceil(availableHeight / minimumReportActionHeight); } From 9905d36b6315b6d3bf985e909e17410908d419a0 Mon Sep 17 00:00:00 2001 From: Rafael Date: Mon, 2 Aug 2021 19:34:00 -0300 Subject: [PATCH 3/3] revert some changes, removes hardcoded prop --- src/components/InvertedFlatList/index.android.js | 12 +----------- src/components/InvertedFlatList/index.ios.js | 5 ----- 2 files changed, 1 insertion(+), 16 deletions(-) diff --git a/src/components/InvertedFlatList/index.android.js b/src/components/InvertedFlatList/index.android.js index 409f3be9200..4ecfe10415b 100644 --- a/src/components/InvertedFlatList/index.android.js +++ b/src/components/InvertedFlatList/index.android.js @@ -1,18 +1,11 @@ import React, {forwardRef} from 'react'; -import PropTypes from 'prop-types'; import BaseInvertedFlatList from './BaseInvertedFlatList'; -const propTypes = { - /** The initial number of items to render */ - initialNumToRender: PropTypes.number.isRequired, -}; - -const InvertedFlatList = forwardRef((props, ref) => ( +export default forwardRef((props, ref) => ( ( shouldRemoveClippedSubviews /> )); - -InvertedFlatList.propTypes = propTypes; -export default InvertedFlatList; diff --git a/src/components/InvertedFlatList/index.ios.js b/src/components/InvertedFlatList/index.ios.js index 4ecfe10415b..e34d2d26028 100644 --- a/src/components/InvertedFlatList/index.ios.js +++ b/src/components/InvertedFlatList/index.ios.js @@ -6,10 +6,5 @@ export default forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading {...props} ref={ref} - - // 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 /> ));