Virtualizedlist should never be nested inside scrollview

[cbothra]

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]

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]

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]

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]

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]

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]

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

@cbothra @usersina @kimkong88

I got rid of FlatList, ScrollView replaced.

New update: 3.1.9

[cbothra]

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]

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

[usersina]

Solved !

[singhprabhanshu]

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]

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

I replaced FlatList with Scrollview