If anyone is still looking for a suggestion for the problem @Ponleu and @David Schilling have described here (regarding content going above 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 it here: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

I hope it helps someone. :)

Yes this is the solution with SafeAreaView

In case this helps anyone, 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 got rid of the ScrollView using FlatList to render everything I needed, which removed 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} /> ); }

The best way is to disable that warning because sometimes Flatlist need to be in ScrollView.

UPDATE RN V0.63 ABOVE

YellowBox is now changed and replace with LogBox

FUNCTIONAL

import React, { useEffect } from 'react';
import { LogBox } from 'react-native';

useEffect(() => {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])

CLASS BASED

import React from 'react';
import { LogBox } from 'react-native';

componentDidMount() {
    LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}

UPDATE RN V0.63 BELOW

FUNCTIONAL

import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';

useEffect(() => {
    YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}, [])

CLASS BASED

import React from 'react';
import { YellowBox } from 'react-native';

componentDidMount() {
    YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
}