Nested VirtualizedLists Warning in Flatlist with <Content> Tags

[dl-husky73]

Since upgrading RN to latest I am getting a warning:

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

This error is being caused by the tag around a flatlist which worked perfectly fine before the latest upgrades.

RN: 61.1 Native Base: 2.13.8 React: 16.9.0 React Navigation: 4.0.9

This warning comes up on every flatlist as I use Content tag around my flatlist. This only started yesterday as I upgraded to latest RN from 60, and native base 2.13.8. I can remove the error by removing the Content tag.

Thoughts?

[toritsejuFO]

Getting the exact same error. And removing the Content tag works for me. I guess your question gave me my answer. Those yellow box warnings are really annoying, anything to remove them. I just don't want to see them.

[netgfx]

Same here I'm using https://github.com/i6mi6/react-native-parallax-scroll-view Is this affecting anything?

[yeong0809]

I am also facing this issue by using KeyboardAwareScrollView (vertical) and FlatList (Horizontal) in the same page

[djschilling]

I am also getting this warning a lot. What is the other VirtualizedList-backed container we should use instead?

[toritsejuFO]

Good question. Default orientation for flex containers is column. Can't be having to change one's orientation to row.

[murilokrugner]

I am also experiencing this issue using ScrollViews, what should we do?

[yarapolana]

+1 Experiencing the same thing. Just updated to the latest version of RN.

[captaincole]

+1 Not sure what they want me to replace this with.

[sudo97]

+1

[johanjmoncada]

My guessing is that it happens because you have a ScrollView inside another ScrollView. When I say scrollView I'm meaning ScrollView or FlatList

[yarapolana]

I ended up using .map for all occasions, the warning went away not sure if it is ideal though.

[Dellybro]

@yarapolana that is a very bad approach, if you have a list of 1000 items, they will all be rendered eating up a lot of your users data, using virtualized list AKA Flatlist i imagine in this case, you will be only rendering the items that fit on the screen, + 1 or 2 above or below. This ensures best practice for your end users.

[yarapolana]

@Dellybro Yeah I know and you are right, I would not use for handling this amount of data for sure. .map worked for one case and added the ignoreWarning for the other cases until something comes to light.

[lucasmedeiros]

+1 here with the same trouble

[HikkersOne]

can you write this code in the Flatlist and create a function ex (_render_item) ListHeaderComponent={this._render_Item}

(ListHeaderComponent) https://facebook.github.io/react-native/docs/flatlist

[andrefangeloni]

My guessing is that it happens because you have a ScrollView inside another ScrollView. When I say scrollView I'm meaning ScrollView or FlatList

That's correct. I was using a SectionList inside a ScrollView, but this is wrong, because SectionList is a ScrollView too, so I removed the ScrollView tag and SectionList did the work!

[sjonchhe]

This problem usually persist when we try to use Flatlist inside a ScrollView. In the previous version this wasnt a issue, but after 0.61 this issue has been seen.Is there any workaround for solving this?? (ps:Workaround without styling the flatlist)

[andrefangeloni]

This problem usually persist when we try to use Flatlist inside a ScrollView. In the previous version this wasnt a issue, but after 0.61 this issue has been seen.Is there any workaround for solving this?? (ps:Workaround without styling the flatlist)

FlatList should not be used inside a ScrollView with the same orientation, please paste your code here, maybe I can help you.

[djschilling]

@andrefangeloni Can you explain why FlatList should not be inside ScrollView with the same orientation?

I know this warning, but noone could really explain why.

[andrefangeloni]

@andrefangeloni Can you explain why FlatList should not be inside ScrollView with the same orientation?

I know this warning, but noone could really explain why.

@djschilling Because FlatList do the same thing that ScrollView, it's redundant. Using only FlatList expected to resolve your problem.

[httol]

@andrefangeloni Can you explain why FlatList should not be inside ScrollView with the same orientation? I know this warning, but noone could really explain why.

@djschilling Because FlatList do the same thing that ScrollView, it's redundant. Using only FlatList expected to resolve your problem.

But what if I want to add some additional components outside of the FlatList and must scrollable, how can I do?

[thyagobrejao]

@andrefangeloni Can you explain why FlatList should not be inside ScrollView with the same orientation? I know this warning, but noone could really explain why.

