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

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).

Answer 3

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.