Select component inside ScrollView generate ERROR - VirtualizedLists should never be nested ....

[pierol]

Description

Using version 3.4.16 of native base with same code the error doesn't appear. If i've update to last version 3.4.26 the error comes out

CodeSandbox/Snack link

https://codesandbox.io/s/native-base-v3-template-mq6ox

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

NativeBase Version

3.4.26

Platform

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

Other Platform

No response

Additional Information

RN: 0.71.3 Expo: 48 Native Base: 3.4.26

This is the code that generate le ERROR

<ScrollView>
   <Select
            minWidth="130" minHeight="30" accessibilityLabel="0 Ospiti" placeholder="0 Ospiti"
            selectedValue={numeroOspiti}
            onValueChange={this.onValueChange.bind(this)}
          >
            <Select.Item label="0 Ospiti" value="0" />
            <Select.Item label="1 Ospite" value="1" />
            <Select.Item label="2 Ospiti" value="2" />
            <Select.Item label="3 Ospiti" value="3" />
          </Select>
</ScrollView>

[maxwowo]

Also getting this issue with

RN: 0.71.3
Expo: 48.0.5
NativeBase: 3.4.26

[maxwowo]

It seems that native-base@3.4.25 is the latest version without the bug, I downgraded to it and the error is gone

[pierol]

I can confirm that with version native-base@3.4.25 the error message dissapeared

[JosephLu2022]

+1. good on native-base@3.4.25

[NandoMB]

"native-base": "^3.4.28", is happening to me...

[dima-devs]

Same to here on 3.4.28

[youbek]

Same here on 3.4.28 and I think this is because inside Select FlatList is used. https://github.com/GeekyAnts/NativeBase/blob/b9a36dc9fec2f9f5aff30046d2f304e97673d71a/src/components/primitives/Select/Select.tsx#L198 Is there a way to turn off the virtualization of the flat list

[youbek]

As a walkaround I passed optimized false property, looking at this line you can see ScrollView will be used instead of FlatList

<Select
    // @ts-ignore-next-line
    optimized={false}
    ...

[mokhtarHamdoune]

Is there anyone of you noticed that the rendering becomes kinda slow with Select?

[bakhr0mkhan]

I am noticing the same issue here

[kawanstrelow]

I can confirm that with version native-base@3.4.25 the error message dissapeared

[ptsavdar]

Having the issue as well with 3.4.28. A potential workaround for this is:

<Select
    _actionSheetBody={{ scrollEnabled: false }}
    ...

[AllBitsEqual]

Having the issue as well with 3.4.28. A potential workaround for this is:

<Select
    _actionSheetBody={{ scrollEnabled: false }}
    ...

This is only an option when your select options definitely and in any case fit the screen. As soon as you have a select with a few more options, this solution breaks the component as you can no longer scroll the body, as the code implies.