React-Native another VirtualizedList-backed container

Question

After upgrading to react-native 0.61 i get a lot of warnings like that:

VirtualizedLists should never be nested inside plain ScrollViews with the same orient         


        

Answer 1

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 (
        
            {'My Title'}
             {
                    return 
{item.name}
;
                }}
            />
            {this.state.loading && {'Loading...'}}
        
    );
}

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 {'My Title'};
    };

    const getFooter = () => {
        if (this.state.loading) {
            return null;
        }
        return {'Loading...'};
    };

    return (
         {
                return 
{item.name}
;
            }}
            ListHeaderComponent={getHeader}
            ListFooterComponent={getFooter}
        />
    );
}