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:
And with each new element the FlatList
adds the width of the all previous separators to offset:
How to make the FlatList
component consider the width of the separator component in horizontal scrolling and make proper offset?
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.
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.
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With