fix for Android RTL layout (#514)

Author: Inbal-Tish

src/components/carousel/CarouselPresenter.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import {Constants} from '../../helpers';
 
 
 export function getChildrenLength(props) {
@@ -10,27 +9,12 @@ export function getChildrenLength(props) {
 export function calcOffset(props, state) {
   const {currentPage, pageWidth} = state;
   const {loop} = props;
-
   const actualCurrentPage = loop ? currentPage + 1 : currentPage;
-
-  let offset = pageWidth * actualCurrentPage;
-  offset = getDirectionOffset(offset, props);
+  const offset = pageWidth * actualCurrentPage;
 
   return offset;
 }
 
-export function getDirectionOffset(offset, props, pageWidth) {
-  let fixedOffset = offset;
-
-  if (Constants.isRTL && Constants.isAndroid) {
-    const {loop} = props;
-    const totalWidth = ((getChildrenLength(props) - 1) + (loop ? 2 : 0)) * pageWidth;
-    fixedOffset = Math.abs(totalWidth - offset);
-  }
-
-  return fixedOffset;
-}
-
 export function calcPageIndex(offset, props, pageWidth) {
   const pagesCount = getChildrenLength(props);
   const {loop} = props;
@@ -42,7 +26,6 @@ export function calcPageIndex(offset, props, pageWidth) {
   } else {
     actualPageIndex = Math.min(pagesCount - 1, pageIndexIncludingClonedPages);
   }
-
   return actualPageIndex;
 }
 
@@ -57,6 +40,7 @@ export function isOutOfBounds(offset, props, pageWidth) {
 // TODO: need to support more cases of page width in loop mode
 export function calcCarouselWidth(props) {
   const {pageWidth, loop} = props;
+
   let length = getChildrenLength(props);
   length = loop ? length + 2 : length;
   return pageWidth * length;

src/components/carousel/index.js

@@ -88,6 +88,7 @@ export default class Carousel extends BaseComponent {
 
     if (this.carousel) {
       this.carousel.current.scrollTo({x, animated});
+      
       if (Constants.isAndroid) {
         // this is done to handle onMomentumScrollEnd not being called in Android:
         // https://github.com/facebook/react-native/issues/11693
@@ -98,21 +99,32 @@ export default class Carousel extends BaseComponent {
   }
 
   goToPage(pageIndex, animated = true) {
-    this.setState({currentPage: pageIndex}, () => this.updateOffset(animated));
+    this.setState({currentPage: this.getCalcIndex(pageIndex)}, () => this.updateOffset(animated));
+  }
+
+  getCalcIndex(index) {
+    // to handle scrollView index issue in Android's RTL layout
+    if (Constants.isRTL && Constants.isAndroid) {
+      const length = presenter.getChildrenLength(this.props) - 1;
+      return length - index;
+    }
+    return index;
   }
 
   onContentSizeChange = () => {
+    // this is to handle initial scroll position (content offset)
     if (Constants.isAndroid) {
       this.updateOffset();
     }
   }
 
-  // finished full page scroll
   onMomentumScrollEnd = () => {
+    // finished full page scroll
     const {currentStandingPage, currentPage} = this.state;
-    this.setState({currentStandingPage: currentPage});  
-    if (currentStandingPage !== currentPage) {
-      _.invoke(this.props, 'onChangePage', currentPage, currentStandingPage);
+    const index = this.getCalcIndex(currentPage);
+    this.setState({currentStandingPage: index});  
+    if (currentStandingPage !== index) {
+      _.invoke(this.props, 'onChangePage', index, currentStandingPage);
     }
   }
 
@@ -124,7 +136,7 @@ export default class Carousel extends BaseComponent {
 
     const {loop} = this.props;
     const {pageWidth} = this.state;
-    const offsetX = presenter.getDirectionOffset(event.nativeEvent.contentOffset.x, this.props, pageWidth);
+    const offsetX = event.nativeEvent.contentOffset.x;
 
     if (offsetX >= 0) {
       const newPage = presenter.calcPageIndex(offsetX, this.props, pageWidth);