5

I'm trying to create an interface where cards are presented one at a time to the user. The user can scroll left and right in a paged fashion. I also want to view a small amount of the card to the left and the right of the current card, as a hint that there is more to see. A very rough example of this would be:

enter image description here

Current code is: 

<ScrollView
   style={{width: Dimensions.get('window').width, height: 300}}
   horizontal={true}
   pagingEnabled={true}
   showsHorizontalScrollIndicator={false}
   alwaysBounceHorizontal={false}
   automaticallyAdjustContentInsets={false}>
    <View style={{width: 200, height: 300}}></View>
    <View style={{width: 200, height: 300}}></View>
    <View style={{width: 200, height: 300}}></View>
 </ScrollView>
Phonolog
  • 6,321
  • 3
  • 36
  • 64
Giffo
  • 4,161
  • 3
  • 15
  • 16

1 Answers1

7

I think that my answer to this SO question might help you.

To sum up, you absolutely can create this kind of layout with ScrollView or, even better, FlatList. However, there are two tricky parts:

  • The snapping effect, for which you can use props snapToInterval and snapToAlignment. Unfortunately, these are iOS-only.

  • The animation of the inactive slides, which needs a lot of custom logic.

A co-worker and I created a plugin that answers this particular need. We ended up open-sourcing it, so it's all yours to try: react-native-snap-carousel.

The plugin is now built on top of FlatList (versions >= 3.0.0), which is great to handle huge numbers of items. It provides previews (the effect you're after), snapping effect for iOS and Android, parallax images, RTL support, and more.

You can take a look at the showcase to get a grasp of what can be achieved with it. Do not hesitate to share your experience with the plugin since we're always trying to improve it.

react-native-snap-carousel archriss showcase react-native-snap-carousel archriss aix

Edit : two new layouts have been introduced in version 3.6.0 (one with a stack of cards effect and the other with a tinder-like effect). Enjoy!

react-native-snap-carousel stack layout react-native-snap-carousel tinder layout

bend
  • 1,384
  • 14
  • 22
  • 1
    All good but a long swipe scrolls multiple items, this differs from the `pagingEnabled` to `ScrollView` – Giffo Aug 11 '17 at 08:35
  • Yes, some tweaks had to be made since `ScrollView` has [a whole bunch of limitations](https://github.com/archriss/react-native-snap-carousel/tree/flatlist#flatlist-and-scrollviews-limitations). Still, setting the prop `scrollEndDragDebounceValue` to `0` might help with that. You can also play with `ScrollView`'s prop [`decelerationRate`](https://facebook.github.io/react-native/docs/scrollview.html#decelerationrate) (iOS only). – bend Aug 11 '17 at 17:12
  • 1
    I think that version `3.2.1` is closer to what you were expecting. Note that I am going to work on implementing a custom scroller on top of the `FlatList` in order to better customize carousel's feeling and provide rich interactions. – bend Sep 15 '17 at 07:37