Nested VirtualizedLists Warning in Flatlist with <Content> Tags #2947

dl-husky73 · 2019-09-26T13:23:57Z

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 · 2019-09-26T23:32:27Z

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 · 2019-10-02T07:55:50Z

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

yeong0809 · 2019-10-02T08:20:11Z

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

djschilling · 2019-10-04T22:06:50Z

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

toritsejuFO · 2019-10-05T00:23:12Z

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

murilokrugner · 2019-10-05T00:24:37Z

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

yarapolana · 2019-10-05T21:21:25Z

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

captaincole · 2019-10-06T19:47:54Z

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

sudo97 · 2019-10-07T19:59:33Z

+1

johanjmoncada · 2019-10-11T18:39:50Z

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 · 2019-10-11T18:47:51Z

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

Dellybro · 2019-10-16T22:19:10Z

@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 · 2019-10-16T22:33:42Z

@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 · 2019-10-17T16:52:52Z

+1 here with the same trouble

HikkersOne · 2019-10-19T19:11:41Z

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 · 2019-10-20T23:39:18Z

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 · 2019-10-23T05:42:00Z

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 · 2019-10-23T23:38:46Z

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 · 2019-10-24T06:35:02Z

@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 · 2019-10-24T19:31:51Z

@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 · 2019-10-28T03:33:43Z

@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 · 2019-10-28T21:27:31Z

@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 · 2019-10-29T03:17:46Z

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 · 2019-10-29T17:35:17Z

+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 · 2019-10-29T17:57:02Z

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 · 2019-11-04T02:51:24Z

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 · 2019-11-18T00:29:06Z

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 · 2019-11-18T17:21:39Z

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 · 2019-11-19T15:16:22Z

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 · 2019-11-22T09:36:09Z

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?

erikbrgr · 2020-12-03T08:33:06Z

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.

TomBerriot · 2020-12-30T08:27:03Z

I get this error when using Picker.ios.js.
It seems to me to be caused by the use of FlatList inside a Content component (using a KeyboardAwareScrollView itself).

emyduke · 2021-01-26T15:35:14Z

@dayanaohhnana answer worked very well for me
here is my implementation

`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>
)}
/>
);
}`

emyduke · 2021-01-26T15:40:21Z

USAGE:

emyduke · 2021-01-26T15:40:37Z

return ( <Container> <VirtualizedView> <Content> <FlatGrid options /> </Content> </VirtualizedView> </Container> );

WillenOLeal · 2021-01-31T06:31:09Z

I was able to get rid of that warning by adding one extra ScrollView layer in between the ScrollView and FlatList so they will never be on the same direction. Something like:

<ScrollView horizontal={false}
    <ScrollView horizontal={true}>
        <Flatlist horizontal={false}
          ...
        />
    </ScrollView>
</ScrollView>

cloudstr21 · 2021-03-03T05:53:48Z

It's 2021 now, is anyone able to solved the issue, but not the hacky-way? i am using Flatlist inside Content also then annoying warning still appear. even latest version of nativeBase and react-native couldn't help.

flora8984461 · 2021-03-31T02:03:57Z

@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?

Have the same issue.
I need my whole page to be scrollable.

vapstor · 2021-04-01T19:33:16Z

facing same issue, i have:


<ScrollView> //vertical
<View>
...
<Component with flatlist horizontal scrollable>
...
<View>
</ScrollView>

how am i supposed to do?

it's like a instagram friend's stories component

cloudstr21 · 2021-04-12T14:34:08Z

TL;DR

Remove Content component from your code

Reason

Content component has KeyboardAwareScrollView inside it.

So, if your screen has a FlatList, don't use Content component. Instead, use plain old React Native SafeAreaView and View.

Example with Working Code

Before (which shows warning)

import {Container, Content} from 'native-base';

<Container>
  <Content>
    <FlatList 
      data={data}
      keyExtractor={item => `${item.id}`}
      renderItem={({item}) => <Item item={item} />}
    />
  </Content>
</Container>

After (fixed)

import {SafeAreaView, View, StyleSheet} from 'react-native';
import {Container} from 'native-base';

const styles = StyleSheet.create({
  safeAreaView: {
    flexDirection: 'column',
    flex: 1,
  },
  content: {
    flex: 1,
    padding: 10, {/** contentPadding theme variable */},
    backgroundColor: '#fff', {/** containerBgColor theme variable */}
  }
});

<Container>
  <SafeAreaView style={styles.safeAreaView}>
    <View style={styles.content}> 
      <FlatList 
        data={data}
        keyExtractor={item => `${item.id}`}
        renderItem={({item}) => <Item item={item} />}
      />
    </View>
  </SafeAreaView>
</Container>

* Remove `Content` component because `ScrollView` and `FlatList` does not get together with.

* Use `SafeAreaView` and add padding manually with `View` component.

* Do not remove `Container` component because `Container` contains a theme variable of background color.

