"VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead." while tap item picker

[patricktan98]

I have gone through these following points

• [X] Check latest documentation: https://docs.nativebase.io/
• [X] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [X] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [X] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [X] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [X] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

Expected behaviour

The Item picker should view without warnings.

Actual behaviour

When Item Picker is shown, the 'VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.' warning shown.

Steps to reproduce

<Item picker>
                        <Picker
                            mode="dropdown"
                            iosIcon={<Icon name="arrow-down" />}
                            style={{ width: undefined }}
                            placeholder="All"
                            Header="Transaction Type"
                            iosHeader="Transaction Type"
                            placeholderStyle={{ color: "#bfc6ea" }}
                            placeholderIconColor="#007aff"
                            selectedValue={this.state.selected2}
                            onValueChange={this.onValueChange2.bind(this)}
                        >
                            <Picker.Item label="Payment" value="Payment" />
                            <Picker.Item label="Top up" value="Topup" />
                            <Picker.Item label="Refunded" value="Refunded" />
                        </Picker>
                    </Item>

Video Link: https://user-images.githubusercontent.com/50147719/106872277-14bbff00-670e-11eb-9497-4407ca5ac2cb.mov

Is the bug present in both iOS and Android or in any one of them?

The bugs occur in iOS and Android. I have tested in iOS 14.4 and Android 11.0

Any other additional info which would help us debug the issue quicker.

###Important

If you want your issue to be looked at quicker, attach a snack reproducible with your issue. Makes it easier for us!

[dlenskyi]

Same here I will provide you more details from Element inspector So basically thats because Picker component renders FlatList inside VirtualizedList (screenshot below)

[dlenskyi]

Same issue here #3334

[KasTasElis]

Same issue for me, still waiting for solutions?

[gregormelhorn]

Please fix this and accept the pull from dlferro!

[megacherry]

yes, please accept the pull to resolve this issue.

[hoekma]

@Ajamuar I am also still having this problem in NativeBase v2 with the sample code. I realize you all are focused on v3 right now, but I hope you will continue to support v2 for a while until we get a chance to rewrite our app.

 <Container>
      <Header />
      <Content>
        <Form>
          <Item>
            <Input value="test" onChangeText={() => true} />
          </Item>
          <Item picker>
            <Picker
              mode="dropdown"
              iosIcon={<Icon name="arrow-down" />}
              style={{ width: undefined }}
              placeholder="Select your SIM"
              placeholderStyle={{ color: '#bfc6ea' }}
              placeholderIconColor="#007aff"
              selectedValue={selected2}
              onValueChange={() => true}
            >
              <Picker.Item label="Wallet" value="key0" />
              <Picker.Item label="ATM Card" value="key1" />
              <Picker.Item label="Debit Card" value="key2" />
              <Picker.Item label="Credit Card" value="key3" />
              <Picker.Item label="Net Banking" value="key4" />
            </Picker>
          </Item>
        </Form>
      </Content>
    </Container>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[moseslucas]

I hope the team at native base continue support for nativebase v2 and fix this issue. There are still many apps out there that uses v2

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[kleydon]

It isn't stale, its still an issue.

[jmgarciasanti]

Yes, still an issue. It's thrown as error on iOS devices after migrating app to Expo SDK 48. The error is shown in every screen I have with a Form including a "Select" Native Base component. The error is not thrown on Android.