[CP Staging] Fix - 'Expense - Report RHP re-renders every time clicking Create expense'

src/components/TabSelector/TabSelectorContext.tsx

@@ -1,14 +1,13 @@
 import React, {createContext, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
-import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView as RNScrollView, View} from 'react-native';
+import type {LayoutChangeEvent, NativeScrollEvent, NativeSyntheticEvent, ScrollView as RNScrollView} from 'react-native';
 import scrollToTabUtil from './scrollToTab';
 
 type TabSelectorContextValue = {
     containerRef: React.RefObject<RNScrollView | null>;
     onContainerLayout: (event: LayoutChangeEvent) => void;
     onContainerScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     scrollToTab: (tabKey: string) => void;
-    registerTab: (tabKey: string, ref: HTMLDivElement | View | null) => void;
     onTabLayout: (tabKey: string, event: LayoutChangeEvent) => void;
 };
 
@@ -22,7 +21,6 @@ const defaultValue: TabSelectorContextValue = {
     onContainerLayout: () => {},
     onContainerScroll: () => {},
     scrollToTab: () => {},
-    registerTab: () => {},
     onTabLayout: () => {},
 };
 
@@ -31,33 +29,36 @@ const TabSelectorContext = createContext<TabSelectorContextValue>(defaultValue);
 function TabSelectorContextProvider({children, activeTabKey}: TabSelectorContextProviderProps) {
     const containerRef = useRef<RNScrollView>(null);
     const containerLayoutRef = useRef<{x: number; width: number}>({x: 0, width: 0});
-    const tabsRef = useRef<Record<string, {ref: HTMLDivElement | View | null; width: number; x: number}>>({});
+    const tabsRef = useRef<Record<string, {width: number; x: number}>>({});
 
     const onContainerLayout = (event: LayoutChangeEvent) => {
         const width = event.nativeEvent.layout.width;
         containerLayoutRef.current.width = width;
-    };
 
-    const onContainerScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        const x = event.nativeEvent.contentOffset.x;
-        containerLayoutRef.current.x = x;
-    };
+        const tabData = tabsRef.current[activeTabKey];
 
-    const registerTab = (tabKey: string, ref: HTMLDivElement | View | null) => {
-        if (ref === null) {
+        if (!tabData) {
             return;
         }
 
-        tabsRef.current[tabKey] = {...tabsRef.current[tabKey], ref};
+        const {x: tabX, width: tabWidth} = tabData;
+
+        if (tabWidth) {
+            scrollToTabUtil({tabX, tabWidth, containerRef, containerWidth: containerLayoutRef.current.width, containerX: containerLayoutRef.current.x, animated: false});
+        }
+    };
+
+    const onContainerScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const x = event.nativeEvent.contentOffset.x;
+        containerLayoutRef.current.x = x;
     };
 
     const onTabLayout = (tabKey: string, event: LayoutChangeEvent) => {
         const {x, width} = event.nativeEvent.layout;
         tabsRef.current[tabKey] = {...tabsRef.current[tabKey], x, width};
 
-        if (tabKey === activeTabKey) {
-            const {ref: tabRef} = tabsRef.current[tabKey];
-            scrollToTabUtil({tabX: x, tabWidth: width, tabRef, containerRef, containerWidth: containerLayoutRef.current.width, containerX: containerLayoutRef.current.x, animated: false});
+        if (tabKey === activeTabKey && containerLayoutRef.current.width !== 0) {
+            scrollToTabUtil({tabX: x, tabWidth: width, containerRef, containerWidth: containerLayoutRef.current.width, containerX: containerLayoutRef.current.x, animated: false});
         }
     };
 
@@ -68,16 +69,15 @@ function TabSelectorContextProvider({children, activeTabKey}: TabSelectorContext
             return;
         }
 
-        const {x: tabX, width: tabWidth, ref: tabRef} = tabData;
+        const {x: tabX, width: tabWidth} = tabData;
 
-        scrollToTabUtil({tabX, tabWidth, tabRef, containerRef, containerWidth: containerLayoutRef.current.width, containerX: containerLayoutRef.current.x});
+        scrollToTabUtil({tabX, tabWidth, containerRef, containerWidth: containerLayoutRef.current.width, containerX: containerLayoutRef.current.x});
     };
 
     // React Compiler auto-memoization
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const contextValue = {
         containerRef,
-        registerTab,
         onTabLayout,
         onContainerLayout,
         onContainerScroll,

src/components/TabSelector/TabSelectorItem.tsx

@@ -1,7 +1,6 @@
 import React, {useContext, useState} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import {Animated} from 'react-native';
-import type {View} from 'react-native';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
@@ -37,13 +36,12 @@ function TabSelectorItem({
     const [isHovered, setIsHovered] = useState(false);
     const shouldShowEducationalTooltip = shouldShowProductTrainingTooltip && isActive;
 
-    const {onTabLayout, registerTab, scrollToTab} = useContext(TabSelectorContext);
+    const {onTabLayout, scrollToTab} = useContext(TabSelectorContext);
 
     const accessibilityState = {selected: isActive};
 
     const children = (
         <AnimatedPressableWithFeedback
-            ref={(ref: HTMLDivElement | View | null) => registerTab(tabKey, ref)}
             accessibilityLabel={title}
             accessibilityState={accessibilityState}
             accessibilityRole={CONST.ROLE.TAB}

src/components/TabSelector/scrollToTab/index.ts

@@ -1,11 +1,25 @@
+import variables from '@styles/variables';
 import type {ScrollToTabProps} from './types';
 
-function scrollToTab({tabRef, animated = true}: ScrollToTabProps) {
-    if (!tabRef || !('scrollIntoView' in tabRef)) {
+function scrollToTab({containerX, tabX, tabWidth, animated = true, containerRef, containerWidth}: ScrollToTabProps) {
+    if (!containerRef.current) {
         return;
     }
 
-    tabRef.scrollIntoView({block: 'nearest', behavior: animated ? 'smooth' : 'instant'});
+    const isTabLeftSideCut = containerX > tabX;
+    const isTabRightSideCut = tabX + tabWidth >= containerX + containerWidth - variables.tabSelectorScrollMarginInline;
+
+    if (!isTabLeftSideCut && !isTabRightSideCut) {
+        return;
+    }
+
+    if (isTabRightSideCut) {
+        const tabCutLengthOnRight = tabX + tabWidth - (containerWidth + containerX);
+        containerRef.current.scrollTo({x: containerX + tabCutLengthOnRight + variables.tabSelectorScrollMarginInline, animated});
+        return;
+    }
+
+    containerRef.current.scrollTo({x: tabX - variables.tabSelectorScrollMarginInline, animated});
 }
 
 export default scrollToTab;

src/components/TabSelector/scrollToTab/types.ts

@@ -1,9 +1,8 @@
 // eslint-disable-next-line no-restricted-imports
-import type {ScrollView as RNScrollView, View} from 'react-native';
+import type {ScrollView as RNScrollView} from 'react-native';
 
 type ScrollToTabProps = {
     animated?: boolean;
-    tabRef: HTMLDivElement | View | null;
     containerRef: React.RefObject<RNScrollView | null>;
     containerX: number;
     containerWidth: number;