How to fix this warning: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Question

When I use FlatList component inside ScrollView I see a warning:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

Before and after FlatList I use a lot of other components and my screen is long.

I tried to wrap content with SafeAreaView and it doesn't help me, because in this case I can't scroll the content. I also tried to use ListHeaderComponent={SafeAreaView} and ListFooterComponent={SafeAreaView} in <FlatList>.

I use:

• "react": "16.9.0",
• "react-native": "0.61.5",

Answer 1

Here is a VirutalizedList -backed container implementation using FlatList:

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

export default function VirtualizedView(props: any) {
  return (
    <FlatList
      data={[]}
      ListEmptyComponent={null}
      keyExtractor={() => "dummy"}
      renderItem={null}
      ListHeaderComponent={() => (
        <React.Fragment>{props.children}</React.Fragment>
      )}
    />
  );
}

Usage:

  <VirtualizedView>
    <Text>Anything goes here, even FlatList works good</Text>
    <View style={{minHeight: 480}}> // leave enough space for better user experience
      <FlatList 
        data={data}
        keyExtractor={keyExtractor}
        renderItem={({item}) => <Item data={item} />}
        onRefresh={refetch}
        refreshing={loading}
        onEndReached={concatData}
      />
    </View>
  </VirtualizedView>

This will show scrollbar when your screen is too long and also remove the pesky warning message and performance will be saved without any problem.

Answer 2

What I've done in my case is something along the lines of this:

render() {
    return (
        <SafeAreaView style={{ flex: 1 }}>
            ...
            <ScrollView>
                ...
                <FlatList
                    scrollEnabled={false} // this line is important
                    ...
                </FlatList>
                ...
            </ScrollView>
        </SafeAreaView>
    );
}

It doesn't remove the warning, but it does work as I want it to, as I need a ScrollView and a FlatList.

Answer 3

There is a simpler solution using https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

This is only required for Android (iOS works as expected even without it).

Just make sure to enable this prop in both parent and child ScrollViews (or child FlatLists).