React-native-deck-swiper: Reset to first card when modal is presented

[acesetmatch]

I have a modal that presents whenever the user swipes Right. The view is presented by setting a isModalVisible state variable. However, when I dismiss the modal view, the card stack resets to the first card. Why does this occur and how do I fix this?

Here is my code:

<Swiper
          ref={swiper => {
            this.swiper = swiper;
          }}
          infinite={true}
          cards={this.state.cards}
          cardIndex={this.state.cardIndex}
          cardVerticalMargin={(Platform.OS === 'ios') ? 15: 160}
          marginTop={(Platform.OS === 'ios') ? 0: -150}
          marginBottom={(Platform.OS === 'ios') ? 115 : 0}
          backgroundColor={'#ffffff'}
          renderCard={this.renderCard}
          onSwipedAll={this.onSwipedAllCards}
          onSwiped={this.onSwiped}
          onSwipedRight={this.handleYup}
          onSwipedLeft={this.handleNope}
          showSecondCard={true}
          overlayLabels={{
            bottom: {
              title: 'BLEAH',
              swipeColor: '#9262C2',
              backgroundOpacity: '0.75',
              fontColor: '#FFF'
            },
            left: {
              title: 'NOPE',
              swipeColor: '#FF6C6C',
              backgroundOpacity: '0.75',
              fontColor: '#FFF'
            },
            right: {
              title: 'LIKE',
              swipeColor: '#4CCC93',
              backgroundOpacity: '0.75',
              fontColor: '#FFF'
            },
            top: {
              title: 'SUPER LIKE',
              swipeColor: '#4EB8B7',
              backgroundOpacity: '0.75',
              fontColor: '#FFF'
            }
          }}
          animateOverlayLabelsOpacity
          animateCardOpacity
        >
      </Swiper>

[alexbrillant]

@acesetmatch I think 1.3.3 fixed it. closing the issue.

[DFelten]

This problem is still there with version 1.4.2. I've created a modal which appears when tapping on the card and when opening the modal, the card stack resets to the first card.

onTapCard = (cardIndex) => {
  this.setState({currentCardIndex: cardIndex});
  this.setDetailsVisible(true);
};

<Swiper
  ref={swiper => {
    this.swiper = swiper;
  }}
  cards={this.state.cards}
  renderCard={this.renderCard}
  onTapCard={this.onTapCard}
  cardIndex={this.state.cardIndex}
  horizontalSwipe={this.state.horizontalSwipe}
  verticalSwipe={this.state.verticalSwipe}
  showSecondCard={this.state.showNextCard}
  goBackToPreviousCardOnSwipeBottom={this.state.verticalSwipeBack}
  goBackToPreviousCardOnSwipeRight={this.state.horizontalSwipeBack}
  infinite={this.state.infiniteSwiping}
  backgroundColor={Colors.transparent}
  cardStyle={styles.cardSwiper}
  cardVerticalMargin={10}>
</Swiper>
<Modal
  animationType="slide"
  transparent={false}
  visible={this.state.detailsVisible}
  onRequestClose={() => {
    this.setDetailsVisible(false);
    this.setState({cardIndex: this.state.currentCardIndex}); // workaround with warning
  }}
>

In the moment I need so set the cardIndex manually to the current index, but then there is a warning.

Warning: flattenChildren(...): Encountered two children with the same key, 1. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

An other problem with this workaround is that the next visible card is now the second card and not the next one.

this.swiper.jumpToCardIndex(currentIndex); when closing the modal is also not working, nothing happens.

[viimauer]

I have the same problem, when open modal, cards resets to the first card

@DFelten you can work around this issue?

[unmec]

I guess this issue should be reopened.
I looked into example project in the repo and it throws "Encountered two children with the same key" warning too.

[bispul]

yeah I am getting the following error and it resets the card to first index:

Warning: flattenChildren(...): Encountered two children with the same key, 0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

[zelgan90]

Has anyone found a solution or effective workaround for this? This component works much better than other swipers, but things like this are almost a deal breaker.

[yonahforst]

please reopen

[mrexodia]

When setting infinite={true} you need to have at least stackSize elements in your cards, which works around the issue for me.