diff --git a/src/components/tabController/PageCarousel.tsx b/src/components/tabController/PageCarousel.tsx index 484f70c57e..6e328e3a9c 100644 --- 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 index adda6923bf..913d8f3ded 100644 --- 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 index ffbd7ab99c..cf697ff9e6 100644 --- 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 = (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); } } },