How to add more new cards at run-time
Shubh1692 opened this issue · comments
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.
@Shubh1692
no solution to this yet?
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.
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.
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?
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>
)
}
Lazy loading should work just by updating cards
prop, without glitches and necessity to add loaders. See #285
Did @hbarylskyi ‘s solution work?
It didn’t for me...
Did @hbarylskyi ‘s solution work?
It didn’t for me...
now you can use my solution
#309