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.