React-native-deck-swiper: warning encountered when only one card is rendered

[nitro2003]

Hi guys!

Thank you by the way for the awesome swiper component.

I just found something when I used this.

When only one card is rendered a warning is shown.

Im using the swiper like this:

and i am creating the cards from a fetch request like so:

Im not sure if this is a react-native issue or not. Im fairly new to react-native. Any help would be greatly appreciated.

[tsaohucn]

me too

[nitro2003]

I checked the source of this swiper, maybe it has something to do with how the secondIndex is calculated? Im not entirely sure.

[nitro2003]

I was somehow able to fix this. Im not entirely sure if its a fix or just a hack workaround.

I added a state that checks if there is only a single card to be rendered. Then added a condition in renderSecondCard method to return null if only a single card is to be rendered.

this.state = {
    pan: new Animated.ValueXY(),
    scale: new Animated.Value(props.secondCardZoom),
    firstCardIndex: props.cardIndex,
    cards: props.cards,
    previousCardX: new Animated.Value(props.previousCardInitialPositionX),
    previousCardY: new Animated.Value(props.previousCardInitialPositionY),
    swipedAllCards: false,
    panResponderLocked: false,
    labelType: LABEL_TYPES.NONE,
    slideGesture: false,
    singleCard: false, // <-- this
  }

added a few lines here :

calculateSecondCardIndex = firstCardIndex => {
  const cardIndexAtLastIndex = firstCardIndex === this.state.cards.length - 1
  cardIndexAtLastIndex ? 0 : firstCardIndex + 1
  this.setState({singleCard: cardIndexAtLastIndex === 0 ? true : false }) // <-- this
  return cardIndexAtLastIndex; // <-- this

}

and finally in renderSecondCard:

renderSecondCard = () => {
  const { secondCardIndex } = this.state
  const { cards, renderCard } = this.props

  const secondCardZoomStyle = this.calculateSecondCardZoomStyle()
  const secondCardContent = cards[secondCardIndex]
  const secondCard = renderCard(secondCardContent)

  const notInfinite = !this.props.infinite
  const lastCardOrSwipedAllCards =
  secondCardIndex === 0 || this.state.swipedAllCards
  if (notInfinite && lastCardOrSwipedAllCards) {
    return <Animated.View key={secondCardIndex} />
  } else if (this.state.singleCard) { // <-- added this else if 
    return null
  }

  return (
    <Animated.View key={secondCardIndex} style={secondCardZoomStyle}>
      {secondCard}
    </Animated.View>
  )
}

I hope dev can check this out to see if it would be worth it to be added to the component.

Hope this helps anyone out :)

[alexbrillant]

@nitro2003 thanks great work ! I'll see what I can do to make this warning disappear

[webraptor]

This would be way better if validation occurred before second card rendering method is called (Notice the extra _shouldShowSecondCard_

{this.props.showSecondCard && shouldShowSecondCard ? this.renderSecondCard() : null}

[lon-io]

@alexbrillant Any update on this?

[webraptor]

@lon-io @alexbrillant This was fixed in later version of the swiper when we did the refactoring on the stack rendering. We can close it up.