React-Native another VirtualizedList-backed container
Just in case this helps someone, this is how I fixed the error in my case.
I had a FlatList
nested inside a ScrollView
:
render() {
return (
<ScrollView>
<Text>{'My Title'}</Text>
<FlatList
data={this.state.myData}
renderItem={({ item }) => {
return <p>{item.name}</p>;
}}
/>
{this.state.loading && <Text>{'Loading...'}</Text>}
</ScrollView>
);
}
and I got rid of the ScrollView
by using the FlatList
to render everything I needed, which got rid of the warning:
render() {
const getHeader = () => {
return <Text>{'My Title'}</Text>;
};
const getFooter = () => {
if (this.state.loading) {
return null;
}
return <Text>{'Loading...'}</Text>;
};
return (
<FlatList
data={this.state.myData}
renderItem={({ item }) => {
return <p>{item.name}</p>;
}}
ListHeaderComponent={getHeader}
ListFooterComponent={getFooter}
/>
);
}
If someone's still looking for a suggestion to the problem that @Ponleu and @David Schilling have described here (regarding content that goes above the FlatList), then this is the approach I took:
<SafeAreaView style={{flex: 1}}>
<FlatList
data={data}
ListHeaderComponent={ContentThatGoesAboveTheFlatList}
ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>
You can read more about this here: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent
Hopefully it helps someone. :)