@djschilling Because FlatList do the same thing that ScrollView, it's redundant. Using only FlatList expected to resolve your problem.

But what if I want to add some additional components outside of the FlatList and must scrollable, how can I do?

I'm having the same problem

[Aung-Myint-Thein]

I think this whole thing is happening because we are using <Content> for the whole body and then inside the body, we might have <FlatList>. So, we may need to find a way how to use this format without getting the warning.

[xyz-zz]

+1 And this caused me the behavior of loading data crazy at the beginning of the interface. Currently I deleted Content to temporarily stop it.

[thyagobrejao]

I think this whole thing is happening because we are using <Content> for the whole body and then inside the body, we might have <FlatList>. So, we may need to find a way how to use this format without getting the warning.

I have 3 FlatList inside Content... I only need to scroll the Content...

[timothystewart6]

If you aren't concerned with this warning and just want to ignore it (until it is fixed) just do this.

import { YellowBox } from 'react-native'

YellowBox.ignoreWarnings([
  'VirtualizedLists should never be nested', // TODO: Remove when fixed
])

It will disable this warning for good. 👋 Remove it when fixed.

EDIT 👀👀👀👀👀👀👀👀👀👀👀👀

Thanks for all the reactions! This means people care. To be clear this was just a workaround until the real issue was fixed, it was by no means a solution.

[wilsonmegax]

Eu estava nesta mesma situação

retirei o <ScroolView e ficou assim <FlatList ai deu certo porque a propria lista ja tem a barra de rolagem

[SSTPIERRE2]

So, if this is discouraged, what would you suggest to use to build some UI where there are multiple FlatLists on one screen? Suppose the FlatLists are stacked vertically, and together overflow the screen (thus the parent screen must be a ScrollView of some sort, right?).

[bijomon-tolexo]

I have a weird issue, in my case I have a component below the FlatList which needs to be scrolled after finishing FlatList. So in order to do that I used Content as a wrapper to both.

Now what happens is when Content is wrapped on FlatList(having data of 100+ list) the features of FlatList like render items on scroll stops working making the page freeze.

I am stuck with my app release due to this, please guide me with a solution.

[ramonvermeulen]

Having this same issue where I use a FlatList for a Picker component inside a ScrollView. I used @timothystewart6 solution to disable this warning. But isn't there any better solution? Is it really that bad to use a FlatList inside a ScrollView? What is the best way to have scrollable content within scrollable content?

[kiyotaka4946g]

Accordion example is got a same warning. https://docs.nativebase.io/Components.html#accordion-def-headref

[Delwalt]

@andrefangeloni Can you explain why FlatList should not be inside ScrollView with the same orientation? I know this warning, but noone could really explain why.

@djschilling Because FlatList do the same thing that ScrollView, it's redundant. Using only FlatList expected to resolve your problem.

But what if I want to add some additional components outside of the FlatList and must scrollable, how can I do?

Hi @httol I was also having the same warning while implementing the same setup Scrollview with some data and then Flatlist and I also wanted the screen to scroll.

What I did is the component which I wanted to render outside the flatlist I included that inside the ListHeaderComponent and removed the Scrollview component. Now its working fine without any warning.

Below is the previous code:

<ScrollView >
           <ReadCard data={this.state.data}/>
           <FlatList
                      data={this.state.data.related}
                       keyExtractor={this._keyExtractor}
                       renderItem={this._renderItem}
                       ItemSeparatorComponent={ListSeprator}
                  />
</ScrollView>

Below is the changed code without any warning:

<FlatList
               data={this.state.data.related}
               keyExtractor={this._keyExtractor}
               renderItem={this._renderItem}
               ItemSeparatorComponent={ListSeprator}
               ListHeaderComponent={
                    <ReadCard data={this.state.data}/>
               }
/>

I hope it helps.

[httol]

@andrefangeloni Can you explain why FlatList should not be inside ScrollView with the same orientation? I know this warning, but noone could really explain why.

@djschilling Because FlatList do the same thing that ScrollView, it's redundant. Using only FlatList expected to resolve your problem.

But what if I want to add some additional components outside of the FlatList and must scrollable, how can I do?

