React-native-deck-swiper: Rerendering card resets Swiper to first card

Created on 11 Oct 2017  路  7Comments  路  Source: alexbrillant/react-native-deck-swiper

how can i rerender a card, but not reset the Swiper to the first card ?

consider the following within the render function:

const cardData = this.state.cardData
const myCards = map(cardData, (card, cardIndex) => {
  return (
    <CardComponent
      key={cardIndex}
      prop={card.prop}
      onEvent={this.onEvent}
    />
  )
})

return (
  <Swiper
    ref={swiper => this.swiper = swiper}
    cards={myCards}
    cardVerticalMargin={0}
    cardHorizontalMargin={0}
    infinite={true}
    renderCard={card => card}
    backgroundColor={'transparent'}
    verticalSwipe={false}
    onSwiped={() => false}
    onSwipedAll={() => false}
    onSwipedLeft={() => false}
    onSwipedRight={() => false}
  ></Swiper>
)

Most helpful comment

@bispul I fixed my issue by adding cardIndex to the state and then incrementing it in the onSwiped callback

All 7 comments

Also set cardIndex on the Swiper from state. That way when you modify anything on the state, the deck will stay the same.

i have cardIndex on the Swiper from state but its still not working. The first card renders again immediately after you swipe that card. Can anyone help please?

Ah, ok .. The bug is re-rendering and swiping will keep the second card to the second one in the original card deck, rather than the one you've swiped to so far ... We've experienced this issue for about a month now, just created the PR with the fix. https://github.com/alexbrillant/react-native-deck-swiper/pull/76/files

@webraptor thanks nice work

Don't know why but i am still getting the issue. :(

@bispul I fixed my issue by adding cardIndex to the state and then incrementing it in the onSwiped callback

@yonahforst hey now its not reseting but after the cards are finished when you try to do anything in the swiper it again calls the respective methods. does anyone know what's wrong ?

Was this page helpful?
0 / 5 - 0 ratings