Scroll To Last Index After Layout Change Of List

src/libs/ReportScrollManager/index.ios.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+// 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.
+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
+ * See https://github.com/Expensify/App/issues/15303 for more context
+ */
+function scrollToLastIndex() {
+    if (!flatListRef.current) {
+        return;
+    }
+    if (lastIndex === undefined) {
+        return;
+    }
+
+    flatListRef.current.scrollToIndex(lastIndex);
+    lastIndex = undefined;
+}
+
+/**
+ * Scroll to the bottom of the flatlist.
+ *
+ */
+function scrollToBottom() {
+    if (!flatListRef.current) {
+        return;
+    }
+
+    flatListRef.current.scrollToOffset({animated: false, offset: 0});
+    lastIndex = 0;
+}
+
+export {
+    flatListRef,
+    scrollToIndex,
+    scrollToBottom,
+    scrollToLastIndex,
+};

src/libs/ReportScrollManager/index.js

@@ -19,6 +19,11 @@ function scrollToIndex(index, isEditing) {
     flatListRef.current.scrollToIndex(index);
 }
 
+/**
+ * Noop as this is only needed on iOS
+ */
+function scrollToLastIndex() {}
+
 /**
  * Scroll to the bottom of the flatlist.
  *
@@ -35,4 +40,5 @@ export {
     flatListRef,
     scrollToIndex,
     scrollToBottom,
+    scrollToLastIndex,
 };

src/libs/ReportScrollManager/index.native.js

@@ -13,6 +13,11 @@ function scrollToIndex(index) {
     flatListRef.current.scrollToIndex(index);
 }
 
+/**
+ * Noop as this is only needed on iOS
+ */
+function scrollToLastIndex() {}
+
 /**
  * Scroll to the bottom of the flatlist.
  *
@@ -29,4 +34,5 @@ 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}