remove card from deck

[minuitagency]

Hi,

We need to be able to remove cards onPress a close button from the deck and go to the next one.

Issue being, since we're removing the current card, it jumps two cards ahead.

Any idea?

Thanks,

Théo

[kurtiev]

+1 Also need remove onSwipeLeft event with infinite={true}. Need ability move card behind all with onSwipeRight event and remove totally with onSwipeLeft event.

[2snEM6]

Has anyone solved this issue?

[brocodedude]

I think I have come up with a way to do this. In my case, I want the card that was swiped up to be removed from the deck. To accomplish this, I am essentially re-rendering the swiper every time a card is swiped up.

const ALL_CARDS = [.....]
const [cards, setCards] = useState(ALL_CARDS);
 const [cardChosen, setCardChosen] = useState(false);

useEffect(() => {
    let timeout;
    setCardChosen(true);
    timeout = setTimeout(() => {
      setCardChosen(false);
    }, 1000);
    return () => clearTimeout(timeout);
  }, [cards]);

<View>
     {!cardChosen ? 
        <Swiper 
               cards={cards}
               stackSize={cards.length}
               renderCard={(card) => {
                 return (
                      card && // <--- This is very important
                      <View style={styles.card}>
                          ...
                     </View>
                    );
                }}
                onSwipedTop={(cardIndex) => {
                    let removedCardID = cards[cardIndex].id
                    setCards(cards.filter((card) => {
                      return card.id !== removedCardID;
                  }))
            /> : null
}
</View>

That is a compact version of what I am doing. Since the re-rendering of the cards is a bit "ugly", I use react-native-animatable and wrap the swiper with an Animatable.View to allow it to slide up when rendering in, but that is completely optional.

I hope I helped! Let me know if you have any questions! I am so glad I finally figured this out!