Hi @httol I was also having the same warning while implementing the same setup Scrollview with some data and then Flatlist and I also wanted the screen to scroll.

What I did is the component which I wanted to render outside the flatlist I included that inside the ListHeaderComponent and removed the Scrollview component. Now its working fine without any warning.

Below is the previous code:

<ScrollView >
           <ReadCard data={this.state.data}/>
           <FlatList
                      data={this.state.data.related}
                       keyExtractor={this._keyExtractor}
                       renderItem={this._renderItem}
                       ItemSeparatorComponent={ListSeprator}
                  />
</ScrollView>

Below is the changed code without any warning:

<FlatList
               data={this.state.data.related}
               keyExtractor={this._keyExtractor}
               renderItem={this._renderItem}
               ItemSeparatorComponent={ListSeprator}
               ListHeaderComponent={
                    <ReadCard data={this.state.data}/>
               }
/>

I hope it helps.

Thx! Maybe in some scene, it's a good solution！Just for if I have one head or one footer. But if FlatList inside ScrollView is not good support towards officials. Maybe, It's not a good choice! After all, it's not compatible in all scene.

[ramonvermeulen]

@andrefangeloni Can you explain why FlatList should not be inside ScrollView with the same orientation? I know this warning, but noone could really explain why.

@djschilling Because FlatList do the same thing that ScrollView, it's redundant. Using only FlatList expected to resolve your problem.

But what if I want to add some additional components outside of the FlatList and must scrollable, how can I do?

Hi @httol I was also having the same warning while implementing the same setup Scrollview with some data and then Flatlist and I also wanted the screen to scroll. What I did is the component which I wanted to render outside the flatlist I included that inside the ListHeaderComponent and removed the Scrollview component. Now its working fine without any warning. Below is the previous code:

<ScrollView >
           <ReadCard data={this.state.data}/>
           <FlatList
                      data={this.state.data.related}
                       keyExtractor={this._keyExtractor}
                       renderItem={this._renderItem}
                       ItemSeparatorComponent={ListSeprator}
                  />
</ScrollView>

Below is the changed code without any warning:

<FlatList
               data={this.state.data.related}
               keyExtractor={this._keyExtractor}
               renderItem={this._renderItem}
               ItemSeparatorComponent={ListSeprator}
               ListHeaderComponent={
                    <ReadCard data={this.state.data}/>
               }
/>

I hope it helps.

Thx! Maybe in some scene, it's a good solution！Just for if I have one head or one footer. But if FlatList inside ScrollView is not good support towards officials. Maybe, It's not a good choice! After all, it's not compatible in all scene.

I know the ListHeaderComponent and it is quite useful for a lot of cases. But what if I want for example a custom scrollable Picker input component inside a ScrollView? Then you basically get something like ScrollView as main view with an CustomPickerInput inside it which has another ScrollView in itself. And you will receive this warning. Isn't there any other solution for scrollable content within scrollable content.

[alom2]

And when u need for example, a button at the end of the view witch follows the keyboard with a flat list above whats the best approach, i'm using <KeyboardAwareScrollView> with a FlatList inside.

[badbod99]

This makes for a horrible component hierarchy. You have a list that uses a FlatList, you want to put it on a screen, and you want that whole screen to be scrollable. If you have to use the Header and Footer components of FlatList, your component needs to know about everything else on that screen. You can no longer have a reusable component to use on multiple screens.

[dvester]

I agree, this warning on the FlatList when we are using a parent as the scroll container. I'm not nesting the items above the FlatList inside of the FlatList header component as that is poor design in many circumstances. Can you just not disable the warning when scrollEnabled: false is set on the FlatList component?

[sachinshettigar]

Accordion example is got a same warning. https://docs.nativebase.io/Components.html#accordion-def-headref

I have the same issue. Implementation of accordion uses flatList, so the issue is still because of the nested virtualizedList. I tried to disableVirtualization on the accordion but it didn't work.

Has anyone figured out a solution yet??

[Egizas]

Is there no other way of having FlatList inside ScrollView without using "ListHeaderComponent". I have a long FlatList of images that is first of all nested under partial screen tabs, and second of all is only in 1 out of 2 columns. Appending header adds it inside of the column... Also there are refresh issues with ListHeaderComponent.

