Nativebase: 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.

[DoGoodMore]

+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 fix, it was by no means a solution.

[wilsonmegax]

Eu estava nesta mesma situação

retirei o 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?

[KiyotakaTheBlack]

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

[sirsuccess]

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.

[iDuuck]

I think a temporary monkey patch would be to have the content as a single item in the FlatList. Currently busy and not on the desktop, so I don’t’ have an example ready. But that would be my ideal approach so far.

Just so a conditional renderItem in the FlatList. And just add the stuff as string into the data array.

[kalzoo]

So I ran into this and was initially frustrated that I was being warned about something that seemed to work fine, even if it wasn't "optimal." Then I realized it was the right message, and the way I was using a FlatList within a ScrollView was an anti-pattern.

Like a few folks above, I have ScrollViews in which I have multiple, short, vertically stacked lists, with various content in between. Wrapping it all into a FlatList in the place of that ScrollView would be clunky and hard to reason about.

But the warning sends a good message, if it could be phrased better - "why are you using a FlatList if you're not getting the benefits of it?" As I understand it, a FlatList inside a non-VirtualizedList (such as a ScrollView) doesn't know how to choose which list items to render, and thus it renders them all, making it effectively the same as a map, but more complex.

So that gives us a couple choices:

1. Change your nested FlatList components into plain-old maps of their list items. Sure, that renders all of them at once, which in my case is what I wanted (short lists of items), and AFAICT is also what you're already getting if you're seeing this warning. Don't think (like I did) that just because there's a *List component available, that's what you should use for lists. There may be use cases for a FlatList that aren't met by a simple map, but I don't know them.
2. Do what the robot says, and change that top-level ScrollView or similar into something backed by VirtualizedList (which, in RN 0.61, is FlatList and SectionList as well as VirtualizedList itself: link), so the child VirtualizedList components can take advantage of this nested structure for optimization.
3. Ignore the warnings with YellowBox, but (a) they still clutter the console and (b) it's a valid, useful warning, so it may not be "fixed" until a VirtualizedList could get the information it needs to render from a parent ScrollView, which _could_ be never.

Good luck!

[lortmorris]

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.

Exactly!! that is the problem, when using into

[manojeeva]

What if we need to use an empty component with multiple Flatlist. It will render everything at once that is okay but we need some extra properties to show other views. How do we achieve that? Do we need to implement it manually?

[jblackvk]

Je fais face à ce problème. Je souhaite utiliser une FlatList et continuer à faire défiler d'autres contenus sur la même page.

sorry for the late and for my bad English. i think i have found the greet comportment of the flatlist component. If we need to scroll other thing that is not in flatlist we can add it with the props ListHeaderComponent, and ListFooterComponent of the flatlist component. the ListHeaderComponent can takes to parameter a function whose return the component you need to add

exemple:

setHeader= () => {
return(/* your component */)
}

)} ListHeaderComponent={this.setHeader} />

[lordjack]

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.

it worked for me, thanks for the tip. 👍 @toritsejuFO

[thekingrenz23]

The anatomy of native base told us that we should use Container Component as a wrapper for the list. the Kitchen sink also uses the Container Component as a wrapper i guess its fine to ignore the warning. Tho its a bit annoying

[anthlasserre]

Hey guys!
This happens when our view structure is like this:

<Container>
    <Content>
        <FlatList />
    </Content>
</Container>

Explained:
<Content> Component extends from KeyboardAwareScrollViewProps itself extends from ScrollViewProps of React Native.
<FlatList> Component extends inderictly from ScrollViewProps of React Native too.
So it is normal we have this warning. This is like we put a <ScrollView> in a <ScrollView>. So it doesn't really recommanded and compatible.

The best way is to replace our <Content> Component by <View style={{ flex: 1 }}> like this:

<Container>
    <View style={{ flex: 1 }}>
        <FlatList />
    </View>
</Container>

For me it works like a charm 🚀.
Cheers 🍻

[lylest]

f*k who bought these new shit, things were just fine with a flat list inside scroll view why did they change it

[tspike]

