Fix/carousel android rtl jumps

src/components/carousel/index.tsx

@@ -52,7 +52,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const defaultPageWidth = props.loop || !props.pageWidth ? Constants.screenWidth : props.pageWidth;
     const pageHeight = props.pageHeight ?? Constants.screenHeight;
     this.isAutoScrolled = false;
-    
+
     this.state = {
       containerWidth: undefined,
       // @ts-ignore (defaultProps)
@@ -195,28 +195,30 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   goToPage(pageIndex: number, animated = true) {
-    this.setState({currentPage: this.getCalcIndex(pageIndex)}, () => this.updateOffset(animated));
+    this.setState({currentPage: pageIndex}, () => this.updateOffset(animated));
   }
 
   goToNextPage() {
     const {currentPage} = this.state;
     const pagesCount = presenter.getChildrenLength(this.props);
     const {loop} = this.props;
     let nextPageIndex;
-
     if (loop) {
+      if (currentPage === pagesCount + 1) {
+        this.goToPage(0, false);
+        return;
+      }
       nextPageIndex = currentPage + 1;
     } else {
       nextPageIndex = Math.min(pagesCount - 1, currentPage + 1);
     }
 
     this.goToPage(nextPageIndex, true);
-
-    // in case of a loop, after we advanced right to the cloned first page,
-    // we return silently to the real first page
-    if (loop && currentPage === pagesCount) {
-      this.goToPage(0, false);
-    }
+    // // in case of a loop, after we advanced right to the cloned first page,
+    // // we return silently to the real first page
+    // if (loop && currentPage === pagesCount) {
+    //   this.goToPage(0, false);
+    // }
   }
 
   getCalcIndex(index: number): number {
@@ -239,10 +241,8 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     if (containerWidth) {
       const spacings = pageWidth === containerWidth ? 0 : this.getItemSpacings(this.props);
       const initialBreak = pageWidth - (containerWidth - pageWidth - spacings) / 2;
-      const snapToOffsets = _.times(
-        presenter.getChildrenLength(this.props),
-        index => initialBreak + index * pageWidth + this.getContainerMarginHorizontal()
-      );
+      const snapToOffsets = _.times(presenter.getChildrenLength(this.props),
+        index => initialBreak + index * pageWidth + this.getContainerMarginHorizontal());
       return snapToOffsets;
     }
   };
@@ -355,10 +355,11 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   };
 
   onScrollEvent = Animated.event([
-    {nativeEvent: 
-      {contentOffset: 
-        // @ts-ignore
-        {y: this.props?.animatedScrollOffset?.y, x: this.props?.animatedScrollOffset?.x}
+    {
+      nativeEvent: {
+        contentOffset:
+            // @ts-ignore
+            {y: this.props?.animatedScrollOffset?.y, x: this.props?.animatedScrollOffset?.x}
       }
     }
   ],
@@ -404,9 +405,10 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   };
 
   renderChildren() {
-    const {children, loop} = this.props;
+    const {children: propsChildren, loop} = this.props;
     const length = presenter.getChildrenLength(this.props);
-
+    const children =
+      Constants.isRTL && Constants.isAndroid ? React.Children.toArray(propsChildren).reverse() : propsChildren;
     const childrenArray = React.Children.map(children, (child, index) => {
       return this.renderChild(child, `${index}`);
     });
@@ -455,14 +457,14 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   renderCounter() {
     const {pageWidth, showCounter, counterTextStyle} = this.props;
-    const {currentStandingPage} = this.state;
+    const {currentPage} = this.state;
     const pagesCount = presenter.getChildrenLength(this.props);
 
     if (showCounter && !pageWidth) {
       return (
         <View center style={styles.counter}>
           <Text grey80 text90 style={[{fontWeight: 'bold'}, counterTextStyle]}>
-            {currentStandingPage + 1}/{pagesCount}
+            {currentPage + 1}/{pagesCount}
           </Text>
         </View>
       );
@@ -471,7 +473,6 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   renderAccessibleLayout() {
     const {containerStyle, children, testID} = this.props;
-
     return (
       <View style={containerStyle} onLayout={this.onContainerLayout}>
         <ScrollView
@@ -501,11 +502,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
     const ScrollContainer = animatedScrollOffset ? Animated.ScrollView : ScrollView;
     const contentOffset = this.getInitialContentOffset(snapToOffsets);
     return (
-      <View
-        animated={animated}
-        style={[{marginBottom}, containerStyle]}
-        onLayout={this.onContainerLayout}
-      >
+      <View animated={animated} style={[{marginBottom}, containerStyle]} onLayout={this.onContainerLayout}>
         <ScrollContainer
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}