Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

disableIntervalMomentum on Animated.FlatList does not work

Tags:

react-native

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 },
                        )}

                    />
like image 467
Felix Moser Avatar asked Nov 07 '22 14:11

Felix Moser


1 Answers

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

like image 157
Felix Moser Avatar answered Nov 15 '22 11:11

Felix Moser