diff --git a/src/libs/ReportScrollManager/index.ios.js b/src/libs/ReportScrollManager/index.ios.js new file mode 100644 index 000000000000..a5b01dfa0e8c --- /dev/null +++ b/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, +}; diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js index 748346f8e5ce..085b8052f4ad 100644 --- a/src/libs/ReportScrollManager/index.js +++ b/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, }; diff --git a/src/libs/ReportScrollManager/index.native.js b/src/libs/ReportScrollManager/index.native.js index 27f2feab1434..5b6795643801 100644 --- a/src/libs/ReportScrollManager/index.native.js +++ b/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, }; diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 38d19864ea5a..beac1a849437 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/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}