onEndReached in Flatlist issue

Question

If I enclose the flatlist in a View then my onEndReached triggers infinitely if I remove the enclosing View onEndReached is not triggered at all.

 render() {
    return (
        <Root>
            <Container>
                <Content>
                    <View>
                        {this.state.listView && (
                            <FlatList
                                data={this.state.variants}
                                keyExtractor={this._keyExtractor}
                                onEndReachedThreshold={0.5}
                                onEndReached={({ distanceFromEnd }) => {
                                    console.log(
                                        "on end reached ",
                                        distanceFromEnd
                                    );
                                    this.loadMore();
                                }}
                                numColumns={1}
                                renderItem={({ item, index }) => (
                                    <CatalogRow
                                        item={item}
                                        in_wishlist={this.state.in_wishlist}
                                        toggleWishlist={() =>
                                            this.toggleWishlist(item.title)
                                        }
                                        listView={this.state.listView}
                                    />
                                )}
                            />
                        )}
                    </View>
                </Content>
            </Container>
        </Root>
    );
}

And my distanceFromEnd takes values like 0 , 960,1200 when it is trigerred. What does it indicate? I'm using react-native 0.47.2

Answer 1

I have same problem with RN 0.52

That look like because Flatlist can not found the heigh. So he can not find the end of list.

Fix by wrap your flatlist by a View with flex=1

<View style={{flex: 1}} > <Flatlist /> <View>

Answer 2

I have same problem with react-native 0.50.3

<Flatlist> must not be used in a <ScrollView> if you want to use onEndReached because Flatlist can not found the height.

Use a <View> instead

Answer 3

I would use it like this:

handleMore = () => {
    // fetch more here
};

<FlatList
    onEndReached={this.handleMore}
/>