Cards not rendering straight

[sturrock]

When the Swiper renders the cards they are coming out weird, sometimes it works but most the time it doesn't. You cant swipe it either.

I noticed it does it when you open the app, then once you refresh the app with Ctrl+R it fixes itself. Its rendering the first card as the swipeBackCard then its rendering the other cards with rotation, and out of order indexes.

Any ideas whats going on and is there a fix?

[webraptor]

Duplicate

[sturrock]

This is a different error, I figured out how to fix it.

In Swiper.js you need to change line 8 from const { height, width } = Dimensions.get('window') to const { height, width } = Dimensions.get('screen')

[webraptor]

This is a different error, I figured out how to fix it.

In Swiper.js you need to change line 8 from const { height, width } = Dimensions.get('window') to const { height, width } = Dimensions.get('screen')

If you’ve got it solved in a fork please submit a PR. Thanks!

[webraptor]

The change would also impact only Androids.

https://stackoverflow.com/questions/44978804/whats-the-difference-between-window-and-screen-in-the-dimensions-api/44979327

[ali14a]

changed line 8 still getting tilt card. anyone found any solution?

[webraptor]

The issue is likely from the pan responder not the width / height of the the deck of cards.

[Fazatholomew]

Same problem here. The card will be displaced after the first swipe. Also, some how the images flicker when interacting with the swiper. Any ideas?

Below is the props: <Swiper ref={swiperRef} cards={data} cardIndex={index} renderCard={(card) => ( <Card card={card} handleClick={() => handleClick(data[index])} /> )} infinite keyExtractor={(card) => ${card.ticker} ${Date.now()}} backgroundColor={'transparent'} onSwiped={onSwiped} onSwipedRight={() => handleClick(data[index])} onSwipedLeft={() => handleReject(data[index])} onTapCard={() => swiperRef.current.swipeLeft()} cardVerticalMargin={50} stackSize={stackSize} stackScale={10} stackSeparation={14} disableTopSwipe disableBottomSwipe />

[webraptor]

Fixed on 2.0.11