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!