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

Actually as I know, using nested VirtualizedLists, caused always performance issues, just the warning to that issue is new. I tried everything I found on the internet, non of them helped. I use now ScrollView or when you just have a normall View with maxHeight then you will be able to scroll if the content-height is bigger then the maxHeight of you View. So:

<ScrollView>
   {items.map((item, index) =>
       <YourComponent key={index} item={item} />
   )}
</ScrollView>

Or just:

<View style={{maxHeight: MAX_HEIGHT}}>
    {items.map((item, index) =>
       <YourComponent key={index} item={item} />
    )}
</View>

Answer 2

I had the same issue, and just got rid of it by removing the ScrollView around the FlatList. Because by default FlatList provides Scroll Functionality based on the length of content that it renders.

Answer 3

If someone's still looking for a suggestion to the problem that @Ponleu and @David Schilling have described here (regarding content that goes above the FlatList), then this is the approach I took:

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

You can read more about this here: https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

Hopefully it helps someone. :)

Answer 4

I tried some ways to solve this, including ListHeaderComponent or ListFooterComponent, but it all didn't fit for me.

layout I wanted to achieve is like this, and I wanted to get scrolled in once.

<ScrollView>
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />
</ScrollView>

First I want to say thanks to this issue and comments, which gave me bunch of ideas.

I was thinking of ListHeaderComponent places above the Flatlist, but since my Flatlist's direction was column, the header I wanted to place went on the left of the Flatlist :(

Then I had to try on VirtualizedList-backed thing. I just tried to pack all components in VirtualizedList, where renderItems gives index and there I could pass components conditionally to renderItems.

I could have worked this with Flatlist, but I haven't tried yet.
Finally it looks like this.

<View>
  <Virtualizedlist
    data={[]}
    initialNumToRender={1}
    renderItem={(props)=>{
      props.index===0 ? (1st view here) : props.index===1 ? (2nd view here) : (my flatlist)
    }}
    keyExtractor={item => item.key}
    getItemCount={2}
    getItem={ (data, index) => {
      return {
        id: Math.random().toString(12).substring(0),
      }
    }}
  />
</View>

(inside which lazyly renders↓)
  <View>I'm the first view</View>
  <View>I'm the second view</View>
  <MyFlatList />  

and of course able to scroll the whole screen.

Answer 5

This error disappeared because of using FlatList inside ScrollView. You can write like the following code.

<SafeAreaView style={styles.container}>
            <View style={styles.container}>
              <View>
                <Header />
              </View>

                {(list.length == 0) &&
                  <View style={{flex:1, margin: 15}}>
                    <Text style={{textAlign: 'center'}}>No peripherals</Text>
                  </View>
                }
                <FlatList 
                  data={list}
                  renderItem={({ item }) => this.renderItem(item) }
                  keyExtractor={item => item.id}
                />
            </View>
          </SafeAreaView>

Answer 6

In my case, I needed to have FlatLists nested in a ScrollView because I am using react-native-draggable-flatlist to move ingredients and steps around in a recipe.

If we read the warning properly, it says that we should use another VirtualizedList-backed container to nest our child FlatList in. What I did is:

 /* outside the component */
const emptyArry = []

/* render */
 <FlatList
    scrollEnabled={false}
    horizontal
    data={emptyArray}
    ListEmptyComponent=(<DraggableList />)
  />

No more warning, and I think this is the pattern recommended by the warning.