refactor: simplify RTL handling in tab controller components (#3456)

* refactor: simplify RTL handling in tab controller components * Move to FIX_RTL const --------- Co-authored-by: M-i-k-e-l <[email protected]>
wix · Dec 12, 2024 · 8e681fe · 8e681fe
1 parent 54a4b0c
commit 8e681fe
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/tabController/PageCarousel.tsx b/src/components/tabController/PageCarousel.tsx
@@ -10,7 +10,7 @@ import Reanimated, {
 } from 'react-native-reanimated';
 import {Constants} from '../../commons/new';
 
-const FIX_RTL = Constants.isRTL && Constants.isAndroid;
+const FIX_RTL = Constants.isRTL;
 
 /**
  * @description: TabController's Page Carousel

diff --git a/src/components/tabController/TabBar.tsx b/src/components/tabController/TabBar.tsx
@@ -18,7 +18,6 @@ import {FaderProps} from '../fader';
 import useScrollToItem from './useScrollToItem';
 import {useDidUpdate} from 'hooks';
 
-const FIX_RTL = Constants.isRTL && Constants.isAndroid;
 const DEFAULT_HEIGHT = 48;
 
 const DEFAULT_LABEL_STYLE = {
@@ -187,7 +186,7 @@ const TabBar = (props: Props) => {
     // @ts-expect-error TODO: typing bug
     scrollViewRef: tabBar,
     itemsCount,
-    selectedIndex: FIX_RTL ? itemsCount - currentPage.value - 1 : currentPage.value,
+    selectedIndex: currentPage.value,
     containerWidth,
     offsetType: centerSelected ? useScrollToItem.offsetType.CENTER : useScrollToItem.offsetType.DYNAMIC
   });

diff --git a/src/components/tabController/useScrollToItem.ts b/src/components/tabController/useScrollToItem.ts
@@ -3,6 +3,9 @@ import {useState, useCallback, useEffect, useRef, RefObject} from 'react';
 import {LayoutChangeEvent} from 'react-native';
 import {useSharedValue} from 'react-native-reanimated';
 import {useScrollTo, ScrollToSupportedViews, ScrollToResultProps} from 'hooks';
+import {Constants} from '../../commons/new';
+
+const FIX_RTL = Constants.isRTL && Constants.isIOS;
 
 export enum OffsetType {
   CENTER = 'CENTER',
@@ -177,12 +180,13 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
 
   const focusIndex = useCallback((index: number, animated = true) => {
     if (index >= 0 && offsets.CENTER.length > index) {
+      const rtlIndex = FIX_RTL ? itemsCount - index - 1 : index;
       if (offsetType !== OffsetType.DYNAMIC) {
-        scrollTo(offsets[offsetType][index], animated);
+        scrollTo(offsets[offsetType][rtlIndex], animated);
       } else {
         const movingLeft = index < currentIndex.current;
-        currentIndex.current = index;
-        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][index] : offsets[OffsetType.LEFT][index], animated);
+        currentIndex.current = rtlIndex;
+        scrollTo(movingLeft ? offsets[OffsetType.RIGHT][rtlIndex] : offsets[OffsetType.LEFT][rtlIndex], animated);
       }
     }
   },