Virtualizedlist should never be nested inside scrollview

Question

Virtualizedlist should never be nested inside scrollview

cbothra opened this issue 4 years ago · 44 comments

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 commented 4 years ago

Solved !

👎31
😄3

Answer 1 · 2020-07-08T18:44:18.000Z

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.

Answer 2 · 2020-07-09T06:53:36.000Z

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.

Answer 3 · 2020-07-09T16:21:44.000Z

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.

Answer 4 · 2020-07-09T21:02:27.000Z

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>

Answer 5 · 2020-07-10T03:54:02.000Z

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.

Answer 6 · 2020-07-10T07:35:47.000Z

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

Answer 7 · 2020-07-10T09:06:35.000Z

@cbothra @usersina @kimkong88

I got rid of FlatList, ScrollView replaced.

New update: 3.1.9

Answer 8 · 2020-07-10T11:01:04.000Z

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

Answer 9 · 2020-07-10T16:37:08.000Z

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

Answer 10 · 2020-07-11T17:10:58.000Z

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

Answer 11 · 2020-07-14T11:57:56.000Z

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

Answer 12 · 2020-07-14T14:43:50.000Z

I replaced FlatList with Scrollview

Answer 13 · 2021-05-14T09:14:42.000Z

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

Answer 14 · 2021-05-14T17:40:22.000Z

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

Answer 15 · 2021-05-25T07:39:06.000Z

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

Answer 16 · 2021-06-07T05:01:24.000Z

@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

Answer 17 · 2021-06-16T15:30:58.000Z

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>

Answer 18 · 2021-06-21T10:48:48.000Z

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

Answer 19 · 2021-06-24T19:36:57.000Z

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

Answer 20 · 2021-07-06T02:34:22.000Z

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

Answer 21 · 2021-09-02T00:40:34.000Z

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.

Answer 22 · 2021-09-02T18:53:32.000Z

@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

Answer 23 · 2021-10-08T12:57:41.000Z

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

Answer 24 · 2021-10-27T10:09:12.000Z

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.

Answer 25 · 2021-11-05T13:16:32.000Z

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

Answer 26 · 2021-11-05T15:40:06.000Z

Hello @Satyam-code143 @Roundups ,

Unsolvable, Consider using a View element instead of the ScrollView

Answer 27 · 2021-11-05T15:46:04.000Z

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

Answer 28 · 2022-01-26T13:24:20.000Z

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

Answer 29 · 2022-03-24T02:04:22.000Z

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

Answer 30 · 2022-05-20T18:04:56.000Z

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

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

Answer 31 · 2022-05-29T07:01:03.000Z

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",

Answer 32 · 2022-05-29T07:02:55.000Z

@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

Answer 33 · 2022-05-31T12:52:44.000Z

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.

Answer 34 · 2022-06-01T09:35:14.000Z

@TommysG

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

Answer 35 · 2022-06-01T09:44:17.000Z

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

Answer 36 · 2022-07-07T04:45:42.000Z

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

Answer 37 · 2022-10-12T04:44:01.000Z

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

Answer 38 · 2022-12-16T20:50:54.000Z

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

It doesn't show the dropdown list

Answer 39 · 2022-12-24T08:41:11.000Z

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

Answer 40 · 2023-02-06T08:05:47.000Z

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

Answer 41 · 2023-02-06T08:26:53.000Z

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

Answer 42 · 2023-07-04T09:16:55.000Z

the issue still existing with the latest version

Answer 43 · 2023-11-07T05:38:16.000Z

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