CODEWITHSUNDEEP
react-native
everlasto
everlasto

Reputation: 4930

How can I show the adjacent cards in scrollView?

I'm trying to implement a swiper in react native, where cards are arranged horizontally and users can swipe left/right to see the next card coming from adjacent edge.

Something similar to this http://www.idangero.us/swiper/#.VmFqdeN95E4

I have a scrollView with each cards width equal to device width, so each card can be swiped to reveal next/previous card.

But how can I show the adjacent cards in the same viewpoint?

Are there any props in scrollView to achieve this? (using snapToInterval and snapToAlignment doesn't go well if pagingEnabled)

Upvotes: 3

Views: 3687

Answers (2)

Vasil Enchev
Vasil Enchev

Reputation: 1726

You need all of these in your scroll view:

horizontal = {true}
decelerationRate = {0}
snapToInterval = {200}
snapToAlignment = {'center'}

Check the expo for detailed implementation https://snack.expo.io/H1CnjIeDb

Unfortunately, this does not work on Android at the moment. Hopefully, they will support it in the future.

Upvotes: 2

oblador
oblador

Reputation: 3004

Assuming you are using iOS you can combine the ScrollView properties snapToInterval={somethingSmallerThanDeviceWidth} and snapToAlignment to create this effect. Cards then need to be smaller than device width of course.

I've created a RNPlay example using this technique:

RNPlay preview

Upvotes: 12

Related Questions