Revert "Fix/carousel android rtl jumps (#2831)"

This reverts commit b997db4.

Author: nitzanyiz

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,30 +195,28 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   goToPage(pageIndex: number, animated = true) {
-    this.setState({currentPage: pageIndex}, () => this.updateOffset(animated));
+    this.setState({currentPage: this.getCalcIndex(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 {
@@ -241,8 +239,10 @@ 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;
     }
   };
@@ -307,13 +307,14 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   onMomentumScrollEnd = () => {
     // finished full page scroll
     const {currentStandingPage, currentPage} = this.state;
+    const index = this.getCalcIndex(currentPage);
     const pagesCount = presenter.getChildrenLength(this.props);
 
-    if (currentPage < pagesCount) {
-      this.setState({currentStandingPage: currentPage});
+    if (index < pagesCount) {
+      this.setState({currentStandingPage: index});
 
-      if (currentStandingPage !== currentPage) {
-        this.props.onChangePage?.(currentPage, currentStandingPage, {isAutoScrolled: this.isAutoScrolled});
+      if (currentStandingPage !== index) {
+        this.props.onChangePage?.(index, currentStandingPage, {isAutoScrolled: this.isAutoScrolled});
         this.isAutoScrolled = false;
       }
     }
@@ -354,11 +355,10 @@ 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,10 +404,9 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   };
 
   renderChildren() {
-    const {children: propsChildren, loop} = this.props;
+    const {children, 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}`);
     });
@@ -424,7 +423,6 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   renderPageControl() {
     const {pageControlPosition, pageControlProps = {}} = this.props;
-    const {currentStandingPage} = this.state;
 
     if (pageControlPosition) {
       const {
@@ -449,7 +447,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
           color={color}
           {...others}
           numOfPages={pagesCount}
-          currentPage={currentStandingPage}
+          currentPage={this.getCalcIndex(this.state.currentPage)}
         />
       );
     }
@@ -473,6 +471,7 @@ class Carousel extends Component<CarouselProps, CarouselState> {
 
   renderAccessibleLayout() {
     const {containerStyle, children, testID} = this.props;
+
     return (
       <View style={containerStyle} onLayout={this.onContainerLayout}>
         <ScrollView
@@ -493,17 +492,20 @@ class Carousel extends Component<CarouselProps, CarouselState> {
   }
 
   renderCarousel() {
-    const {containerStyle, animated, horizontal, animatedScrollOffset, style, ...others} = this.props;
+    const {containerStyle, animated, horizontal, animatedScrollOffset, ...others} = this.props;
     const scrollContainerStyle = this.shouldUsePageWidth()
       ? {paddingRight: this.getItemSpacings(this.props)}
       : undefined;
     const snapToOffsets = this.getSnapToOffsets();
     const marginBottom = Math.max(0, this.getContainerPaddingVertical() - 16);
     const ScrollContainer = animatedScrollOffset ? Animated.ScrollView : ScrollView;
     const contentOffset = this.getInitialContentOffset(snapToOffsets);
-    const _style = Constants.isRTL && Constants.isAndroid ? [styles.invertedView, style] : style;
     return (
-      <View animated={animated} style={[{marginBottom}, containerStyle]} onLayout={this.onContainerLayout}>
+      <View
+        animated={animated}
+        style={[{marginBottom}, containerStyle]}
+        onLayout={this.onContainerLayout}
+      >
         <ScrollContainer
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
@@ -519,7 +521,6 @@ class Carousel extends Component<CarouselProps, CarouselState> {
           contentOffset={contentOffset}
           // onContentSizeChange={this.onContentSizeChange}
           onMomentumScrollEnd={this.onMomentumScrollEnd}
-          style={_style}
         >
           {this.renderChildren()}
         </ScrollContainer>
@@ -555,8 +556,5 @@ const styles = StyleSheet.create({
   hiddenText: {
     position: 'absolute',
     width: 1
-  },
-  invertedView: {
-    transform: [{scaleX: -1}]
   }
 });