Swiper using React Native's FlatList

Question

I want to make my horizontal FlatList (with paging enabled) scroll to left or right in a way that the content is always in the center of the screen and the next and the previous content still appear.

Something like this (for the horizontal actions)

But unfortunately when the flat list is scrolling, the lenght of the scroll is the same of the width of the flat list or its parent and I can't the effect I want.

Answer 1

Our company had a similar need, but none of the existing plugins completely fulfilled our use case. We ended up creating our own and open-sourcing it: react-native-snap-carousel.

The plugin is now built on top of FlatList (versions >= 3.0.0) and provides previews (the effect you were after), snapping effect, 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. If you decide to give it a try, do not hesitate to share your feedback with us; we're always trying to improve it.

---

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!

Answer 2

I used react-native-snap-carousel and while the animations and customizations are quite nice, it's really hard to style because it does not behave like a normal view, and it doesn't render properly inside a ScrollView.

Instead, I reverted to a normal FlatList with some instructions from this page

The setup:

<FlatList
    data={this.data}
    renderItem={this._renderItem}
    keyExtractor={this._keyExtractor}
    horizontal={true} // row instead of column
    // Add the 4 properties below for snapping
    snapToAlignment={"start"} 
    snapToInterval={this.IMAGE_WIDTH + 10} // Adjust to your content width
    decelerationRate={"fast"}
    pagingEnabled
/>

Answer 3

You might be better served using a library for this. I've used react-native-carousel to good success for an identical use case. Github here. Your code would look something like this:

import Carousel from 'react-native-carousel'

getListItems() {
   return [ <View>...</View>, <View>...</View>]
}

render() {
   return (
      <Carousel>
         {this.getListItems()}
      </Carousel>
   )
}