Virtualizedlist should never be nested inside scrollview #56

cbothra · 2020-07-08T11:40:50Z

I am using this dropdown plugin in a scrollview and getting a following warning:

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

Any help would be highly appreciated.

Thank-in-advance.

usersina · 2020-07-08T18:44:18Z

If you comment out the ScrollView, does the dropdown by any chance stay behind the other components if you open it ?
Sort of like this.

cbothra · 2020-07-09T06:53:36Z

Nope the dropdown works just perfect. All I am facing is this warning Virtualizedlist should never be nested inside scrollview. I googled this error and there are some solutions for this. This is a common error which appears when we put a Flatlist inside Scrollview. I was not sure how to resolve that in the plugin plus I dont want to alter the node modules packages. So I thought to bring it to your notice.

I am taking body measurements in my app which can be in inch/cms and pounds/kg . So I wanted to have dropdown along side each input. And all these measurements inputs are wrapped in a Scrollview container.

hossein-zare · 2020-07-09T16:21:44Z

Hello @cbothra ,
Before updating the package, I did some research on how to use FlatList inside ScrollView, I ended up with these:
https://stackoverflow.com/questions/51098599/flatlist-inside-scrollview-doesnt-scroll
https://reactnative.dev/docs/scrollview#nestedscrollenabled

<ScrollView nestedScrollEnabled={true} />
    <DropDownPicker  ... />
</ScrollView>

If the example doesn't solve the problem, please let me know.

Update

Update the package to v3.1.8.

usersina · 2020-07-09T21:02:27Z

I also have the same warning, tried adding nestedScrollEnabled={true} but it didn't work.
I should note that my app looks like this:

App.js:

<ScrollView nestedScrollEnabled={true} />
    <SomeComponent1 />
    <SomeComponent2 />
    <TheDropView />
</ScrollView>

TheDropView.js:

<View style={{flexDirection: 'row'}}>
    <DropDownPicker  ... />
</View>

kimkong88 · 2020-07-10T03:54:02Z

Same issue here, One way to fix is have horizontal ScrollView wrapped outside of dropdown, it will make the warning disappear, but obviously not a right solution.

cbothra · 2020-07-10T07:35:47Z

@hossein-zare Nope, just adding nestedScrollEnabled={true} didn't worked. Also note that I updated the library to the latest version.

My case is exactly same as @usersina.

@kimkong88 This hack works but yes you are are right. This is not an optimal solution. Besides that you have to give height to the scrollview so that the options gets displayed.

hossein-zare · 2020-07-10T09:06:35Z

@cbothra @usersina @kimkong88

I got rid of FlatList, ScrollView replaced.

New update: 3.1.9

cbothra · 2020-07-10T11:01:04Z

Doesn't make any difference. Warning still persists. I think its not related to flatlists or scrollview. The core problem is using scrollview/flatlist inside another scrollview/flatlist.

@hossein-zare You should checkout this link for solutions: GeekyAnts/NativeBase#2947

hossein-zare · 2020-07-10T16:37:08Z

Make sure you're using v3.1.9, The warning has to go away.

usersina · 2020-07-10T18:06:27Z

Solved !

singhprabhanshu · 2020-07-11T17:10:58Z

No, warning is there in version 3.1.9. i have installed and configured it. Also the scroll of dropdown option is not going to happen if we are using it inside scrollView or content(native base). To scroll option of dropdown inside scroll view, i need to press scroll view and then scroll is going to happen on dropdown option. Anybody have solution??

cbothra · 2020-07-14T11:57:56Z

@hossein-zare Yep Now I can confirm that there is no more Yellow Box Warning.

Btw just out of curiosity what was your solution. I hope you didn't just hide the warning :D (Just Kidding).

hossein-zare · 2020-07-14T14:43:50Z

I replaced FlatList with Scrollview

codoffer · 2021-05-14T09:14:42Z

I am facing the same issue. Getting a warning - "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead."

I have fixed this by using a different mode

https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/5.0/advanced/list-modes#scrollviewprops

hossein-zare · 2021-05-14T17:40:22Z

