Reset to first card when modal is presented

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>

[yonahforst]

please reopen

[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.