diff --git a/patches/react-native-web/details.md b/patches/react-native-web/details.md index 6629cf89a047..8a66ec74866e 100644 --- a/patches/react-native-web/details.md +++ b/patches/react-native-web/details.md @@ -129,4 +129,16 @@ - Upstream PR/issue: https://github.com/necolas/react-native-web/pull/2800 - E/App issue: https://github.com/Expensify/App/issues/65820 -- PR introducing patch: https://github.com/Expensify/App/pull/68834 \ No newline at end of file +- PR introducing patch: https://github.com/Expensify/App/pull/68834 + +### [react-native-web+0.20.0+012+fix-overscroll-recoil.patch](react-native-web+0.20.0+012+fix-overscroll-recoil.patch) + +- Reason: + + ``` + Fixes the perceived overscroll recoil or rubber band effect at the edges of inverted flatlists. + ``` + +- Upstream PR/issue: This was a patch on top of patches 008 and 009 of react-native-web. +- E/App issue: https://github.com/Expensify/App/issues/66821 +- PR introducing patch: https://github.com/Expensify/App/pull/68895 diff --git a/patches/react-native-web/react-native-web+0.20.0+012+fix-overscroll-recoil.patch b/patches/react-native-web/react-native-web+0.20.0+012+fix-overscroll-recoil.patch new file mode 100644 index 000000000000..7a2029bc7e04 --- /dev/null +++ b/patches/react-native-web/react-native-web+0.20.0+012+fix-overscroll-recoil.patch @@ -0,0 +1,21 @@ +diff --git a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js +index 165bf95..e80c5b1 100644 +--- a/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js ++++ b/node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js +@@ -719,6 +719,16 @@ class VirtualizedList extends StateSafePureComponent { + if (this.props.inverted && this._scrollRef && this._scrollRef.getScrollableNode) { + const node = this._scrollRef.getScrollableNode(); + ++ const scrollMetricsOffset = this._scrollMetrics.offset; ++ const contentLength = this._scrollMetrics.contentLength; ++ const visibleLength = this._scrollMetrics.visibleLength ++ const isOnScrollLimit = scrollMetricsOffset <= 0 || Math.ceil(scrollMetricsOffset) >= contentLength - visibleLength; ++ ++ // Avoid recoil/rubber band effect on overscroll ++ if (isOnScrollLimit) { ++ ev.preventDefault(); ++ } ++ + if (isHorizontal) { + if (Math.abs(deltaX) > Math.abs(deltaY)) { + ev.target.scrollLeft += targetDelta;