Swiper using React Native's FlatList

user_5029989 0
Viewed 16079

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)enter image description here

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. print of the app

react-native-flatlist react-native
3 Answers

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
/>
user_57072120
Related