RTL support

[Assem-Hafez]

Gestures are reversed on right to left devices

[EyalSi]

Hi @Assem-Hafez I solved it temporarily by changing all occurrences of gestureState.dx in dist\index.js, to: gestureState.dx*(_reactNative.I18nManager.isRTL?-1:1)

[dabush-eliel]

@EyalSi thanks

[hery]

Was this ever committed to master? If not any update would break the fix.

[hery]

Here's a PR for @EyalSi's solution, pretty straightforward! 🙇

https://github.com/dancormier/react-native-swipeout/pull/301

[mohamadian]

First import I18nManager:

import {I18nManager} from 'react-native';

and then change render: function ():

render:` function () {
    var contentWidth = this.state.contentWidth;
    var posX = this.getTweeningValue('contentPos');

    var styleSwipeout = [styles.swipeout, this.props.style];
    if (this.props.backgroundColor) {
      styleSwipeout.push([{ backgroundColor: this.props.backgroundColor }]);
    }

    var limit = -this.state.btnsRightWidth;
    if (posX > 0) var limit = this.state.btnsLeftWidth;

    if (I18nManager.isRTL){
        var styleLeftPos = {
            left: {
              left: Math.abs(contentWidth - Math.min(limit, posX)),
              overflow: 'hidden',
              width: Math.min(limit * (posX / limit), limit),
            },    
          };
          var styleRightPos = {
            right: {
              left: 0,
              right: Math.abs(contentWidth + Math.max(limit, posX)),
            },
          };
    }
    else{
        var styleLeftPos = {
            left: {
              left: 0,
              overflow: 'hidden',
              width: Math.min(limit * (posX / limit), limit),
            },
          };
          var styleRightPos = {
            right: {
              left: Math.abs(contentWidth + Math.max(limit, posX)),
              right: 0,
            },
          };      
    }
    var styleContentPos = {
      content: {
        transform: [{ translateX: this._rubberBandEasing(posX, limit) }],
      },
    };

    var styleContent = [styles.swipeoutContent];
    styleContent.push(styleContentPos.content);

    var styleRight = [styles.swipeoutBtns];
    styleRight.push(styleRightPos.right);

    var styleLeft = [styles.swipeoutBtns];
    styleLeft.push(styleLeftPos.left);

    var isRightVisible = posX < 0;
    var isLeftVisible = posX > 0;

    return (
      <View style={styleSwipeout}>
        <View
          ref={node => this.swipeoutContent = node}
          style={styleContent}
          onLayout={this._onLayout}
          {...this._panResponder.panHandlers}
        >
          {this.props.children}
        </View>
        {this._renderButtons(this.props.right, isRightVisible, styleRight)}
        {this._renderButtons(this.props.left, isLeftVisible, styleLeft)}
      </View>
    );
  },