Add cards dynamically

[liron-navon]

When I try to add more cards dynamically, the stack won't update, so I need to give a "key" to the Swiper and update the key, which forces rerender. I would rather add and remove children, but the Swiper won't notice such a change. I want to pull more cards data from an API (10-20 cards at a time) so it is important for me.

[Schweig]

Do you have a code fragment for this? Cant get my swiper to notice the change in state.

[liron-navon]

@Schweig That's the basic code, I give it a key to force render it when I add or remove cards:

<Swiper key={cards.length}>

[shivamsaigupta]

@liron-navon did you find a solution? I'm facing the same issue.

[lhandel]

I will look into this next week

[lhandel]

Can you dont just append the card att the end of the list like this?

<CardStack onSwiped={this.addCard}>
{cards.map((card, index) => (
  <Card key={card} style={[styles.card]}>
    <Text style={styles.label}>{card}</Text>
  </Card>
))}
</CardStack>

addCard = () => {
    const { cards } = this.state;
    cards.push('New card')
    this.setState({ cards })
 }

[liron-navon]

@lhandel It's been half a year or so since I opened this issue.... back then I think it just didn't work,

[robsutcliffe]

I had this same issue. adding <CardStack key={cards.length} > worked for me too. The downside is that it then rerenders the whole stack so you're back to the first card again.

[safciplak]

any update?

[viniciusmarson]

I am having this problema too.

[CrazyMan2]

Can you dont just append the card att the end of the list like this?

<CardStack onSwiped={this.addCard}>
{cards.map((card, index) => (
  <Card key={card} style={[styles.card]}>
    <Text style={styles.label}>{card}</Text>
  </Card>
))}
</CardStack>

addCard = () => {
    const { cards } = this.state;
    cards.push('New card')
    this.setState({ cards })
 }

card When the initial value is empty,New data can't display if set <Swiper key={cards.length}> he downside is that it then rerenders the whole stack so you're back to the first card again.

[georgeMorales]

hi guys, let's see if you can help me ... I add cards dynamically with firebase firestore and it seems to work fine but from time to time and randomly I get an error ... When the next batch of cards comes, the first card is rendered but the second card appears transparent and you can see the next smaller card from the back prepared by the animation. You can give the button like or dislike or swipe on that transparent card but the user does not see the content of that card and it is quite bad for the performance of the application. Has anyone something similar happened to you? Help please!

[Snokown]

hi guys, let's see if you can help me ... I add cards dynamically with firebase firestore and it seems to work fine but from time to time and randomly I get an error ... When the next batch of cards comes, the first card is rendered but the second card appears transparent and you can see the next smaller card from the back prepared by the animation. You can give the button like or dislike or swipe on that transparent card but the user does not see the content of that card and it is quite bad for the performance of the application. Has anyone something similar happened to you? Help please!

@georgeMorales Yep...same exact issue here, will update if I'm able to figure out a fix.

[luklew]

@georgeMorales @Snokown How did you dynamically add to the stack without refreshing the whole stack back to the start? Thanks

[Snokown]

@georgeMorales @Snokown How did you dynamically add to the stack without refreshing the whole stack back to the start? Thanks

@luklew So, not the best solution but I got it working: I do refresh the whole stack back to the start and add the new cards onto it. I keep track of swipes by incrementing 'swipeCount' and then I offset the re-rendered stack by that variable in the code below. The card stack keeps growing this way, but for my app that didn't really matter.

cardData.slice(swipeCount).map((cardData) => ( <Card cardData={cardData} key={cardData.id} /> ))

Not ideal but hopefully it helps!