React-native-deck-swiper: How to add more new cards at run-time

[Shubh1692]

For example, I have 10 cards and I swiped almost 7 cards and re-fetch 10 more different cards, How I can add their cards into the same cards stack.

[wendelfreitas]

@Shubh1692
no solution to this yet?

[diegovillam]

I've only been able to make this by rerendering the swiper, e.g. simulate a loading spinner when all cards have been swiped, modify the cards, and show the swiper again.

[Shubh1692]

Hi all, I find one solution for this
I fetched next 10 cards after swiped 7 cards in background using onSwiped event and re-render Swiper component with next 10 cards after onSwipedAllCards event, It have little glitch in UI but it works fine as functionality. for remove this glitch I used a ripple effect loader screen in UI.

[safciplak]

Hi all, I find one solution for this
I fetched next 10 cards after swiped 7 cards in background using onSwiped event and re-render Swiper component with next 10 cards after onSwipedAllCards event, It have little glitch in UI but it works fine as functionality. for remove this glitch I used a ripple effect loader screen in UI.

how can we re-render? can you share with us some code piece?

[Shubh1692]

Yeah sure @safciplak

/** 
 * This method is called after each swiped from Swiper component
*/
async onSwiped(event) {
    /** 
     * It is condition  for get next cards  after swiped 7 cards
    */
    if (typeof event === 'number' && event === 7) {
        const newCards = await this.getNewCards();
        this.setState({
            newCards
        });
    }
}
/** 
 * This method is called after all cards swiped from Swiper component
*/
async onSwipedAllCards() {
    if (this.state.newCards && this.state.newCards.length) {
        await this.setState({
            showRipplesLoader: true
        });
        // Timeout used for show Ripples loader to remove swiper container re-render glitch
        setTimeout(() => {
            await this.setState({
                cards: [...this.state.newCards],
                showRipplesLoader: false
            });
        }, 1000)
    } else {
        await this.setState({
            youCaughtAllCards: true,
            showRipplesLoader: false
        })
    }
}

/** 
 * This method is used for render component view
*/
render() {
    const { showRipplesLoader = false, cards = [], youCaughtAllCards = false } = this.state;
    return (
        <View>
            {!showRipplesLoader && !showRipplesLoader && <Swiper {...{
                onSwiped = (event) => this.onSwiped(event),
                onSwipedAllCards = (event) => this.onSwipedAllCards(event),
                cards
            }}></Swiper>}
            {showRipplesLoader && <RippleLoader />}
            {youCaughtAllCards && <AllCaughtCardContainer />}
        </View>
    )
}

[hbarylskyi]

Lazy loading should work just by updating cards prop, without glitches and necessity to add loaders. See #285

[NishidaRyu416]

Did @hbarylskyi ‘s solution work?
It didn’t for me...

[YEK-PLUS]

Did @hbarylskyi ‘s solution work?
It didn’t for me...

now you can use my solution

309