DO NOT IGNORE OR SUPPRESS NESTED VIRTUALIZED LISTS WARNING

Because:

* A real developer does not ignore warnings

* `FlatList` won't scroll in android

* May introduce bugs and performance issues

What if I cannot remove a parent `Content` component?

Use bravemaster619's answer

But I doubt if it's a clean way 🤔

hi @glinda93 thanks for the solution. In my case, your solution didn't worked but makes my view not scrollable. Here is my code structure:

import {Container, Content} from 'native-base'; 
<Container>
 <Header onScroll={onScroll} />
 <ScrollView scrollEventThrottle={16} onScroll={handleScroll}>
  <FlatList />
 </ScrollView>
 <BottomBar />
</Container>

plvenkatesh92 · 2021-04-28T12:03:29Z

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

I have added ScrollView with many textinputs and also i created a custom dropdown component with flatlist.
And i get the below warning

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

AlphaJuliettOmega · 2021-05-18T11:11:13Z

^ changing the inner content of Picker component is not a solution to me, it should be usable inside a scrollview.

changing from a Scrollview to a non-scrolling view isn't an option if there are other components on the screen or you want to support small screens.

This is quite a messy thread.

<Content> might be a problem,
in my case, we're using <ScrollView> / <KeyboardAwareScrollView> wrapping around <Picker>s / React-native-google-places-autocomplete cause a mess

ie. a super common use case is rendered impossible by this bug

for example

User is given some information after which they must choose something, then choose a location
game over, react native doesn't support scrolling the view (a view with those simple things might work without scrolling on some screens, but smaller screens won't be supported then. This is not acceptable to me)

@bravemaster619
How can I use a scrollview around a Flatlist implementation that's wrapped (ie. can't change it)
The VirtualizedView implementation above causes React-native-google-places-autocomplete to fail to attach the dropdown to the view correctly, it looks like it will pop up for ~250ms but just disappears instead of appearing like it should.

vickneswarixbi4 · 2021-05-27T08:32:17Z

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.

Categories `${item.id}`} />

<Container

Is from native-base it applicable to react native version 5.x

janet-rivas · 2021-05-27T17:42:22Z

It's really odd bug, I'd implemented ListItem using native base in different pages and it mess up my other ListItem styles if I use react FlatList, and I got the warning -> "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead"

so I end up implementing this way.

import {FlatList, SafeAreaView, View} from 'react-native';
import {Text, Container, Body, ListItem, Left, Right} from 'native-base';
import {Icon} from 'react-native-elements';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

function MyScreen({props}) {
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: 'white'}}>
      <Container // Important
        style={{
          marginTop: 10,
          marginBottom: 10,
          backgroundColor: 'blue',
        }}>
        <FlatList
          data={DATA}
          renderItem={({item}) => renderItem(item)}
          keyExtractor={(item) => item.id}
        />
      </Container>
    </SafeAreaView>
  );

  function renderItem(item) {
    return (
      <View  // Important
        style={{
          flex: 1,
        }}> 
        <ListItem>
          <Left>
            <Icon name={'mail'} color={'black'} size={27} />
          </Left>
          <Body>
            <Text style={{color: 'black'}}>{item.title}</Text>
          </Body>
          <Right>
            <Icon
              type={'material'}
              name={'keyboard-arrow-right'}
              color={'black'}
              size={20}
            />
          </Right>
        </ListItem>
      </View>
    );
  }
}
export default MyScreen;

sangolariel · 2021-06-26T08:36:58Z

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.

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 so much! It works for me. but I want to handle load more in the inner Flatlist and Pull to refresh. How can I do it? Thanks.

HyopeR · 2021-10-16T23:19:35Z

Are there any current solutions? We need to use this...

jawadkhan653 · 2021-11-02T11:44:55Z

Its coming because of using ScrollView inside ScrollView , it can be FlatList . Replace the flatlist with map...

Try this method , it worked for me !!!

