[enhancement] Trigger opening/close programmatically

[mlumbroso]

Hi,

is it possible to open the swipe overlay programmatically?
If not, is it hard to perform? I could help with a PR if you give me directions on how to do so :-)

Thanks for this cool package !

[markrickert]

Check out my branch: https://github.com/markrickert/react-native-swipeout/blob/master/swipe_out/swipe_out.js

Specifically the _openLeft and _openRight functions.

[mlumbroso]

Great fork, I see tons of useful features there. I can't wait to test it :-) Thanks

[markrickert]

Yeah, unfortunately, the original author is kind of MIA so no features are being merged into master right now.  Word is that facebook will be adding an official swipe component soon so don't get married to this component.

[mlumbroso]

@markrickert sorry for the delay in testing it.
Facing an issue : Can't find variable width in swipe_out/swipe_out.js l.70
And indeed looking at the code can't see where it is defined.
Any directions to replace it?
Apart from that amazing additions there 👍
Thanks

EDIT : Adding after let w = 0; let width = this.state.contentWidth; solves it.

[jagajithmk]

Hi @mlumbroso ,
'underlayColor' is working properly but the 'backgroundColor' is not.

[emirdeliz]

I too have this problem. I fixed changing the index.js as:

componentWillReceiveProps: function(nextProps) {
  if (nextProps.close) this._close();
  else {
      this._handlePanResponderGrant();
      this._tweenContent('contentPos', -100)
  }
}

[mlumbroso]

@markrickert I just created a pull request for the width change.

[alburdette619]

I'm currently working on this myself. I've done pretty much what you did @markrickert but returned a Promise from the _openRight/Left methods so that you can ensure that the measurement happens before the state changes. Also, the gesture eventing was not done correctly. Touchables inside of the swipe view were not able to be pressed and the sensitivity prop was not being used.

Currently my only issue is that if I use the button to manually open the swipe menu on several items, close them, then swipe one of those open, all of the manually opened ones open and their state is then tied together on future swipes. Not sure how that's working since this is a class but thus far I'm blaming react-tween-state.

You can check out my branch here.

[RUIFERNANDE5]

@alburdette619 thank you for sharing.
Can you actually give me an example on how to implement it? How can I open the swipeout from a children button?

[alburdette619]

@RUIFERNANDE5 Here you go. I stripped down my code to just highlight the state changes and events. The left menu should work in much the same way just using the openLeft prop. Note that sensitivity should also now actually play a factor. The default is 0. I haven't seen drastic changes by setting this but it does seem to have side effects when swiping in a touchable area.

I solved the issue I noted above btw. onClose was only being called by a swipe action and therefore my state was getting confused when an auto close would occur. Now onClose and onOpen will be called any time the menu closes/opens.

  constructor(props) {
    super(props);
    this.state = { isRightOpen: false };
    this.tags = [];
  }

  render() {
    return (
      <Swipeout
        right={swipeoutBtns}
        autoClose={true}
        backgroundColor={'transparent'}
        onClose={() => this.setState({ isRightOpen: false })}
        openRight={this.state.isRightOpen}
        sensitivity={200}
      >
        <View>
          <TouchableHighlight
            onPress={() => this.setState({ isRightOpen: true })}
          />
        </View>
      </Swipeout>
    );
  }
}

[RUIFERNANDE5]

@alburdette619 its working like a charm, thank you.
Just one thing, if I press the swipe row the onOpen method is triggered not sure why? While the onOpen event doesn't check openRight activity.

[alburdette619]

@RUIFERNANDE5 Huh, so you're pressing the row itself or a touchable you've mapped to openRight? That sounds like the sensitivity is low and causing the event to be called in _handlePanResponderGrant. Or are you saying you attached the onPress to the row object itself? Thx for all the feedback!

[RUIFERNANDE5]

@alburdette619 Sorry for the late response. Should I open an issue on your branch instead? As soon as I can I will show you a demo of what is happening

[alburdette619]

@RUIFERNANDE5 Yeah, that's fine. I've opened a PR but I haven't heard anything back on it.

[maximromanyuk]

Hello guys! I taked @alburdette619 and upgraded it in order to use with new React Native versions. Check it out! https://github.com/CandyOgre/react-native-swipeout