From ed56eac218a35b1b86748dcf9104672c507b1353 Mon Sep 17 00:00:00 2001 From: Gez Quinn Date: Thu, 19 Dec 2024 12:51:59 +0000 Subject: [PATCH] fix: horizontal scrolling back to 0 on load For TabViews where scrollEnabled is set to true and a tab that is off-screen is selected, if that tab has async content, the horizontal scroll position of the tab bar was resetting to the start once the content was loaded. Just added a check to only update the layout if we don't already have a layout for the selected tab --- src/MaterialTabBar/TabBar.tsx | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/MaterialTabBar/TabBar.tsx b/src/MaterialTabBar/TabBar.tsx index 60de38e..aaa0b3c 100644 --- a/src/MaterialTabBar/TabBar.tsx +++ b/src/MaterialTabBar/TabBar.tsx @@ -100,19 +100,22 @@ const MaterialTabBar = ({ if (!event.nativeEvent?.layout) return const { width, x } = event.nativeEvent.layout - itemLayoutGathering.current.set(name, { - width, - x, - }) - - // pick out the layouts for the tabs we know about (in case they changed dynamically) - const layout = Array.from(itemLayoutGathering.current.entries()) - .filter(([tabName]) => tabNames.includes(tabName)) - .map(([, layout]) => layout) - .sort((a, b) => a.x - b.x) - - if (layout.length === tabNames.length) { - setItemsLayout(layout) + // Only update if we don't already have a layout for this tab + if (!itemLayoutGathering.current.has(name)) { + itemLayoutGathering.current.set(name, { + width, + x, + }) + + // pick out the layouts for the tabs we know about (in case they changed dynamically) + const layout = Array.from(itemLayoutGathering.current.entries()) + .filter(([tabName]) => tabNames.includes(tabName)) + .map(([, layout]) => layout) + .sort((a, b) => a.x - b.x) + + if (layout.length === tabNames.length) { + setItemsLayout(layout) + } } } },