Scroll To Last Index After Layout Change Of List

src/libs/ReportScrollManager/index.js

@@ -19,6 +19,12 @@ function scrollToIndex(index, isEditing) {
     flatListRef.current.scrollToIndex(index);
 }
 
+/**
+ * Scroll to the last saved index on layout change
+ * The is a fallback handler for asyncronius scrolling and layout changes.
+ */
+function scrollToLastIndex() {}
+
 /**
  * Scroll to the bottom of the flatlist.
  *
@@ -35,4 +41,5 @@ export {
     flatListRef,
     scrollToIndex,
     scrollToBottom,
+    scrollToLastIndex,
 };

src/libs/ReportScrollManager/index.native.js

@@ -4,13 +4,33 @@ import React from 'react';
 // to the original ref.
 const flatListRef = React.createRef();
 
+// A reference to the last index required to scroll to, for async layout change handler.
+let lastIndex;
+
 /**
  * Scroll to the provided index.
  *
  * @param {Object} index
  */
 function scrollToIndex(index) {
     flatListRef.current.scrollToIndex(index);
+    lastIndex = index;
+}
+
+/**
+ * Scroll to the last saved index on layout change
+ * The is a fallback handler for asyncronius scrolling and layout changes.
+ */
+function scrollToLastIndex() {
+    if (!flatListRef.current) {
+        return;
+    }
+    if (lastIndex === undefined) {
+        return;
+    }
+
+    flatListRef.current.scrollToIndex(lastIndex);
+    lastIndex = undefined;
 }
 
 /**
@@ -23,10 +43,12 @@ function scrollToBottom() {
     }
 
     flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    lastIndex = 0;
 }
 
 export {
     flatListRef,
     scrollToIndex,
     scrollToBottom,
+    scrollToLastIndex,
 };

src/pages/home/report/ReportActionsList.js

@@ -192,6 +192,7 @@ class ReportActionsList extends React.Component {
                         this.setState({
                             skeletonViewHeight: event.nativeEvent.layout.height,
                         });
+                        ReportScrollManager.scrollToLastIndex();
                         this.props.onLayout(event);
                     }}
                     onScroll={this.props.onScroll}