@codoffer
If that happens, You have to use listMode="SCROLLVIEW" or listMode="MODAL".

alessandro-bottamedi · 2021-05-25T07:39:06Z

Problem still happens in ver 5.1.17 (solved with listMode="SCROLLVIEW")

SatalBill · 2021-06-07T05:01:24Z

@alessandro-bottamedi and @hossein-zare 's answers saved my time.

<DropDownPicker
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  style={{backgroundColor: 'crimson',}}
  listMode="SCROLLVIEW"                      // This line solved my issue.
/>

Reference link is here

impe93 · 2021-06-16T15:30:58Z

This configuration worked form me:

<ScrollView nestedScrollEnabled={true}> // Add nestedScrollEnabled={true}
  <DropDownPicker
    open={open}
    value={value}
    items={items}
    setOpen={setOpen}
    setValue={setValue}
    setItems={setItems}
    listMode="SCROLLVIEW" // Add this line 
  />
</ScrollView>

Paramesh98 · 2021-06-21T10:48:48Z

Hi, I had the same issue, the library provides listMode props. Adding this props solved my issue.

 listMode="SCROLLVIEW"
        scrollViewProps={{
          nestedScrollEnabled: true,
  }}

check this documentation for more information https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/next/advanced/list-modes#scrollviewprops

Nouhack · 2021-06-24T19:36:57Z

the way to avoid this type of warning was mentioned in the doc , please take a look :
https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/list-modes#notes

fajarprayoga · 2021-07-06T02:34:22Z

Saya menghadapi masalah yang sama. Mendapatkan peringatan - "VirtualizedLists tidak boleh bersarang di dalam ScrollViews biasa dengan orientasi yang sama karena dapat merusak jendela dan fungsionalitas lainnya - gunakan wadah lain yang didukung VirtualizedList sebagai gantinya."

Saya telah memperbaikinya dengan menggunakan mode yang berbeda

https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/5.0/advanced/list-modes#scrollviewprops

this work for me

ironwebstar · 2021-09-02T00:40:34Z

Still not working on my end.
when the dropdown position is top, it's working as expected, but on bottom, still overlapped and unable to select.

mikehardy · 2021-09-02T18:53:32Z

@ironwebstar I won't have time to troubleshoot your project personally, however in general for anyone to help anyone you should do your best to produce a https://stackoverflow.com/help/minimal-reproducible-example

Satyam-code143 · 2021-10-08T12:57:41Z

I am not getting any error but the listMode="SCROLLVIEW" doesn't open the dropdown. I don't want to use MODAL in my app. So, please can someone help.

I have created a project over Snack. DropDown. In this project, it is working on the web but it isn't showing up on mobile, please help me out to solve this.

Thank You!!

Roundups · 2021-10-27T10:09:12Z

I am also having issues, it works ok on iOS but not on android. It will open the dropdown but I can't then scroll or choose another option within the dropdown. I am using listMode="MODAL" for the time being.

fadinasr · 2021-11-05T13:16:32Z

@hossein-zare do we lose any performance if we use Scroll View instead of Flat List? keep in mind the items are pretty simple text items.

hossein-zare · 2021-11-05T15:40:06Z

Hello @Satyam-code143 @Roundups ,

Unsolvable, Consider using a View element instead of the ScrollView

hossein-zare · 2021-11-05T15:46:04Z

@fadinasr
It depends on the number and simplicity of your items.
If they are +(~20), it'll impact the performance.

PranatoshRoy · 2022-01-26T13:24:20Z

Hi, I had the same issue, the library provides listMode props. Adding this props solved my issue.
 listMode="SCROLLVIEW"
        scrollViewProps={{
          nestedScrollEnabled: true,
  }}
check this documentation for more information https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/next/advanced/list-modes#scrollviewprops

Wroks like a charm. Thanks @Pramesh98

DracoZona · 2022-03-24T02:04:22Z

@alessandro-bottamedi and @hossein-zare 's answers saved my time.

<DropDownPicker
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  style={{backgroundColor: 'crimson',}}
  listMode="SCROLLVIEW"                      // This line solved my issue.
