title: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead
body: <p>I ma using <a href="https://www.npmjs.com/package/react-native-google-places-autocomplete" rel="noreferrer">react-native-google-places-autocomplete</a> package for google place autocomplete text input. But here I am getting the warning after tapping on address every time. </p>
  
  <p><strong>Warning::</strong></p>
  
  <blockquote>
    <p>VirtualizedLists should never be nested inside plain ScrollViews with
    the same orientation - use another VirtualizedList-backed container
    instead.</p>
  </blockquote>
  
  <p>What is the other VirtualizedList-backed container that I should use, and why is it now advised not to use like that?</p>
  
  <p>I have created a custom component for this, below I am adding code inside render of GooglePlacesInput component::</p>
  
  <pre class="lang-js prettyprint-override"><code>class GooglePlacesInput extends PureComponent {
    //..... other function
  
    // render function
    render() {
      const { placeholder, minSearchLen, address, name, enablePoweredByContainer, currentLocation, onChangeText } = this.props;
      return (
        &lt;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={() =&gt; address}
          renderDescription={row =&gt; row.description} // custom description render
          onPress={(data, details = null) =&gt; this.onPressAddress(data, details)}
          onNotFound={() =&gt; { }}
          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',
            },
          }}
        /&gt;
      );
    }
  }
  
  // default props values
  GooglePlacesInput.defaultProps = {
    name: 'address',
    placeholder: 'Enter Address',
    minSearchLen: 2,
    address: '',
    enablePoweredByContainer: true,
    currentLocation: false,
    onChangeText: '',
  };
  
  export { GooglePlacesInput };
  </code></pre>
  
  <p>And calling it inside another component like this::</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Content
  contentContainerStyle={[flexGrow1, p10]}
  &gt;
    &lt;View style={[alignItemsCenter, pt20, pb30]}&gt;
      &lt;ImageView source={Images.mapIcon} style={{ height: Base.getPixel('4.5rem'), width: Base.getPixel('4.5rem') }} /&gt;
    &lt;/View&gt;
    &lt;Formik
      initialValues={this.initialValues}
      onSubmit={(data) =&gt; this.onSubmitForm(data)}
      ref={el =&gt; (this.form = el)}
      validationSchema={validationSchema}
      isSubmitting={true}
      render={({ handleSubmit, values, setValues, setFieldValue, errors, touched, ...props }) =&gt; {
        return (
          &lt;Form&gt;
            &lt;GooglePlacesInput
              onPress={(data, detail) =&gt; this.onPressOfAddress(data, detail)}
              address={values.address}
              name="address"
              onChangeText={(value) =&gt; setFieldValue('address', value)}
            /&gt;
            &lt;Button onPress={() =&gt; popScreen(this.props.componentId)} block large variant="danger"&gt;CANCEL&lt;/Button&gt;
          &lt;/Form&gt;
        );
      }}
    /&gt;
  &lt;/Content&gt;
  </code></pre>
  
  <p>It comes when I am clicking on autocomplete.</p>
  
  <p>Please suggest me the solution to get rid of this problem either suggest me some other package it something is better than this.</p>
  
  <p>This warning is coming from the main file of this package. </p>