VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead

Question

I ma using react-native-google-places-autocomplete package for google place autocomplete text input. But here I am getting the warning after tapping on address every time.

Warning::

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

What is the other VirtualizedList-backed container that I should use, and why is it now advised not to use like that?

I have created a custom component for this, below I am adding code inside render of GooglePlacesInput component::

class GooglePlacesInput extends PureComponent {
  //..... other function

  // render function
  render() {
    const { placeholder, minSearchLen, address, name, enablePoweredByContainer, currentLocation, onChangeText } = this.props;
    return (
      <GooglePlacesAutocomplete
        placeholder={placeholder}
        name={name}
        minLength={minSearchLen}
        autoFocus={false}
        returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
        keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
        listViewDisplayed="false"   // true/false/undefined
        fetchDetails={true}
        getDefaultValue={() => address}
        renderDescription={row => row.description} // custom description render
        onPress={(data, details = null) => this.onPressAddress(data, details)}
        onNotFound={() => { }}
        query={{ key: GOOGLE_API_KEY }}
        currentLocation={currentLocation} // Will add a 'Current location' button at the top of the predefined places list
        currentLocationLabel="Current location"
        nearbyPlacesAPI="GooglePlacesSearch"
        textInputProps={{
          onChangeText: onChangeText,
        }}
        enablePoweredByContainer={enablePoweredByContainer}
        isRowScrollable={false}
        styles={{
          textInputContainer: {
            backgroundColor: 'rgba(0,0,0,0)',
            borderTopWidth: 0,
            borderBottomWidth: 0,
            width: '100%',
            marginBottom: 20,
          },
          textInput: {
            paddingHorizontal: 18,
            height: 40,
            color: Colors.grey,
            fontSize: 16,
          },
          predefinedPlacesDescription: {
            color: '#1faadb',
          },
        }}
      />
    );
  }
}

// default props values
GooglePlacesInput.defaultProps = {
  name: 'address',
  placeholder: 'Enter Address',
  minSearchLen: 2,
  address: '',
  enablePoweredByContainer: true,
  currentLocation: false,
  onChangeText: '',
};

export { GooglePlacesInput };

And calling it inside another component like this::

<Content
contentContainerStyle={[flexGrow1, p10]}
>
  <View style={[alignItemsCenter, pt20, pb30]}>
    <ImageView source={Images.mapIcon} style={{ height: Base.getPixel('4.5rem'), width: Base.getPixel('4.5rem') }} />
  </View>
  <Formik
    initialValues={this.initialValues}
    onSubmit={(data) => this.onSubmitForm(data)}
    ref={el => (this.form = el)}
    validationSchema={validationSchema}
    isSubmitting={true}
    render={({ handleSubmit, values, setValues, setFieldValue, errors, touched, ...props }) => {
      return (
        <Form>
          <GooglePlacesInput
            onPress={(data, detail) => this.onPressOfAddress(data, detail)}
            address={values.address}
            name="address"
            onChangeText={(value) => setFieldValue('address', value)}
          />
          <Button onPress={() => popScreen(this.props.componentId)} block large variant="danger">CANCEL</Button>
        </Form>
      );
    }}
  />
</Content>

It comes when I am clicking on autocomplete.

Please suggest me the solution to get rid of this problem either suggest me some other package it something is better than this.

This warning is coming from the main file of this package.

Answer 1

I had the same problem using native ('from react-native') ScrollView and ListItem (from react-native-elements). Solved it wrapping both with a View Component:

<View>
    <ScrollView>
        <View> {
            data.map((l, i) => (
                <ListItem />
            ))}
        </View>
    </ScrollView>
</View>

Answer 2

This doesn't fix the problem but it get's rid of the warning if you don't think there's really an issue.

Add it to the top of your file.

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);

Answer 3

UPDATE To ignore the warning

import { LogBox } from 'react-native';

LogBox.ignoreLogs(['VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.']);