diff --git a/patches/react-native-tab-view/details.md b/patches/react-native-tab-view/details.md index 45ecaa002197..c6952b53e27b 100644 --- a/patches/react-native-tab-view/details.md +++ b/patches/react-native-tab-view/details.md @@ -45,3 +45,16 @@ ``` - Upstream PR/issue: 🛑 (must merge https://github.com/react-navigation/react-navigation/pull/12627 first) - E/App issue: https://github.com/Expensify/App/issues/83010 + +### [react-native-tab-view+4.3.0+005+fix-pager-scrollleft-91610.patch](react-native-tab-view+4.3.0+005+fix-pager-scrollleft-91610.patch) + +- Reason: + ``` + On web, the pager's overflow:hidden clip container could pick up a stray scrollLeft from the auto-focused + Search input while the RHP was translated wide. The pager positions its pages with a transform and never + with scroll, so this leftover scrollLeft shifted the active per-diem page left and clipped the first column + (e.g. the first letters of country names). This patch pins the pager's scrollLeft to 0 on web. + ``` +- Upstream PR/issue: 🛑 +- E/App issue: https://github.com/Expensify/App/issues/91610 +- PR Introducing Patch: [#97754](https://github.com/Expensify/App/pull/97754) diff --git a/patches/react-native-tab-view/react-native-tab-view+4.3.0+005+fix-pager-scrollleft-91610.patch b/patches/react-native-tab-view/react-native-tab-view+4.3.0+005+fix-pager-scrollleft-91610.patch new file mode 100644 index 000000000000..6ec3f56eec6c --- /dev/null +++ b/patches/react-native-tab-view/react-native-tab-view+4.3.0+005+fix-pager-scrollleft-91610.patch @@ -0,0 +1,40 @@ +diff --git a/node_modules/react-native-tab-view/lib/module/TabView.js b/node_modules/react-native-tab-view/lib/module/TabView.js +index 0000004..0000005 100644 +--- a/node_modules/react-native-tab-view/lib/module/TabView.js ++++ b/node_modules/react-native-tab-view/lib/module/TabView.js +@@ -41,6 +41,27 @@ + height: 0, + ...initialLayout + }); ++ const pagerRef = React.useRef(null); ++ // #91610: the pager positions its pages with a transform, never with scroll. On web the browser can ++ // still scroll this overflow:hidden container horizontally to reveal a focused input while the sheet ++ // is translated wide, leaving a persistent scrollLeft that shifts the active page left and clips its ++ // first column. Pin scrollLeft at 0. ++ React.useEffect(() => { ++ if (Platform.OS !== 'web') { ++ return; ++ } ++ const node = pagerRef.current; ++ if (!node) { ++ return; ++ } ++ const reset = () => { ++ if (node.scrollLeft !== 0) { ++ node.scrollLeft = 0; ++ } ++ }; ++ node.addEventListener('scroll', reset); ++ return () => node.removeEventListener('scroll', reset); ++ }, []); + const jumpToIndex = index => { + if (index !== navigationState.index) { + onIndexChange(index); +@@ -66,6 +87,7 @@ + ...sceneOptions?.[route.key] + }])); + return /*#__PURE__*/_jsx(View, { ++ ref: pagerRef, + onLayout: handleLayout, + style: [styles.pager, style], + children: /*#__PURE__*/_jsx(Pager, {