CODEWITHSUNDEEP
react-native
M.Blistan
M.Blistan

Reputation: 21

React-native - Pagination in horizontal FlatList with separators

How to adjust horizontal FlatList with separators in order to skip separators when pagination is enabled. I want to see separators only when swiping between items. I tried to set it in getItemLayout but it doesn't work properly. I used getItemLayout = (_, index) => ({ length: window.width, offset: (window.width + separatorWidth) * index, index }) Behaviour looks like that

Upvotes: 2

Views: 7563

Answers (1)

rkd
rkd

Reputation: 714

This confused me as well.

There are a few snap related properties inherited/extended from <ScrollView> that are useful here. Checkout: snapToInterval and snapToOffsets.

If you're using a <FlatList> or <ScrollView> to act as a horizontal full-width carousel, and want to enforce snapping so that a single "page" within the list is always within view (i.e. users can't stop partially between views), these snap props are what you need.

Note: you need to disable pagingEnabled in order for these props to be respected.

Simplified example code:

render() {
  const totalItemWidth = window.width + separatorWidth;

  return (
    <FlatList
      { /* ... other props — data, renderItem, style, etc ... */}
      horizontal
      showsHorizontalScrollIndicator={false}
      snapToInterval={totalItemWidth}
      decelerationRate="fast"
      bounces={false}
      getItemLayout={(data, index) => ({
        length: totalItemWidth,
        offset: totalItemWidth * index,
        index,
      })}
      ItemSeparatorComponent={SomeSeparatorComponent}
    />
  )
}

How it behaves on iOS verse Android:

Android is a bit clunkier and I'm still refining the decelerationRate and overall feel... but it's close, IMO.

Upvotes: 8

Related Questions