/>

Reference link is here

This works for me.

Mukthayar1 · 2022-05-20T18:04:56Z

@codoffer If that happens, You have to use listMode="SCROLLVIEW" or listMode="MODAL".

@hossein-zare
listMode="SCROLLVIEW" its make list very slow

amirVirtuenetz · 2022-05-29T07:01:03Z

Hello @cbothra , Before updating the package, I did some research on how to use FlatList inside ScrollView, I ended up with these: https://stackoverflow.com/questions/51098599/flatlist-inside-scrollview-doesnt-scroll https://reactnative.dev/docs/scrollview#nestedscrollenabled
<ScrollView nestedScrollEnabled={true} />
    <DropDownPicker  ... />
</ScrollView>
If the example doesn't solve the problem, please let me know.

Update

Update the package to v3.1.8.

I have tried your solution but i faced the error same like that
i ahve a ScrollView in main Container of Screen and inside multiple children like input button and alos Dropdown picker
but i cannot resolve the issue
i am using
"react-native-dropdown-picker": "^5.4.2",
"react-native": "0.68.2",

amirVirtuenetz · 2022-05-29T07:02:55Z

@alessandro-bottamedi and @hossein-zare 's answers saved my time.

<DropDownPicker
  open={open}
  value={value}
  items={items}
  setOpen={setOpen}
  setValue={setValue}
  setItems={setItems}
  style={{backgroundColor: 'crimson',}}
  listMode="SCROLLVIEW"                      // This line solved my issue.
/>

Reference link is here

This works for me.

Thanks , it solved my issue

TommysG · 2022-05-31T12:52:44Z

Hello @Satyam-code143 @Roundups ,

Unsolvable, Consider using a View element instead of the ScrollView

@hossein-zare Have you consider changing a little bit the implementation and render the dropdown inside a modal( and inside the modal the flatlist) and place it exactly under the dropdown button with the same width as the button container? I think this will solve all the compatibility problems between iOS & Android (nested scrolls etc) and the z-index bugs.

hossein-zare · 2022-06-01T09:35:14Z

@TommysG

Modals are fixed (position) on the screen so if you scroll up and down, the modal won't move.

TommysG · 2022-06-01T09:44:17Z

@hossein-zare

Yes. The concept is that if you touch anything outside the dropdown(modal) or if you try to scroll on the parent container, then close the dropdown.

zulkifli0201 · 2022-07-07T04:45:42Z

Saya menghadapi masalah yang sama. Mendapatkan peringatan - "VirtualizedLists tidak boleh bersarang di dalam ScrollViews biasa dengan orientasi yang sama karena dapat merusak jendela dan fungsionalitas lainnya - gunakan wadah lain yang didukung VirtualizedList sebagai gantinya."

Saya telah memperbaikinya dengan menggunakan mode yang berbeda

https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/5.0/advanced/list-modes#scrollviewprops

thankyou

wanderlust252 · 2022-10-12T04:44:01Z

this work well on IOS but android, it didn't show the list

AshuTheDoughnut · 2022-12-16T20:50:54Z

I added both but it doesn't seems to work. Modal works but I want the list

It doesn't show the dropdown list

umairm1alik · 2022-12-24T08:41:11Z

If I use listemode = 'SCROLLVIEW' it makes dropdown performance very slow and if I use 'FLATLIST' dropdown become not scrollable plus virtualization warning.

tragicmj · 2023-02-06T08:05:47Z

I can completely relate to @umairm1alik , facing the same issue. If I use Flatlist see virtualization warning and if I use Modal, freezing issue.

AshuTheDoughnut · 2023-02-06T08:26:53Z

Yes, you are right. It's really feel slow and weird.

Bayramito · 2023-07-04T09:16:55Z

the issue still existing with the latest version

Jeeet-patel · 2023-11-07T05:38:16Z

I am not getting any error but the listMode="SCROLLVIEW" doesn't open the dropdown. I don't want to use MODAL in my app. So, please can someone help.

I have created a project over Snack. DropDown. In this project, it is working on the web but it isn't showing up on mobile, please help me out to solve this.

