Open jezravina91 opened 6 years ago
me too
I checked the source of this swiper, maybe it has something to do with how the secondIndex is calculated? Im not entirely sure.
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 :)
@nitro2003 thanks great work ! I'll see what I can do to make this warning disappear
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}
@alexbrillant Any update on this?
@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.
The issue is not fixed. Not even in "2.0.7"
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.