Reputation: 867
My container is a scrollview and inside it is a flatlist, which load data from server.
The flatlist:
<VirtualizedList
ListEmptyComponent={<NoData />}
data={data}
getItem={(items, index) => items.get(index)}
getItemCount={(items) => items.size}
keyExtractor={(item, index) => String(index)}
renderItem={this._renderItem}
refreshControl={
<RefreshControl
refreshing={loading}
onRefresh={this._onRefresh.bind(this)}
/>
}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.1}
onMomentumScrollBegin={() => {
Log('onMomentumScrollBegin fired!')
this.onEndReachedCalledDuringMomentum = false;
}}
/>
which handleLoadMore
is:
handleLoadMore = () => {
Log('handleLoadMore fired!');
if (!this.onEndReachedCalledDuringMomentum) {
// fetch data..
this.onEndReachedCalledDuringMomentum = true;
}
}
The problem is the handleLoadMore
never called and the onMomentumScrollBegin
also never called.
How to solve this?
Upvotes: 6
Views: 7976
Reputation: 5418
Actually you don't need to use Content
or ScrollView
as FlatList has both ListFooterComponent
and ListHeaderComponent
In case you really need to use FlatList inside ScrollView
, then add style and content contentContainerStyle to your ScrollView
or if you use native-base, inside the Content
<ScrollView
...
style={{flex: 1}}
contentContainerStyle={{flex: 1}}
...
/>
Then if you want to use header component out of FlatList loop. Then use ListHeaderComponent={() => <SomeHeader />
inside Flatlist.
Upvotes: 7