Fix/page carousel RTL android (#1612)

* Centralize the set of current index

* Fix redundant scrolls when index changes

* Remove carouselOffset from context and other irrelevant parts

* Fix offset issue on Android RTL

* Fix initial page on TabController PageCarousel

Author: ethanshar

demo/src/screens/componentScreens/TabControllerScreen/index.tsx

@@ -14,6 +14,7 @@ interface State {
   asCarousel: boolean;
   centerSelected: boolean;
   fewItems: boolean;
+  initialIndex: number;
   selectedIndex: number;
   key: string | number;
   items: TabControllerItemProps[];
@@ -26,6 +27,7 @@ class TabControllerScreen extends Component<{}, State> {
       asCarousel: true,
       centerSelected: false,
       fewItems: false,
+      initialIndex: 0,
       selectedIndex: 0,
       key: Date.now(),
       items: []
@@ -146,14 +148,14 @@ class TabControllerScreen extends Component<{}, State> {
   }
 
   render() {
-    const {key, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
+    const {key, initialIndex, /* selectedIndex, */ asCarousel, centerSelected, fewItems, items} = this.state;
     return (
       <View flex bg-grey70>
         <TabController
           key={key}
           asCarousel={asCarousel}
           // selectedIndex={selectedIndex}
-          initialIndex={0}
+          initialIndex={initialIndex}
           onChangeIndex={this.onChangeIndex}
           items={items}
         >

generatedTypes/src/components/tabController/TabBarContext.d.ts

@@ -4,14 +4,15 @@ interface TabControllerContext {
     initialIndex?: number;
     selectedIndex?: number;
     items?: any[];
+    itemsCount: number;
     asCarousel?: boolean;
     containerWidth: number;
     pageWidth: number;
     /** static page index */
     currentPage: Reanimated.SharedValue<number>;
     /** transition page index (can be a fraction when transitioning between pages) */
     targetPage: Reanimated.SharedValue<number>;
-    carouselOffset: Reanimated.SharedValue<number>;
+    setCurrentIndex: (index: number) => void;
 }
 declare const TabBarContext: React.Context<TabControllerContext>;
 export default TabBarContext;

src/components/tabController/PageCarousel.tsx

@@ -5,9 +5,11 @@ import Reanimated, {
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedScrollHandler,
-  useSharedValue,
-  withTiming
+  useSharedValue
 } from 'react-native-reanimated';
+import {Constants} from 'helpers';
+
+const FIX_RTL = Constants.isRTL && Constants.isAndroid;
 
 /**
  * @description: TabController's Page Carousel
@@ -17,46 +19,70 @@ import Reanimated, {
 function PageCarousel({...props}) {
   const carousel = useAnimatedRef<Reanimated.ScrollView>();
   const {
+    itemsCount,
     currentPage,
     targetPage,
-    selectedIndex = 0,
     pageWidth,
-    carouselOffset
+    // carouselOffset,
+    setCurrentIndex
   } = useContext(TabBarContext);
-  const contentOffset = useMemo(() => ({x: selectedIndex * pageWidth, y: 0}), [selectedIndex, pageWidth]);
-  const wasScrolledByPress = useSharedValue(false);
+  const initialOffset = useMemo(() => ({x: currentPage.value * pageWidth, y: 0}), []);
+  const indexChangeReason = useSharedValue<'byScroll' | 'byPress' | undefined>(undefined);
+
+  const scrollToInitial = useCallback(() => {
+    if (Constants.isAndroid && currentPage.value) {
+      scrollToItem(currentPage.value);
+    }
+  }, []);
+
+  const calcOffset = useCallback(offset => {
+    'worklet';
+    return FIX_RTL ? pageWidth * (itemsCount - 1) - offset : offset;
+  },
+  [pageWidth, itemsCount]);
 
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: e => {
-      carouselOffset.value = e.contentOffset.x;
-      const newIndex = e.contentOffset.x / pageWidth;
+      // carouselOffset.value = e.contentOffset.x;
+      const xOffset = calcOffset(e.contentOffset.x);
+      const newIndex = xOffset / pageWidth;
 
-      if (wasScrolledByPress.value) {
+      if (indexChangeReason.value === 'byPress') {
+        // Scroll was immediate and not by gesture
         /* Round is for android when offset value has fraction */
-        targetPage.value = withTiming(Math.round(newIndex));
-        wasScrolledByPress.value = false;
+        // targetPage.value = withTiming(Math.round(newIndex));
+
+        indexChangeReason.value = undefined;
       } else {
         targetPage.value = newIndex;
       }
     },
     onMomentumEnd: e => {
-      const newPage = Math.round(e.contentOffset.x / pageWidth);
-      currentPage.value = newPage;
+      const xOffset = calcOffset(e.contentOffset.x);
+      const newPage = Math.round(xOffset / pageWidth);
+      indexChangeReason.value = 'byScroll';
+      setCurrentIndex(newPage);
     }
   });
 
   const scrollToItem = useCallback(index => {
-    wasScrolledByPress.value = true;
+    if (indexChangeReason.value === 'byScroll') {
+      indexChangeReason.value = undefined;
+    } else {
+      indexChangeReason.value = 'byPress';
+    }
+
+    const actualIndex = FIX_RTL ? itemsCount - index - 1 : index;
     // @ts-expect-error
-    carousel.current?.scrollTo({x: index * pageWidth, animated: false});
+    carousel.current?.scrollTo({x: actualIndex * pageWidth, animated: false});
   },
-  [pageWidth]);
+  [pageWidth, itemsCount]);
 
   useAnimatedReaction(() => {
     return currentPage.value;
   },
   (currIndex, prevIndex) => {
-    if (currIndex !== prevIndex) {
+    if (prevIndex !== null && currIndex !== prevIndex) {
       runOnJS(scrollToItem)(currIndex);
     }
   });
@@ -75,7 +101,8 @@ function PageCarousel({...props}) {
       showsHorizontalScrollIndicator={false}
       onScroll={scrollHandler}
       scrollEventThrottle={16}
-      contentOffset={contentOffset} // iOS only
+      contentOffset={initialOffset} // iOS only
+      onLayout={scrollToInitial} // Android only
     />
   );
 }

src/components/tabController/TabBar.tsx

@@ -188,7 +188,7 @@ const TabBar = (props: Props) => {
     return Math.round(currentPage.value);
   },
   (currIndex, prevIndex) => {
-    if (currIndex !== prevIndex) {
+    if (prevIndex !== null && currIndex !== prevIndex) {
       runOnJS(focusIndex)(currIndex);
     }
   });

src/components/tabController/TabBarContext.ts

@@ -6,14 +6,16 @@ interface TabControllerContext {
   // DEPRECATED: use initialIndex instead
   selectedIndex?: number;
   items?: any[];
+  itemsCount: number;
   asCarousel?: boolean;
   containerWidth: number;
   pageWidth: number;
   /** static page index */
   currentPage: Reanimated.SharedValue<number>;
   /** transition page index (can be a fraction when transitioning between pages) */
   targetPage: Reanimated.SharedValue<number>;
-  carouselOffset: Reanimated.SharedValue<number>;
+  /* carouselOffset: Reanimated.SharedValue<number>; */
+  setCurrentIndex: (index: number) => void;
 }
 
 // @ts-expect-error

src/components/tabController/TabBarItem.tsx

@@ -124,7 +124,7 @@ export default function TabBarItem({
   style,
   ...props
 }: Props) {
-  const {currentPage} = useContext(TabBarContext);
+  const {currentPage, setCurrentIndex} = useContext(TabBarContext);
   const itemRef = useRef();
   const itemWidth = useRef(props.width);
   // JSON.parse(JSON.stringify is due to an issue with reanimated
@@ -140,7 +140,7 @@ export default function TabBarItem({
 
   const onPress = useCallback(() => {
     if (!ignore) {
-      currentPage.value = index;
+      setCurrentIndex(index);
     }
 
     props.onPress?.(index);

src/components/tabController/index.tsx

@@ -1,5 +1,5 @@
 // TODO: support commented props
-import React, {PropsWithChildren, useMemo, useEffect, useRef, useState} from 'react';
+import React, {PropsWithChildren, useMemo, useEffect, useRef, useState, useCallback} from 'react';
 import _ from 'lodash';
 import {useAnimatedReaction, useSharedValue, withTiming, runOnJS} from 'react-native-reanimated';
 import {Constants} from '../../helpers';
@@ -93,7 +93,12 @@ function TabController({
   const currentPage = useSharedValue(initialIndex);
   /* targetPage - transitioned page index (can be a fraction when transitioning between pages) */
   const targetPage = useSharedValue(initialIndex);
-  const carouselOffset = useSharedValue(initialIndex * Math.round(pageWidth));
+  // const carouselOffset = useSharedValue(initialIndex * Math.round(pageWidth));
+
+  const setCurrentIndex = useCallback(index => {
+    'worklet';
+    currentPage.value = index;
+  }, []);
 
   useEffect(() => {
     if (!_.isUndefined(selectedIndex)) {
@@ -102,7 +107,7 @@ function TabController({
   }, [selectedIndex]);
 
   useEffect(() => {
-    currentPage.value = initialIndex;
+    setCurrentIndex(initialIndex);
   }, [initialIndex]);
 
   useAnimatedReaction(() => {
@@ -124,13 +129,15 @@ function TabController({
       /* Items */
       items,
       ignoredItems,
+      itemsCount: items.length - ignoredItems.length,
       /* Animated Values */
       targetPage,
       currentPage,
-      carouselOffset,
+      // carouselOffset,
       containerWidth: screenWidth,
       /* Callbacks */
-      onChangeIndex
+      onChangeIndex,
+      setCurrentIndex
     };
   }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
 

src/components/tabController/useScrollToItem.ts

@@ -184,7 +184,7 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
 
   useEffect(() => {
     if (!_.isUndefined(selectedIndex)) {
-      focusIndex(selectedIndex);
+      focusIndex(selectedIndex, false);
     }
   }, [selectedIndex, focusIndex]);