[vinhnglx]

@Delwalt thank you so much :)

[sagarrs]

hey @andrefangeloni , i am having this issue can you please help me out ? https://github.com/archriss/react-native-snap-carousel/issues/641

here is expo snack to recreate the issue https://snack.expo.io/@sagar293/flatlist-inside-scrollview

[RiatIO]

I agree, this warning on the FlatList when we are using a parent as the scroll container. I'm not nesting the items above the FlatList inside of the FlatList header component as that is poor design in many circumstances. Can you just not disable the warning when scrollEnabled: false is set on the FlatList component?

^ This should be implemented

[Amani-mufin]

the problem is that your are using a scrowView inside a scrowView.

[dvester]

No, a FlatList is a repeating list of components, the fact that it also has a ScrollView internally is clearly an additional OPTIONAL feature since it can be disabled with an exposed prop. We are one conditional away from this issue being closed.

[iduuck]

I agree, this warning on the FlatList when we are using a parent as the scroll container. I'm not nesting the items above the FlatList inside of the FlatList header component as that is poor design in many circumstances. Can you just not disable the warning when scrollEnabled: false is set on the FlatList component?

^ This should be implemented

No, it shouldn't. The warning is a warning for a specific cause. If you are nesting the FlatList into a normal ScrollView you are not using the performance optimization of FlatList since all the content of the FlatList is rendered immediately. Hence you will have a super bad performance, when you have ~50-200 columns minimum (depending on the content of the columns).

The best way is to use the ListHeaderComponent or ListFooterComponent prop, which FlatList offers. Or try to wrap FlatList into another VirtualizedList-backed container, as the warning says.

[badbod99]

What is the alternative VirtualizedList-backed container to use in this case? I want all the functionality of FlatList but I want my whole page to scroll, not just the FlatList. My FlatList is one component on my page of many. I may even have 2 FlatList on the page. The only alternative I can find it to use .map

[iduuck]

Wow, didn’t thought that the comment which is the most helpful (but actually not the one people want to hear) answer, get’s downvoted so often.

@badbod99 I will eventually write a blog post about this issue, when I have the time, until then: Could you provide me with a rough sketch of your page you want to achieve and I am glad to help you via email: nick at kreativgebiet dot com

[RiatIO]

I agree, this warning on the FlatList when we are using a parent as the scroll container. I'm not nesting the items above the FlatList inside of the FlatList header component as that is poor design in many circumstances. Can you just not disable the warning when scrollEnabled: false is set on the FlatList component?

^ This should be implemented

No, it shouldn't. The warning is a warning for a specific cause. If you are nesting the FlatList into a normal ScrollView you are not using the performance optimization of FlatList since all the content of the FlatList is rendered immediately. Hence you will have a super bad performance, when you have ~50-200 columns minimum (depending on the content of the columns).

The best way is to use the ListHeaderComponent or ListFooterComponent prop, which FlatList offers. Or try to wrap FlatList into another VirtualizedList-backed container, as the warning says.

Well, of course, that makes sense. However, there are certain use-cases that cannot be fulfilled without nesting FlatList/ScrollView's - and I suggest you to research that before you write a blog post regarding this matter.

As for my case, I have a ScrollView with mostly "static" content. However, within this ScrollView I utilize a library-component that apparently is implemented with ListView. So, without having to split the ScrollView, I'd prefer to flag that library-component with 'scrollEnabled: false', and then have the warning to disappear.

[jblackvk]

Je suppose que cela se produit parce que vous avez un ScrollView dans un autre ScrollView. Quand je dis scrollView, je veux dire ScrollView ou FlatList

C'est correct. J'utilisais une SectionList dans un ScrollView, mais c'est faux, car SectionList est aussi un ScrollView, j'ai donc supprimé la balise ScrollView et SectionList a fait le travail!

le probleme es

This problem usually persist when we try to use Flatlist inside a ScrollView. In the previous version this wasnt a issue, but after 0.61 this issue has been seen.Is there any workaround for solving this?? (ps:Workaround without styling the flatlist)

the FlatList is not the only object that we want to make scrollable on the page...

[AndersonSchmidt]

I'm facing this problem. I want to use a FlatList and still scroll other content on the same page.