NativeBase

NativeBase copied to clipboard

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

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.

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

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

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

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

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

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

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

+1

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

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

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

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

+1 here with the same trouble

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

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!

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)

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.

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

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

@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

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.

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

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

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.

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

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?).

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.

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?