Si alguien todavía está buscando una sugerencia para el problema que @Ponleu y @David Schilling han descrito aquí (con respecto al contenido que va por encima de FlatList), entonces este es el enfoque que tomé:

 <SafeAreaView style={{flex: 1}}> <FlatList data={data} ListHeaderComponent={ContentThatGoesAboveTheFlatList} ListFooterComponent={ContentThatGoesBelowTheFlatList} /></SafeAreaView>

Puede leer más sobre esto aquí: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Espero que ayude a alguien. :)

Si esta es la solucion con SafeAreaView

En caso de que esto ayude a alguien, así es como solucioné el error en mi caso.

Tenía una FlatList anidada dentro de 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> ); }

y me deshice de ScrollView usando FlatList para representar todo lo que necesitaba, lo que eliminó la advertencia:

 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} /> ); }

La mejor manera es deshabilitar esa advertencia porque, a veces Flatlist debe estar en ScrollView .

ACTUALIZAR RN V0.63 ARRIBA

YellowBox ahora se cambia y reemplaza con LogBox

FUNCIONAL

 import React, { useEffect } from 'react'; import { LogBox } from 'react-native'; useEffect(() => { LogBox.ignoreLogs(['VirtualizedLists should never be nested']); }, [])

BASADO EN CLASE

 import React from 'react'; import { LogBox } from 'react-native'; componentDidMount() { LogBox.ignoreLogs(['VirtualizedLists should never be nested']); }

ACTUALIZAR RN V0.63 ABAJO

FUNCIONAL

 import React, { useEffect } from 'react'; import { YellowBox } from 'react-native'; useEffect(() => { YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']); }, [])

BASADO EN CLASE

 import React from 'react'; import { YellowBox } from 'react-native'; componentDidMount() { YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']); }