Thank You!!

@Satyam-code143 Try giving height to the container of dropdown component i tried it worked for me

williamlegane · 2024-11-28T21:11:24Z

Add this if you are struggling with DropDownPicker inside ScrollVide

DropDownPicker.setListMode("SCROLLVIEW");

hossein-zare mentioned this issue Jul 10, 2020

FlatList Integration #46

Merged

hossein-zare closed this as completed Jul 14, 2020

hossein-zare mentioned this issue Dec 12, 2020

Change scrollview to flatlist #159

Closed

hossein-zare pinned this issue May 14, 2021

mikehardy mentioned this issue Sep 22, 2021

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

Closed

berkozagir mentioned this issue Feb 15, 2022

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

Open

sarahsporck mentioned this issue Oct 10, 2022

LUN-400: Image for own vocabulary digitalfabrik/lunes-app#377

Merged

Virtualizedlist should never be nested inside scrollview #56

Virtualizedlist should never be nested inside scrollview #56

Comments

cbothra commented Jul 8, 2020

usersina commented Jul 8, 2020

cbothra commented Jul 9, 2020

hossein-zare commented Jul 9, 2020 • edited Loading

Update

usersina commented Jul 9, 2020

kimkong88 commented Jul 10, 2020

cbothra commented Jul 10, 2020

hossein-zare commented Jul 10, 2020 • edited Loading

cbothra commented Jul 10, 2020

hossein-zare commented Jul 10, 2020

usersina commented Jul 10, 2020

singhprabhanshu commented Jul 11, 2020 • edited Loading

cbothra commented Jul 14, 2020

hossein-zare commented Jul 14, 2020

codoffer commented May 14, 2021 • edited Loading

hossein-zare commented May 14, 2021

alessandro-bottamedi commented May 25, 2021

SatalBill commented Jun 7, 2021 • edited Loading

impe93 commented Jun 16, 2021 • edited Loading

Paramesh98 commented Jun 21, 2021

Nouhack commented Jun 24, 2021

fajarprayoga commented Jul 6, 2021

ironwebstar commented Sep 2, 2021 • edited Loading

mikehardy commented Sep 2, 2021

Satyam-code143 commented Oct 8, 2021

Roundups commented Oct 27, 2021

fadinasr commented Nov 5, 2021

hossein-zare commented Nov 5, 2021

hossein-zare commented Nov 5, 2021 • edited Loading

PranatoshRoy commented Jan 26, 2022 • edited Loading

DracoZona commented Mar 24, 2022

Mukthayar1 commented May 20, 2022

amirVirtuenetz commented May 29, 2022

Update

amirVirtuenetz commented May 29, 2022

TommysG commented May 31, 2022 • edited Loading

hossein-zare commented Jun 1, 2022

TommysG commented Jun 1, 2022

zulkifli0201 commented Jul 7, 2022

wanderlust252 commented Oct 12, 2022

AshuTheDoughnut commented Dec 16, 2022 • edited Loading

umairm1alik commented Dec 24, 2022

tragicmj commented Feb 6, 2023

AshuTheDoughnut commented Feb 6, 2023 • edited Loading

Bayramito commented Jul 4, 2023

Jeeet-patel commented Nov 7, 2023

williamlegane commented Nov 28, 2024

hossein-zare commented Jul 9, 2020 •

edited

Loading

hossein-zare commented Jul 10, 2020 •

edited

Loading

singhprabhanshu commented Jul 11, 2020 •

edited

Loading

codoffer commented May 14, 2021 •

edited

Loading

SatalBill commented Jun 7, 2021 •

edited

Loading

impe93 commented Jun 16, 2021 •

edited

Loading

ironwebstar commented Sep 2, 2021 •

edited

Loading

hossein-zare commented Nov 5, 2021 •

edited

Loading

PranatoshRoy commented Jan 26, 2022 •

edited

Loading

TommysG commented May 31, 2022 •

edited

Loading

AshuTheDoughnut commented Dec 16, 2022 •

edited

Loading

AshuTheDoughnut commented Feb 6, 2023 •

edited

Loading