Provide RTL support for SwipeableRow

Summary:
Flipped the gesture for SwipeableRow
 Provide RTL support for SwipeableRow. When developer set RTL layout in their app, all the animation and  gesture will change to RTL status.

Reviewed By: fkgozali

Differential Revision: D3532919

fbshipit-source-id: 76fc94cdaa8457350e9bbe3366aa714c9eb45245

Libraries/Experimental/SwipeableRow/SwipeableRow.js

@@ -34,6 +34,9 @@ const {PropTypes} = React;
 
 const emptyFunction = require('fbjs/lib/emptyFunction');
 
+const I18nManager = require('NativeModules').I18nManager || {};
+const IS_RTL = I18nManager.isRTL;
+
 // NOTE: Eventually convert these consts to an input object of configurations
 
 // Position of the left of the swipable item when closed
@@ -240,7 +243,8 @@ const SwipeableRow = React.createClass({
   },
 
   _isSwipingRightFromClosed(gestureState: Object): boolean {
-    return this._previousLeft === CLOSED_LEFT_POSITION && gestureState.dx > 0;
+    const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
+    return this._previousLeft === CLOSED_LEFT_POSITION && gestureStateDx > 0;
   },
 
   _swipeFullSpeed(gestureState: Object): void {
@@ -259,9 +263,10 @@ const SwipeableRow = React.createClass({
      * swiping is available, but swiping right does not do anything
      * functionally.
      */
+    const gestureStateDx = IS_RTL ? -gestureState.dx : gestureState.dx;
     return (
       this._isSwipingRightFromClosed(gestureState) &&
-      gestureState.dx > RIGHT_SWIPE_THRESHOLD
+      gestureStateDx > RIGHT_SWIPE_THRESHOLD
     );
   },
 
@@ -290,7 +295,8 @@ const SwipeableRow = React.createClass({
   },
 
   _animateToOpenPosition(): void {
-    this._animateTo(-this.props.maxSwipeDistance);
+    const maxSwipeDistance = IS_RTL ? -this.props.maxSwipeDistance : this.props.maxSwipeDistance;
+    this._animateTo(-maxSwipeDistance);
   },
 
   _animateToClosedPosition(duration: number = SWIPE_DURATION): void {
@@ -306,8 +312,9 @@ const SwipeableRow = React.createClass({
      * When swiping right, we want to bounce back past closed position on release
      * so users know they should swipe right to get content.
      */
+    const swipeBounceBackDistance = IS_RTL ? -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE : RIGHT_SWIPE_BOUNCE_BACK_DISTANCE;
     this._animateTo(
-      -RIGHT_SWIPE_BOUNCE_BACK_DISTANCE,
+      -swipeBounceBackDistance,
       duration,
       this._animateToClosedPositionDuringBounce,
     );
@@ -330,8 +337,7 @@ const SwipeableRow = React.createClass({
   },
 
   _handlePanResponderEnd(event: Object, gestureState: Object): void {
-    const horizontalDistance = gestureState.dx;
-
+    const horizontalDistance = IS_RTL ? -gestureState.dx : gestureState.dx;
     if (this._isSwipingRightFromClosed(gestureState)) {
       this.props.onOpen();
       this._animateBounceBack(RIGHT_SWIPE_BOUNCE_BACK_DURATION);