force swipe with buttons

[sebinator]

force swipe with buttons

[SuttonKyle]

I've found that if you create a ref in your constructor, like:
this.swipeCardRef = React.createRef()
Then include ref={this.swipeCardRef} in the props to your SwipeCards component, you can call this.swipeCardRef.current._forceRightSwipe() and this.swipeCardRef.current._forceLeftSwipe() in your onPress functions to force the swipe animation

[SuttonKyle]

Your code right now is calling the method on load instead of onPress. Try replacing {this.swipeCardRef.current._forceRightSwipe()} with {() => this.swipeCardRef.current._forceRightSwipe()}

Also, I forgot to mention that this will only show the animation, and won't actually call the handleYup function, so you will have to manually call that within the button as well. You may also need a way to bind the current card to the button, which I haven't implemented yet, but if you need any more help with that, I can get back to you once I've implemented it.

[michallapkowski]

Hey @SuttonKyle

Can you shed more light?

I have the following:

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.swipeCardRef = React.createRef();
  }
//some code

  render() {
    return (
      <View>
      <SwipeCards
        cards={this.props.cards}
        ref={this.swipeCardRef}
        cardRemoved={this.cardRemoved.bind(this)}/>
//some code
          <TouchableOpacity style = {styles.buttons} onPress = {this.swipeCardRef.current._forceRightSwipe()}/>
       </View>

And I get the TypeError: TypeError: null is not an object (evaluating 'this.swipeCardRef.current._forceRightSwipe')

Can you help?

[pabloteari]

That worked! Thanks

[zeeshaanl]

Your code right now is calling the method on load instead of onPress. Try replacing {this.swipeCardRef.current._forceRightSwipe()} with {() => this.swipeCardRef.current._forceRightSwipe()}

Also, I forgot to mention that this will only show the animation, and won't actually call the handleYup function, so you will have to manually call that within the button as well. You may also need a way to bind the current card to the button, which I haven't implemented yet, but if you need any more help with that, I can get back to you once I've implemented it.

How could I bind the current card to the button?

Thanks!

[zeeshaanl]

Your code right now is calling the method on load instead of onPress. Try replacing {this.swipeCardRef.current._forceRightSwipe()} with {() => this.swipeCardRef.current._forceRightSwipe()}
Also, I forgot to mention that this will only show the animation, and won't actually call the handleYup function, so you will have to manually call that within the button as well. You may also need a way to bind the current card to the button, which I haven't implemented yet, but if you need any more help with that, I can get back to you once I've implemented it.

How could I bind the current card to the button?

Thanks!

Figured it out, the card can be referred to using swipeCardRef.current.state.card