[Select] 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.

[NandoMB]

Description

The default Select component is throwing this error...

CodeSandbox/Snack link

https://snack.expo.dev/@nandomb/nativebase-template

Steps to reproduce

1. Create a new expo app;
2. Clean them up;
3. Create a simple Native Base Select with some elements and wrap it with a ScrollView;
4. The error will show up.
5. At Snack, it's not throwing the error...

NativeBase Version

3.4.28

Platform

• [X] Android
• [ ] CRA
• [X] Expo
• [X] iOS
• [ ] Next

Other Platform

Expo 48.0.6

Additional Information

When I use Select component, imported from 'native-base', inside a ScrollView, this error ocurrs... The only way that I found to avoid it, is disableling the scroll on actionsheet's body via Select's properties... The problem is that I cannot have many elements on my select, because it will overflows the page and... I have no more scroll feature 😞

_actionSheetBody={{
  scrollEnabled: false
}}

 ERROR  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.
    at VirtualizedList (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:56438:36)
    at FlatList (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:56096:36)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:122210:23)
    at FlatListComponent (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:162498:61)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:122210:23)
    at Box (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:102499:24)
    at ModalContent (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:161732:55)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:162108:33)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at AnimatedComponent (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:53858:38)
    at AnimatedComponentWrapper
    at ActionsheetContent (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:162190:25)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:122210:23)
    at Box (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:102499:24)
    at FocusScope (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:124372:22)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:122210:23)
    at Box (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:102499:24)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at AnimatedComponent (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:53858:38)
    at AnimatedComponentWrapper
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:160651:24)
    at PresenceTransition (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:160546:28)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:160812:24)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at OverlayView (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:161480:21)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at OverlayContainer (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:161491:36)
    at Overlay (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:160947:24)
    at Modal (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:160294:24)
    at Actionsheet (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:160208:24)
    at Select (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:162269:30)
    at Select (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:173097:20)
    at RCTScrollContentView
    at RCTScrollView
    at ScrollView (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:50107:36)
    at ScrollView
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:122210:23)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:161840:61)
    at FormScreen
    at TouchableWithoutFeedback (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:83206:36)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at KeyboardAvoidingView (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:93386:36)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:122210:23)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:170893:61)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at anonymous (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:122210:23)
    at Box (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:102499:24)
    at SafeView (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:192833:24)
    at $29383e587d62412a$export$9f8ac96af4b1b2ae (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:123341:43)
    at ToastProvider (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:164539:25)
    at PortalProvider (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:161419:50)
    at HybridProvider (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:171071:24)
    at ResponsiveQueryProvider (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:109998:14)
    at RNCSafeAreaProvider
    at SafeAreaProvider (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:121720:24)
    at NativeBaseConfigProviderProvider (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:103681:27)
    at NativeBaseProvider (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:171002:33)
    at App
    at withDevTools(App) (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:101001:27)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at RCTView
    at View (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48703:43)
    at AppContainer (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:48580:36)
    at main(RootComponent) (http://192.168.0.64:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false:85071:28)

[ghost]

looks like you added a scroll view, set nestedScrollEnabled false or set a size for the parent or use onlayout, this is a problem

[ws998116]

I am having the same issue and I need to be able to scroll in the Actionsheet. I am not using a ScollView inside the Actionsheet and the functionality seems fine but the error message is annoying.

@mrsants I'm exactly sure what you're suggesting but changing nestedScrollEnabled didn't do anything for me.

[NandoMB]

@ws998116 You got the point!

[ghost]

@ws998116 try using useNativeDriver={true} to enable native usage in actionsheet

[ghost]

@ws998116 provides an example to analyze why the action sheet is throwing this error, at some point the parent is not limited

[ws998116]

@mrsants I'm still not sure what you mean. useNativeDriver doesn't seem to be an option in any of the _actionSheet props. If I set _actionSheet={{ useRNModal: true}} then the error goes away but then iOS no longer uses the native modal and the functionality isn't as good. I'd prefer to use the native action sheet on iOS if possible.

[NandoMB]

@mrsants I'm still not sure what you mean. useNativeDriver doesn't seem to be an option in any of the _actionSheet props. If I set _actionSheet={{ useRNModal: true}} then the error goes away but then iOS no longer uses the native modal and the functionality isn't as good. I'd prefer to use the native action sheet on iOS if possible.

He's talking about the ScrollView property (useNativeDriver)... I didn't tested yet.

[coofzilla]

Experiencing the same issue.

Tried using the native driver but still didn't work.

_actionSheet={{ useRNModal: true}} works but then the visual UI is severely degraded.

In my case I used:

_actionSheetBody={{ scrollEnabled: false }}

I only have 4 items so this was a solution for me. Sorry OP, hope this can get some traction again.

[cristianmacedo]

I am having the same issue, I have a lot of items on the Select lists, so disabling scroll with _actionSheetBody={{ scrollEnabled: false }} is not an option ☹️

[GaroX]

I am having the same issue, any solution?

[NandoMB]

I am having the same issue, any solution?

I think it will not be fixed because they're developing another library, gluestack.ui...

[leifdejong]

It should be standard UI practices to have a select component as part of a scroll view. Also I don't buy that this issue can't be resolved as a result of gluestack.ui. Would be great to have some feedback from the authors on this case.

[NandoMB]

It should be standard UI practices to have a select component as part of a scroll view. Also I don't buy that this issue can't be resolved as a result of gluestack.ui. Would be great to have some feedback from the authors on this case.

Me too, but I was being realistic... Maybe they could fix it, but... I don't believe in it.

[coofzilla]

It should be standard UI practices to have a select component as part of a scroll view. Also I don't buy that this issue can't be resolved as a result of gluestack.ui. Would be great to have some feedback from the authors on this case.

Me too, but I was being realistic... Maybe they could fix it, but... I don't believe in it.

It doesn't seem like they've been responding to any issues as of late. :(

[holmesjr]

https://github.com/GeekyAnts/NativeBase/issues/5717