Shift card array and reset index to 0 on swipe

[QQizi]

Hello, Here's my issue. I have an array of card which looks like this :

 [{index:0,...},{index:1,...},{index:2,...}]

On a swipe event i want to shift the index (removing the first index) and set the cardIndex to 0 The shifted array would look like this :

 [{index:1,...},{index:2,...},{index:3,...}]

My problem is that the current displayed card, in this case {index:1,...} is unmount and remounted which make the displayed image in the card to flicker.

This logic would allow me to update the card array when needed to have an infinite swiper without pre-loading a huge array at first.

Is there anyway to prevent the card to unmount in this case ?

[webraptor]

If you do not set infinite property on the swiper, once you've gone past a certain card and respective cardIndex, you'll never go back to previously viewed content.

Adding cards to the deck is quite simple, provided that you have your cards on the state, and newCards is an array

No need to shift cards, slice the array etc.

const addCardsToDeck = (newCards) => {
  return [...this.state.cards, ...newCards];
}

[QQizi]

My issue is not just updating the cards. I want to be able to "reset" the cards array without re-rendering the current displayed card. Basicaly do this :

var potential = this.props.PotentialMatchs.matchs;
potential.shift();
this.props.setPotentialMatchs(potential); //used as cards={this.props.PotentialMatchs.matchs}
this.props.setIndexMatch(0); //used as cardIndex={this.props.IndexMatch.index}

It would allow me to have an array of let's say 10 cards all the time and keep the activeIndex at 0. The context is a Tinder like app where i'll be able to do infinite card array update without any visual re-render on the client side and mostely without having to generate a big array of card when the app is launched.

[webraptor]

As mentioned in the previous commit, you can load 10 cards in the array. When you swipe 5 of them request the next 10 from the backend, push them to the deck, resulting in cardIndex 4 with 20 cards. When you get to 15 cards swiped, you get another 10 and so on. No need to reset anything at any time, just to push new cards to the deck.

[Remato]

Hey guys, i have a same problem i'm trying it:

this.state= { cards: [1,2,3] };

//other codes

addCardsToDeck = (newCards) => {
  const { cards } = this.state;

  return [...cards, ...newCards];
};

onSwiped = (index) => {
    
  if ( index === 1 ){
    const a = this.addCardsToDeck([4, 5, 6]);
    this.setState({ cards: a });
  }
   
};

but not working... i believe i'm applying it wrong

my Swiper:

<Swiper
          ref={(swiper) => {
            this.swiper = swiper;
          }}
          cards={cards}
          cardIndex={cardIndex}
          renderCard={this.renderCard}
          onSwiped={(index) => this.onSwiped(index)}
          onSwipedLeft={(index) => this.swipeLeft(index)}
          onSwipedRight={(index) => this.swipeRight(index)}
          onSwipedTop={(index) => this.swipeTop(index)}
          onTapCard={() => {}}
          onSwipedAll={this.swipedAllCards}
          stackSize={10}
          stackSeparation={0}
          containerStyle={{
            backgroundColor: 'transparent',
          }}
          cardStyle={cardStyle}
          overlayLabels={overlayStyle}
          animateOverlayLabelsOpacity
          animateCardOpacity
          swipeBackCard
        />

and my renderCard function:

renderCard = (card, index) => {
    return (
      <Card>
        <User>
          <Avatar source={{ uri: card.url_pic }} />
          <UserName>{card.nome_completo}</UserName>
          <UserCity>{card.cidade}</UserCity>
        </User>
        <Details>
          <NomeVaga>{card.vaga_desejada}</NomeVaga>
          <Experiencia>{card.experiencia} experiências na área</Experiencia>
          <Resume>{card.resumo}</Resume>
        </Details>
        <Reactions>
          <CircleButton>
            <Icon name="thumb-down" color="red" size={30} />
          </CircleButton>
          <CircleButton onPress={() => this.swiper.swipeBack()}>
            <Icon name="settings-backup-restore" color="yellow" size={30} />
          </CircleButton>
          <CircleButton>
            <Icon name="star" color="blue" size={30} />
          </CircleButton>
          <CircleButton>
            <Icon name="thumb-up" color="green" size={30} />
          </CircleButton>
        </Reactions>
      </Card>
    );
  };

help me please :(