Improve the scrolling

Fixes #46 (maybe)
Expensify · Aug 11, 2020 · 07e235d · 07e235d
1 parent 6925281
commit 07e235d
Showing 1 changed file with 16 additions and 19 deletions.
diff --git a/src/page/HomePage/Report/ReportHistoryView.js b/src/page/HomePage/Report/ReportHistoryView.js
@@ -18,18 +18,11 @@ class ReportHistoryView extends React.Component {
     constructor(props) {
         super(props);
 
+        // Keeps track of the history length so that when length changes, the list is scrolled to the bottom
         this.previousReportHistoryLength = 0;
 
         this.recordlastReadActionID = _.debounce(this.recordlastReadActionID.bind(this), 1000, true);
-    }
-
-    componentDidUpdate(prevProps) {
-        if (prevProps.reportID !== this.props.reportID) {
-            this.previousReportHistoryLength = 0;
-            if (this.historyItemList) {
-                this.historyItemList.scrollToEnd({animated: false});
-            }
-        }
+        this.scrollToBottomWhenListSizeChanges = this.scrollToBottomWhenListSizeChanges.bind(this);
     }
 
     /**
@@ -107,25 +100,29 @@ class ReportHistoryView extends React.Component {
             });
     }
 
+    scrollToBottomWhenListSizeChanges(el) {
+        if (el) {
+            const filteredHistory = this.getFilteredReportHistory();
+            console.log(this.previousReportHistoryLength, filteredHistory.length);
+            if (this.previousReportHistoryLength < filteredHistory.length) {
+                console.log('scroll')
+                el.scrollToEnd({animated: false});
+            }
+
+            this.previousReportHistoryLength = filteredHistory.length;
+        }
+    }
+
     render() {
         const filteredHistory = this.getFilteredReportHistory();
 
         if (filteredHistory.length === 0) {
             return <Text>Be the first person to comment!</Text>;
         }
 
-        console.log(this.previousReportHistoryLength, filteredHistory.length);
-        if (this.previousReportHistoryLength < filteredHistory.length) {
-            if (this.historyItemList) {
-                console.log('scroll')
-                this.historyItemList.scrollToEnd({animated: false});
-            }
-        }
-
-        this.previousReportHistoryLength = filteredHistory.length;
 
         return (
-            <ScrollView ref={el => this.historyItemList = el}>
+            <ScrollView ref={this.scrollToBottomWhenListSizeChanges}>
                 {_.map(filteredHistory, (item, index) => (
                     <ReportHistoryItem
                         key={item.sequenceNumber}