React-native: When FlatList wrapped inside ScollView , onEndReached doesnt work expected.

[swati-kholiya]

• [ ] Review the documentation: https://facebook.github.io/react-native
• [ ] Search for existing issues: https://github.com/facebook/react-native/issues
• [ ] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

Environment:
OS: Linux 4.10
Node: 10.10.0
Yarn: 1.9.4
npm: 6.4.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz => 0.55.2

Description

I have a multiple views that are wrapped inside ScrollView so that everthing gets scrollable. I have read that it is not recommended to use ScrollView as a parent wrapper . But I want things to be entirely scrollable together. So I see issue with onEndReached , it is invoking on load. Can any one help me with this where all components are scrollable and also flatlist pagination is done in right way.

Reproducible Demo

\\
\\
\{title}\\
\ data={this.state.people}\
renderItem={}\
keyExtractor={(item, index) => item.personId}\
onEndReached={() => {\
console.log(" On End Reached");\
this.getPeople();\
}}\
onEndReachedThreshold={0.01}\
ListFooterComponent={() => {\
if (this.state.hasNextPage)\
return ;\
else return null;\
}}\
/>\
\

[bartolkaruza]

Why not put those top views in the header?

<FlatList
data={this.state.people}
renderItem={}
keyExtractor={(item, index) => item.personId}
onEndReached={() => {
console.log(" On End Reached");
this.getPeople();
}}
onEndReachedThreshold={0.01}
ListHeaderComponent={() => (
<View>
<CoverPhoto/>
<Text>{title}</Text>
</View>
))
ListFooterComponent={() => {
if (this.state.hasNextPage)
return ;
else return null;
}}
/>

[swati-kholiya]

Why not put those top views in the header?

<FlatList
data={this.state.people}
renderItem={}
keyExtractor={(item, index) => item.personId}
onEndReached={() => {
console.log(" On End Reached");
this.getPeople();
}}
onEndReachedThreshold={0.01}
ListHeaderComponent={() => (
<View>
<CoverPhoto/>
<Text>{title}</Text>
</View>
))
ListFooterComponent={() => {
if (this.state.hasNextPage)
return ;
else return null;
}}
/>

Oh yeah!! It works :+1: My header component takes more than half of the screen and still it scrolls along with the list. Thanks @bartolkaruza

[bartolkaruza]

@kelset close :)

[vko-online]

Not solution

Header will always get re-rendered with FlatList

[Prozhou]

i think this problem should be resolve, rather than avoid.

[bartolkaruza]

The issue of the OP has been resolved entirely, where the request was to add static content above and below a Flatlist; there is a clear API for that use case, header and footer. Making a Flatlist with the same scroll direction as a ScrollView work, is not something that will be supported as it just doesn't make sense in relation to the FlatList's purpose: Virtualization of children, for which it needs a fixed height, otherwise how do you decide to stop rendering children?

If you can come up with a credible use case where you would require this, feel free to open a feature request and we can discuss the use case and implementation challenges in detail. I'm locking this issue for now, as it is completely resolved as far as I can see.