NativeBase: [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.

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

  • Android
  • CRA
  • Expo
  • 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)

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 16
  • Comments: 15

Most upvoted comments

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.

+3
ws998116 on Mar 31, 2023

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.

+2
leifdejong on May 23, 2023

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

+1
holmesjr on Jun 25, 2023

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

+1
coofzilla on May 24, 2023

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 ☹️

+1
cristianmacedo on Apr 19, 2023

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

+1
mrsants on Mar 31, 2023
Read more comments on GitHub
← NativeBase: ScrollableTab Bug Android
NativeBase: Select.Item Key prop missing →