{data.map((item, index) => {
    ...your code
}}

berkozagir · 2021-12-16T19:56:33Z

There is a Dropdown inside the ScrollView. There is also ScrollView in Dropdown. The page scrolls when the user scrolls the Dropdown. Not all objects in Dropdown are visible.

Warning: virtualizedlists should never be nested inside plain ScrollViews with the same orientation -use another VirtualizedList-backed container instead.

We have entered the year 2022. Is there really no solution yet?

stale · 2022-02-15T03:59:03Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

berkozagir · 2022-02-15T06:57:45Z

If use react-native-dropdown-picker component, maybe that link help you for solution. Solved in my case.
hossein-zare/react-native-dropdown-picker#56

stale · 2022-04-16T14:39:49Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Shoxip · 2022-05-22T04:52:39Z

same problem... Just using this along with other components looks like a terrible crutch.

sairamreddy2211 · 2022-07-15T19:37:10Z

any update on this virtualized list issue ... on how to have more than 1 flat list in wrapped inside a single scroll view of all same orientation

d3v2a · 2022-08-22T08:22:12Z

The problem is in Picker.ios.js L 214 FlatList is in a Content which is a scrollable component, remove the content component in dist et it's ok

NativeBase/src/basic/Picker.ios.js

Line 214 in 182076c

zuby64 · 2022-11-15T07:17:48Z

Any update on this issue.I am using multiple flatlists inside of .Also I have other contents on the screen thats is why I am using

ahmed-khlifi · 2024-05-30T13:55:23Z

still no update in 2024? this error still exist when we create a custom dropdown list and use it inside a ScrollView 🥴

stale bot added the stale label Feb 15, 2022

stale bot removed the stale label Feb 15, 2022

stale bot added the stale label Apr 16, 2022

stale bot removed the stale label May 22, 2022

Nested VirtualizedLists Warning in Flatlist with <Content> Tags #2947

Nested VirtualizedLists Warning in Flatlist with <Content> Tags #2947

Comments

dl-husky73 commented Sep 26, 2019

toritsejuFO commented Sep 26, 2019

netgfx commented Oct 2, 2019

yeong0809 commented Oct 2, 2019

djschilling commented Oct 4, 2019

toritsejuFO commented Oct 5, 2019

murilokrugner commented Oct 5, 2019

yarapolana commented Oct 5, 2019

captaincole commented Oct 6, 2019

sudo97 commented Oct 7, 2019

johanjmoncada commented Oct 11, 2019

yarapolana commented Oct 11, 2019

Dellybro commented Oct 16, 2019 • edited Loading

yarapolana commented Oct 16, 2019

lucasmedeiros commented Oct 17, 2019

HikkersOne commented Oct 19, 2019 • edited Loading

andrefangeloni commented Oct 20, 2019

sjonchhe commented Oct 23, 2019

andrefangeloni commented Oct 23, 2019

djschilling commented Oct 24, 2019

andrefangeloni commented Oct 24, 2019

httol commented Oct 28, 2019

thyagobrejao commented Oct 28, 2019

Aung-Myint-Thein commented Oct 29, 2019

xyz-zz commented Oct 29, 2019

thyagobrejao commented Oct 29, 2019

timothystewart6 commented Nov 4, 2019 • edited Loading

wilsonmegax commented Nov 18, 2019

SSTPIERRE2 commented Nov 18, 2019

bijomon-tolexo commented Nov 19, 2019

ramonvermeulen commented Nov 22, 2019

erikbrgr commented Dec 3, 2020

TomBerriot commented Dec 30, 2020 • edited Loading

emyduke commented Jan 26, 2021 • edited Loading

emyduke commented Jan 26, 2021

emyduke commented Jan 26, 2021 • edited Loading

WillenOLeal commented Jan 31, 2021

cloudstr21 commented Mar 3, 2021

flora8984461 commented Mar 31, 2021

vapstor commented Apr 1, 2021

cloudstr21 commented Apr 12, 2021 • edited Loading

TL;DR

Reason

Example with Working Code

DO NOT IGNORE OR SUPPRESS NESTED VIRTUALIZED LISTS WARNING

What if I cannot remove a parent Content component?

plvenkatesh92 commented Apr 28, 2021

AlphaJuliettOmega commented May 18, 2021 • edited Loading

vickneswarixbi4 commented May 27, 2021 • edited Loading

janet-rivas commented May 27, 2021

sangolariel commented Jun 26, 2021 • edited Loading

HyopeR commented Oct 16, 2021

jawadkhan653 commented Nov 2, 2021 • edited Loading

berkozagir commented Dec 16, 2021

stale bot commented Feb 15, 2022

berkozagir commented Feb 15, 2022 • edited Loading

stale bot commented Apr 16, 2022

Shoxip commented May 22, 2022

sairamreddy2211 commented Jul 15, 2022

d3v2a commented Aug 22, 2022 • edited Loading

zuby64 commented Nov 15, 2022

ahmed-khlifi commented May 30, 2024

Dellybro commented Oct 16, 2019 •

edited

Loading

HikkersOne commented Oct 19, 2019 •

edited

Loading

timothystewart6 commented Nov 4, 2019 •

edited

Loading

TomBerriot commented Dec 30, 2020 •

edited

Loading

emyduke commented Jan 26, 2021 •

edited

Loading

emyduke commented Jan 26, 2021 •

edited

Loading

cloudstr21 commented Apr 12, 2021 •

edited

Loading

What if I cannot remove a parent `Content` component?

AlphaJuliettOmega commented May 18, 2021 •

edited

Loading

vickneswarixbi4 commented May 27, 2021 •

edited

Loading

sangolariel commented Jun 26, 2021 •

edited

Loading

jawadkhan653 commented Nov 2, 2021 •

edited

Loading

berkozagir commented Feb 15, 2022 •

edited

Loading

d3v2a commented Aug 22, 2022 •

edited

Loading