I'm working on an app which includes a horizontal interface to look at other peoples stories. To increase performance, I've used a FlatList and it works fine, besides the fact that I can scroll through it like a feed and it does not stop on the next index/story
Tried to handle this with disableIntervalMomentum, a prop which FlatList should inherit from ScrollView, but it does not show any effect! Running on expo: ^34.0.1
Is there anything what I can do, besides from writing the whole scroll-behavior myself? Thanks for helping! :D
<Animated.FlatList
data={this.state.stories}
keyExtractor={this._keyExtractor}
renderItem={this._renderSingleStory}
style={StyleSheet.absoluteFillObject}
horizontal
snapToInterval={width}
disableIntervalMomentum
snapToAlignment={"center"}
decelerationRate={0.88}
initialScrollIndex={this.props.stories.indexOf(this.props.currentActiveBigStory)}
showsHorizontalScrollIndicator={false}
getItemLayout={(data, index) => (
{ length: width, offset: width * index, index }
)}
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: { x },
},
},
],
{ useNativeDriver: true },
)}
/>
For everyone struggling with it, pagingEnabled did the trick (Thanks to Qing) That's the current code:
<Animated.FlatList
data={this.state.items}
keyExtractor={this._keyExtractor}
renderItem={this._renderSingleStory}
initialScrollIndex={this.props.items.indexOf(this.props.currentActiveBigStory)}
showsHorizontalScrollIndicator={false}
pagingEnabled
horizontal
getItemLayout={(data, index) => (
{ length: width, offset: width * index, index }
)}
onScroll={Animated.event(
[
{
nativeEvent: {
contentOffset: { x },
},
},
],
{ useNativeDriver: true },
)}
/>
I hope it helps you! :D
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