My workaround for this is monkey patching <Content> to use KeyboardAwareView (https://www.npmjs.com/package/react-native-keyboard-aware-view) instead of KeyboardAwareScrollView like so:

https://gist.github.com/tspike/71b716edd4c8c138783e2d1040d8193b

... then using it like:

      <Container>
        <Header>
          <Left />
          <Body>
            <Title>My Title</Title>
          </Body>
          <Right />
        </Header>
        <FlatlistContent>
          <FlatList>
            ...
          </FlatList>
        </FlatlistContent>
      </Container>

Caveat: this will break theming or custom styling for <Content>, but it works for my use case to get rid of the warning and preserve the nice padding properties of <Content>.

[Florianer]

Hey there!
I'm also playing around and come across this issue. I have in my App.js the SafeAreaProvider, found it smart to add the KeyboardAwareScrollView and then the AppContainer. This is holding some Views and then the FlatList.
I read all the comments here and I can totally understand, that the "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead." warning is there for a reason and as pointed out, nested ScrollViews are a bad practise for the performance optimization.

First: I still don't know what "use another VirtualizedList-backed container instead." should mean and what I need to do.
Second: I get the point with the not re-usability, if I put outside elements now in the ListHeaderComponent. But I removed the KeyboardAwareScrollView and the warning is gone. But this now introduces a already solved issue: Clicking in an Input inside the FlatList opens up the keyboard. Assuming, that the list is long enough, the keyboard will overlay the input, causing it to lose the focus causing the keyboard to fade out. keyboardDismissMode={'none'} also wasn't of a help here. It's looking like https://stackoverflow.com/questions/56348262/textinput-inside-a-flatlist-loses-focus-when-off-screen and the preferred solution for this behavior is to put the FlatList inside a ScrollView. Hooray. That brings me back to the nested-warning. Also https://stackoverflow.com/questions/58243680/react-native-another-virtualizedlist-backed-container is not helping there.

I thought, maybe clicking on in Input that will be covered by the keyboard, is not rendered anymore and removed, causing the focus lose. So I can trick the system by windowSize or so. No effect. I can now either live with the keyboard messing around the FlatList or nesting the FlatList back into a ScrollView and getting the warning back.
Or: Any of you can brighten me and point me into a new direction or tell me a solution.

I'm on

• "expo": "^37.0.4",
• "react-native-keyboard-aware-scroll-view": "^0.9.1",
• android emulator

Oh, and btw: I added a test Input after the FlatList and clicking in there moves it directly over the keyboard area (caused by the page's container having a flex: 1. Replacing it with e. g. height: 500 fixes the nested-warning AND the losing focus issue with the downside, that the keyboard is now covering the last Inputs, so that I cannot see my text, until I close the keyboard.

Yeah… I know. Pretty long text. I hoped to find a solution while explaining it, but meeeh… maybe you guys have an idea now.

[pygd-ysb]

Hi guys.
I think, I found a solution.

Put everything in Flatlist. (Even if it's another FlatList)

<Container>
  <Header>...</Header>
  <FlatList
    style={{ width: '100%' }}
    nestedScrollEnabled
    data={['filter', 'title1', 'list1', 'title2', 'list2']}
    keyExtractor={(data) => data}
    renderItem={({ item, index }) => {
      switch (index) {
        case 0:
          return <SearchFilterCard />;
        case 1:
          return <Text style={styles.title}>Title1</Text>;
        case 2:
          return (
            <FlatList
              style={{ width: '100%' }}
              nestedScrollEnabled
              data={['1', '2']}
              keyExtractor={(data) => data}
              renderItem={({ item, index }) => <MyCard />}
            />
          );
        case 3:
          return <Text style={styles.title}>Title2</Text>;
        case 4:
          return (
            <FlatList
              style={{ width: '100%' }}
              nestedScrollEnabled
              data={['3', '4', '5']}
              keyExtractor={(data) => data}
              renderItem={({ item, index }) => <MyCard />}
            />
          );

        default:
          return null;
      }
    }}
  />
</Container>

Result:

No Error, no warning.
thanks.

[pybuche]

Hi guys.
I think, I found a solution.

Put everything in Flatlist. (Even if it's another FlatList)

<Container>
  <Header>...</Header>
  <FlatList
    style={{ width: '100%' }}
    nestedScrollEnabled
    data={['filter', 'title1', 'list1', 'title2', 'list2']}
    keyExtractor={(data) => data}
    renderItem={({ item, index }) => {
      switch (index) {
        case 0:
          return <SearchFilterCard />;
        case 1:
          return <Text style={styles.title}>Title1</Text>;
        case 2:
          return (
            <FlatList
              style={{ width: '100%' }}
              nestedScrollEnabled
              data={['1', '2']}
              keyExtractor={(data) => data}
              renderItem={({ item, index }) => <MyCard />}
            />
          );
        case 3:
          return <Text style={styles.title}>Title2</Text>;
        case 4:
          return (
            <FlatList
              style={{ width: '100%' }}
              nestedScrollEnabled
              data={['3', '4', '5']}
              keyExtractor={(data) => data}
              renderItem={({ item, index }) => <MyCard />}
            />
          );

        default:
          return null;
      }
    }}
  />
</Container>

Result:

No Error, no warning.
thanks.

@pygd-ysb the question is: does it lazy load your nested flatlist items ? :)
Because in itself the warning in annoying (in Dev) but not problematic !

[lifekaizen]

Switching to FlatList and removing Content worked for me with "Pull to Refresh" functionality. Had to update a few props (dataArray -> data, renderRow -> renderItem); code below.

@pygd-ysb the question is: does it lazy load your nested flatlist items ? :)

It does seem to lazy load; if I scroll down quickly white space is briefly displayed before the rows display. It's more responsive than before.

import { StyleSheet, RefreshControl, FlatList } from 'react-native';
import { Button, Container, Header, ListItem, Text } from 'native-base';
...
      <Container>
        <Header><Text>Header</Text></Header>
            <FlatList
              nestedScrollEnabled
              refreshControl={<RefreshControl
                refreshing={isFetching}
                onRefresh={this.handleRefresh} />}
              data={items}
              keyExtractor={(item, index) => index.toString()}
              renderItem={({item, index, separators}) => (
                <ListItem>
                  {item.type == 'button' ?
                    <Button transparent onPress={item.onPress}>
                      <Text>{item.name}</Text>
                    </Button> :
                    <Text>
                      {item.name}: {!item.value ?
                        '--' :
                        typeof item.value == "number" ?
                        item.value.toFixed() + ' ' + item.suffix :
                        item.value + ' ' + item.suffix
                      }
                      </Text>
                    }
                </ListItem>
                )
              } />
      </Container>
...

[leninsheikh]

This error message pretty simple but what not simple is why this error occur ? and how to fix it properly?

So main reason we want to use a FlatList inside a ScrollView when we need a header or a footer for a FlatList which also should be scrollable.

Why this error occurred?

Benefits of FlatList is it only renders the content that is currently visible in the window unlike ScrollView. But if we use FlatList inside a ScrollView , we will not get this benefit.

How to Fix it ?

Let say this component is giving you warning

const App= () => {
  return (
    <ScrollView>
        <Text style={{ fontSize: 25 }}>Header Title</Text>
      <Text>Subtitle</Text>
      <FlatList
        data={someListArray}
        renderItem={<SomeRenderComponent />}
      />
      <SomeFooter/>
    </ScrollView>
  );
};

convert that code to this :

const App= () => {
  return (
    <FlatList
      LisHeaderComponent={
      <>
        <Text style={{ fontSize: 25 }}>Header Title</Text>
        <Text>Subtitle</Text>
      </>}
      data={someListArray}
      renderItem={<SomeRenderComponent />}
      ListFooterComponent={
        <SomeFooter/>
      }/>
  );
};

[loyoliteabid]

For me this error occurs when using <FlatList /> inside native-base <Content />. The error still there even after upgrading "native-base": "^2.13.12" to latest version.

[siddesh94]

in my case
i had called inside
i removed the Scrollview and it worked for me

[Loche123]

I removed all my components, and rendered them using methods, and kept the flatlist as is. This fixed my problem

[Carly509]

This is not a bug. FlatLists inside of ScrollViews with the same direction (a horizontal FlatList inside a vertical ScrollView is not an issue) will render all of the items at once and can’t be virtualized. So you can have a FlatList inside a ScrollView but all the performance benefits will be worthless as they’re not working.

[bravemaster619]

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</Text>
  <FlatList 
    data={data}
    keyExtractor={keyExtractor}
    renderItem={({item}) => <Item data={item} />}
    onRefresh={refetch}
    refreshing={loading}
    onEndReached={concatData}
  />
</VirtualizedView>

This will show scrollbar when you rotate your iPhone, and also remove warning message and performance will be saved without any problem.

[emclab]

same problem when using draggable list inside <Content>

[pierol]

I've a Picker component inside a . Everytime i click on the picker the warning "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead."
came up. I suspect that is a problem of the Picker component itself because the warning fire up on the screen where i should select the option.

RN 0.62.2
React: 16.11
native-base: 2.13.13
Expo SDK: 38

[jalexandremoreira]

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

Frankly this seems like the better solution.

[pierol]

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

Frankly this seems like the better solution.

Could you make a code example of using .map. I'm using Picker component.

[jalexandremoreira]

I don't know exactly what that component looks like, but where you would have a flatlist, like:
<FlatList data={array} keyExtractor={(element) => element.id.toString()} renderItem={({ element}) => ( <Image source={{ uri: element.url, }} /> )} />

(for instance). You would replace this with:

{array.map((element) => ( <Image source={{ uri: element.url, }} /> ))}

[hs-digid]

I have the same issue @pierol currently has.
Getting the warning VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead., when I have a code like the following.

<Item picker>
  <Picker
    selectedValue={gender}
    onValueChange={(selected) => {
      setGender(selected);
    }}
  >
    <Picker.Item label="Female" value={Gender.Female} />
    <Picker.Item label="Male" value={Gender.Male} />
    <Picker.Item label="Other" value={Gender.Other} />
  </Picker>
</Item>

RN: 0.63.2
React: 16.13.1
native-base: 2.13.14

[wisletmichel]

seems <Content> has some scroll view in it, removing <Content> solves the issue

[blackgeneration]

Hello everyone my code was something like this

<ScrollView>
       {/* Some FlatList here */}
</ScrollView>

It threw the Nested VirtualizedLists Warning

HOW I FIXED IT:

I replaced:

<ScrollView>
       {/* Some FlatList here */}
</ScrollView>

With:

<View>
       {/* Some FlatList here */}
</View>

And like poop :D:D:D the warning was flushed away.

[blackgeneration]

seems <Content> has some scroll view in it, removing <Content> solves the issue

Yeah because i removed scrollview the warning went away

[rmnegatives]

This error message pretty simple but what not simple is why this error occur ? and how to fix it properly?

So main reason we want to use a FlatList inside a ScrollView when we need a header or a footer for a FlatList which also should be scrollable.

Why this error occurred?

Benefits of FlatList is it only renders the content that is currently visible in the window unlike ScrollView. But if we use FlatList inside a ScrollView , we will not get this benefit.

How to Fix it ?

Let say this component is giving you warning

const App= () => {
  return (
    <ScrollView>
        <Text style={{ fontSize: 25 }}>Header Title</Text>
      <Text>Subtitle</Text>
      <FlatList
        data={someListArray}
        renderItem={<SomeRenderComponent />}
      />
      <SomeFooter/>
    </ScrollView>
  );
};

convert that code to this :

const App= () => {
  return (
    <FlatList
      LisHeaderComponent={
      <>
        <Text style={{ fontSize: 25 }}>Header Title</Text>
        <Text>Subtitle</Text>
      </>}
      data={someListArray}
      renderItem={<SomeRenderComponent />}
      ListFooterComponent={
        <SomeFooter/>
      }/>
  );
};

Honestly I had to scrap the content and follow this. Basically flat list with flat list is fine like suggested above.
So my renderItem renders Card (FlatList behind the scenes)

[avlonder]

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</Text>
  <FlatList 
    data={data}
    keyExtractor={keyExtractor}
    renderItem={({item}) => <Item data={item} />}
    onRefresh={refetch}
    refreshing={loading}
    onEndReached={concatData}
  />
</VirtualizedView>

This will show scrollbar when you rotate your iPhone, and also remove warning message and performance will be saved without any problem.

Thanks!
One remark: I had to insert a component instead of a function in ListHeaderComponent.
Are you sure that the performance of the nested FlatLists is preserved this way?
Or is this just a workaround to avoid the warning?

[khaja-nizamuddin1]

I'm using Native base's Picker component and rendering using .map:
Tried everything the Internet has suggested!! Didn't get it fixed yet

<Item rounded style={{marginBottom:20}}>
    <Picker selectedValue={this.state.district} onValueChange={(val)=>this.setDistrict(val)}>
        <Picker.Item label='Select District' value='0'/>  
         {this.state.districtsList.map((item,index) => {
            return (<Picker.Item label={item.name} value={item.id} key={index+1}/>) //if you have a bunch of keys value pair
         })}
    </Picker>
</Item>

[KhimGurung]

@khaja-nizamuddin1 @hs-digid @pierol I am having the same issue, mapping picker item in picker. I am using picker from native base. Any solution?

[khaja-nizamuddin1]

@KhimGurung I stopped using Picker from Native base and used React Native's instead
There's little problem here -
Picker works great in iPhone with little space adjustments - but consumes lot of space, can't fit more than 3 pickers in a screen

This way warnings are gone!

[dayanaohhnana]

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</Text>
  <FlatList 
    data={data}
    keyExtractor={keyExtractor}
    renderItem={({item}) => <Item data={item} />}
    onRefresh={refetch}
    refreshing={loading}
    onEndReached={concatData}
  />
</VirtualizedView>

This will show scrollbar when you rotate your iPhone, and also remove warning message and performance will be saved without any problem.

Thank you!. This works for me. Cheers!

[mgiorgi-github]

I've a Picker component and i see this warning when open it... how can I solve?
I've last native-base version...

[erikbrgr]

As several people have already mentioned the warning is caused by the use of KeyboardAwareScrollView by <Content>. Just removing <Content> is a poor solution as it also gets rid of the SafeAreaView (and some styling).

Personally, I love the "monkey patch" solution by @tspike

My workaround for this is monkey patching <Content> to use KeyboardAwareView (https://www.npmjs.com/package/react-native-keyboard-aware-view) instead of KeyboardAwareScrollView like so:

https://gist.github.com/tspike/71b716edd4c8c138783e2d1040d8193b

Would it be an idea to make this official and put a prop on <Content> that will make it use KeyboardAwareView over KeyboardAwareScrollView? This would cater for all needs and (hopefully, haven't tested it) keep everything else intact.

I wouldn't mind putting in a PR for this if we can agree it's a decent solution.