React-native-deck-swiper: Allow for disableBottomSwipe (and others) to be functions

[andrewmunsell]

It would be useful to allow for disableBottomSwipe and the other similar props to be booleans or functions that return a boolean, to allow clients to enable or disable swipe directions per-card.

It might look something like:

<Swiper
    cards={ [ /* ... */ ] }
    disableTopSwipe={
        card => card.canSwipeUp
    } />

[webraptor]

If your card element has a boolean, and your cards are in the state of the component holding the swiper, you can do that.

[bogannathan]

@webraptor Can you show an example on how to do that? Great work by the way. This swiper is much better than many others.

[webraptor]

const {cards , cardIndex } = this.state; // or this.props, whatever you got going on
// [... extra code, in render() lets say]
<Swiper
  disableBottomSwipe={cards[cardIndex].bottomDisabled}
  cards={cards}
  cardIndex={cardIndex}
/>

PS: didn't put all props for the Swiper. _bottomDisabled_ is a bool prop within the card object part of the cards array passed onto the Swiper... If it's missing it automatically goes to false.

[bogannathan]

Thanks!

[hasis]

Having an issue with this;

My data is defined as:

    [
      {string: 'disabled', bottomDisabled: true},
      {string: 'enabled', bottomDisabled: false},
      {string: 'enabled', bottomDisabled: false}
    ]

And my Swiper as:

<Swiper
            ref={swiper => {
              this.swiper = swiper
            }}
            renderCard={this.renderCard}
            cards={cards}
            cardIndex={cardIndex}
            disableBottomSwipe={cards[cardIndex].bottomDisabled}
            stackSize= {3}>
</Swiper>

Current Behavior: Every card's swipe behaves like the first card in the deck, though they render the correct strings.

Any ideas on what I may be missing? Thanks!

(Let me know if I should open a new issue instead of using this closed one.)

(https://user-images.githubusercontent.com/5694133/54406044-9764ec80-46a6-11e9-8d1c-0771ec5fb60f.gif)

[webraptor]

<Swiper
            ref={swiper => {
              this.swiper = swiper
            }}
            renderCard={this.renderCard}
            cards={cards}
            cardIndex={cardIndex}
            disableBottomSwipe={cards[cardIndex].bottomDisabled}
            stackSize= {3}>
</Swiper>

How does your state management look like?
Unless your cardIndex changes, it will always be 0 for instance. So no matter how many times you swipe, _cards[cardIndex].bottomDisabled_ will be _cards[0].bottomDisabled_, which is disabled.
As you swipe the swiper keeps track of your index internally and renders the proper cards, but since _cardIndex_ isn't updated within the parent component, it will stay to what you initialise the state with (probably 0), resulting in your error.

[hasis]

Thanks for the response! Sorry I don't have the code in front of me, and I have since convinced myself that separating cards on the back end is a better business case, but while trying to figure out what went wrong, I did have the cardIndex logging out onTap, and it did increment with swipes.

I can update a bit later if anyone's curious.