diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js index f8ea7b5d9ed..bf6ebb6b872 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList.js +++ b/src/components/InvertedFlatList/BaseInvertedFlatList.js @@ -93,6 +93,12 @@ class BaseInvertedFlatList extends Component { measureItemLayout(nativeEvent, index) { const computedHeight = nativeEvent.layout.height; + // We've already measured this item so we don't need to + // measure it again. + if (this.sizeMap[index]) { + return; + } + const previousItem = this.sizeMap[index - 1] || {}; // If there is no previousItem this can mean we haven't yet measured @@ -135,7 +141,6 @@ class BaseInvertedFlatList extends Component { {...this.props} ref={this.props.innerRef} renderItem={this.renderItem} - sizeMap={this.sizeMap} // Native platforms do not need to measure items and work fine without this. // Web requires that items be measured or else crazy things happen when scrolling. diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js index 8d76af8e444..748346f8e5c 100644 --- a/src/libs/ReportScrollManager/index.js +++ b/src/libs/ReportScrollManager/index.js @@ -1,6 +1,4 @@ import React from 'react'; -import _ from 'underscore'; -import lodashGet from 'lodash/get'; // This ref is created using React.createRef here because this function is used by a component that doesn't have access // to the original ref. @@ -17,17 +15,8 @@ function scrollToIndex(index, isEditing) { if (isEditing) { return; } - const sizeMap = lodashGet(flatListRef, 'current.props.sizeMap'); - const scrollableNode = flatListRef.current.getScrollableNode(); - const clientHeight = lodashGet(scrollableNode, 'clientHeight', 0); - const paddingTop = parseFloat(lodashGet(scrollableNode, 'childNodes[0].style.paddingTop', '0px')); - const sizeArray = _.map(_.values(sizeMap), s => s.length); - const currentOffset = _.reduce(sizeArray.slice(0, (index.index)), (acc, val) => acc + val); - const offset = (currentOffset + paddingTop + (index.viewOffset || 0)) - (clientHeight * (index.viewPosition || 0)); - flatListRef.current.scrollToOffset({ - animated: index.animated, - offset, - }); + + flatListRef.current.scrollToIndex(index); } /** diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index ff8304bcd28..cc7b8b095eb 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -80,7 +80,7 @@ class ReportActionsView extends React.Component { this.toggleFloatingMessageCounter = this.toggleFloatingMessageCounter.bind(this); this.loadMoreChats = this.loadMoreChats.bind(this); this.recordTimeToMeasureItemLayout = this.recordTimeToMeasureItemLayout.bind(this); - this.scrollToUnreadMsgAndMarkReportAsRead = this.scrollToUnreadMsgAndMarkReportAsRead.bind(this); + this.scrollToBottomAndMarkReportAsRead = this.scrollToBottomAndMarkReportAsRead.bind(this); this.openReportIfNecessary = this.openReportIfNecessary.bind(this); } @@ -298,8 +298,8 @@ class ReportActionsView extends React.Component { Report.readOldestAction(this.props.report.reportID, oldestActionSequenceNumber); } - scrollToUnreadMsgAndMarkReportAsRead() { - ReportScrollManager.scrollToIndex({animated: true, index: this.props.report.maxSequenceNumber - this.state.newMarkerSequenceNumber}, false); + scrollToBottomAndMarkReportAsRead() { + ReportScrollManager.scrollToBottom(); Report.readNewestAction(this.props.report.reportID); } @@ -358,7 +358,7 @@ class ReportActionsView extends React.Component { <> 0} - onClick={this.scrollToUnreadMsgAndMarkReportAsRead} + onClick={this.scrollToBottomAndMarkReportAsRead} />