Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Native: Correct scrolling in horizontal FlatList with Item Separator

ReactNative: v0.52.0

Platform: iOS

My FlatList code:

<FlatList
  horizontal
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}

  legacyImplementation={false}

  data={this.props.photos}
  renderItem={item => this.renderPhoto(item)}
  keyExtractor={photo => photo.id}

  ItemSeparatorComponent={this.itemSeparatorComponent}
/>

Item separator code:

itemSeparatorComponent = () => {
    return <View style = {
        {
            height: '100%',
            width: 5,
            backgroundColor: 'red',
        }
    }
    />
}

And finally FlatList item component:

renderPhoto = ({ item, index }) => {
    return (
        <View style = {{ width: SCREEN_WIDTH, height: 'auto' }}>
          <FastImage 
            style = { styles.photo }
            resizeMode = { FastImage.resizeMode.contain }
            source = {{ uri: item.source.uri }}
          /> 
        </View>
    )
}

But when scrolling, the FlatList makes an offset to the separator but not to the left edge of item:

enter image description here

And with each new element the FlatList adds the width of the all previous separators to offset:

enter image description here

How to make the FlatList component consider the width of the separator component in horizontal scrolling and make proper offset?

like image 468
Yury Avatar asked Feb 04 '18 15:02

Yury


People also ask

How to implement horizontal separator line in flatlist in React Native?

The ItemSeparatorComponent is used in FlatList to implement a Horizontal separator line between each item of FlatList. We can customize the separator styling and make it in any color or design. We have to pass a Child component in the ItemSeparatorComponent and it will be render after each Item of FlatList in react native.

How to customize Item Separator styling in React Native?

We can customize the separator styling and make it in any color or design. We have to pass a Child component in the ItemSeparatorComponent and it will be render after each Item of FlatList in react native.

What is flatlist in React Native?

FlatList is a React Native component that only loads items that are currently visible on the screen and it deletes items as they go off screen which is more optimal for large amounts of data. Furthermore, it provides scrolling features by default. You don’t need to use extra components like ScrollView to make list data scrollable.

What is ScrollView in React Native?

The ScrollView is a generic React Native scrolling container that allows both vertical and horizontal direction scrolling. By default, it displays its children vertically in a column because the horizontal prop value is set to false. If you want your elements to be arranged horizontally in a single row, you can set the horizontal value to true.


1 Answers

I had the same use-case. For anyone looking for a solution, here it is.

Step 1) Don't use ItemSeparatorComponent prop. Instead, render it inline in your renderItem component.

Step 2) (Key-point). Specify the width and height in the style prop of the FlatList. The width, in your case, should be SCREEN_WIDTH + 5.

Then Flatlist will automatically move the entire screen (photo + separator) away when pagination is enabled. So now your code should be like so:-

<FlatList
  horizontal
  pagingEnabled={true}
  showsHorizontalScrollIndicator={false}
  legacyImplementation={false}
  data={this.props.photos}
  renderItem={item => this.renderPhoto(item)}
  keyExtractor={photo => photo.id}
  style={{width: SCREEN_WIDTH + 5, height:'100%'}}
/>

Render photo code:-

renderPhoto = ({ item, index }) => {
return (
    <View style = {{ width: SCREEN_WIDTH + 5, height: 'auto', 
      flexDirection:'row'}}>
      <FastImage 
        style = { styles.photo }
        resizeMode = { FastImage.resizeMode.contain }
        source = {{ uri: item.source.uri }}
      /> 
      {this. itemSeparatorComponent()}
    </View>
)}

Item separator code:

itemSeparatorComponent = () => {
return <View style = {
    {
        height: '100%',
        width: 5,
        backgroundColor: 'red',
    }
}
/>
}

If you still can't figure it out, then look at this component:
https://github.com/zachgibson/react-native-parallax-swiper

Try to go into the implementation, you will see that this guy has provided width and height to the Animated.ScrollView.
https://github.com/zachgibson/react-native-parallax-swiper/blob/master/src/ParallaxSwiper.js
Line number: 93 - 97

like image 124
Yash Gadle Avatar answered Oct 12 '22 04:10

Yash Gadle