title: React Native: "VirtualizedLists should never be nested inside plain ScrollViews.." warning
body: <p>I am having an issue with my <code>&lt;ScrollView&gt;</code> and the <code>&lt;GooglePlacesAutocomplete&gt;</code> components. </p>
  
  <p><a href="https://gfycat.com/plainmalecatbird" rel="noreferrer">Link to GIF of the current issue</a></p>
  
  <p>After watching the short GIF you might notice that I am getting a warning:</p>
  
  <blockquote>
    <p>VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.</p>
  </blockquote>
  
  <p>Also, when I try to click on Dallas, TX, USA nothing happens. <br>
  If I were to delete the <code>&lt;ScrollView&gt;</code> component then when I click on a place, it takes it without any issues. </p>
  
  <p>Here is my code:</p>
  
  <pre><code>    import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'; 
  
      [...] //code removed from brevity
  
      return(
      &lt;SafeAreaView style={styles.fullPage}&gt;   
      &lt;ScrollView
       stickyHeaderIndices={[0]} &gt;
          &lt;Header/&gt; 
          &lt;View style={styles.container}&gt;
  
              &lt;Text&gt;Search for fun near you&lt;/Text&gt;
  
              &lt;View style = {styles.firstLine}&gt;
                  &lt;Text&gt;On &lt;/Text&gt;
  
                  &lt;TouchableOpacity onPress={showDatepicker}&gt;&lt;MaterialCommunityIcons name="alarm" color={'orange'} size={25} spin={true} /&gt;&lt;/TouchableOpacity&gt;
                      {show &amp;&amp; (
                      &lt;DateTimePicker
                          testID="dateTimePicker"
                          timeZoneOffsetInMinutes={0}
                          value={date}
                          mode={mode}
                          display="default"
                          onChange={onChange}
                      /&gt;)}
  
              &lt;/View&gt;
                  &lt;Text style={styles.txt}&gt;Date: {date.toDateString()}&lt;/Text&gt;
              &lt;View style = {styles.secondLine}&gt;
                  &lt;Text&gt;Within &lt;/Text&gt;
                  &lt;ModalDropdown 
                      defaultValue='Pick a mile' options={["5", '10','20','50', '75']}
                      onSelect= {(index,value)=&gt;{
                          setMiles(value);
                      }}
                      style = {styles.mileageDropdown}&gt;  
                  &lt;/ModalDropdown&gt;
                  &lt;Text&gt; miles of &lt;/Text&gt;
  
              &lt;/View&gt;
  
              &lt;View style = {styles.thirdLine}&gt;
              &lt;GooglePlacesAutocomplete
                           placeholder='Insert place to find'
                           minLength={2}
                           keyboardAppearance={'light'}
                           fetchDetails={false} 
                           onPress={(data, details = null) =&gt; { // 'details' is provided when fetchDetails = true
                               {setPlace(data.description)}
                              }}                 
                              styles={{
                              textInputContainer: {
                                  backgroundColor: 'rgba(0,0,0,0)',
                                  borderTopWidth: 0,
                                  borderBottomWidth:0,
                                  width: '100%',
                                  },
                               textInput: {
                                  fontSize: 16
                                  },
                              }}
  
                              query={{
                                  key: 'SomeAPIkey',
                                  language: 'en', // language of the results
                                }}
                          /&gt;
              &lt;/View&gt;      
  
              &lt;View style={styles.btn}&gt;
                  &lt;TouchableOpacity onPress={handlePress} style={styles.btnSearch}&gt;&lt;Text style={styles.txtbtn}&gt;Search&lt;/Text&gt;&lt;/TouchableOpacity&gt;
              &lt;/View&gt;
              &lt;/View&gt;
  
  
  
  
              {arr.map((item, key)=&gt;(  
                  &lt;Card key={key}&gt;                
                           &lt;View style={styles.cardFirstLine}&gt;&lt;Text&gt;{item.user}&lt;/Text&gt;&lt;Text style={{marginLeft:40}}&gt;{item.location}&lt;/Text&gt;&lt;/View&gt;
                           &lt;View&gt;&lt;Text&gt;{item.datePosted}&lt;/Text&gt;&lt;/View&gt;
                           &lt;View style={styles.cardImage}&gt;&lt;/View&gt;
                           &lt;View&gt;&lt;Text&gt;{item.description}&lt;/Text&gt;&lt;/View&gt;
                           &lt;View&gt;&lt;Text&gt;{item.eventDate}&lt;/Text&gt;&lt;/View&gt;
                           &lt;View&gt;&lt;Text&gt;{item.comments}&lt;/Text&gt;&lt;/View&gt;         
                  &lt;/Card&gt;
                  ))}
  
       &lt;/ScrollView&gt;
      &lt;/SafeAreaView&gt;
  )}              
  
          const styles = StyleSheet.create({
              fullPage:{
                  flex:1,
              },
              container:{
                  paddingTop:65,
                  margin: 10,
                  alignItems: 'center'
              },
              firstLine:{
                  flexDirection: "row",
                  alignContent: "center",
                  padding: 10,
                  alignItems : 'center'
              },
              secondLine:{
                  flexDirection: "row",
                  padding: 10,
                  alignItems : 'center'
              },
              thirdLine:{
                  flexDirection: "row",
                  padding: 10,
                  alignItems : 'center',
                  justifyContent: 'center',
              },
              datepicker:{
                  paddingLeft:10,
                  paddingTop:5
              },
              mileageDropdown:{
                  borderColor: 'black',
                  borderWidth: StyleSheet.hairlineWidth,
                  padding:5,
                  paddingTop:5
              },
              btn:{
                  paddingTop:10
              },
              btnSearch:{ 
                  backgroundColor: 'purple',
                  padding:20,
                  margin:20,
                  width: 100,
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius : 5,
              },
              txtbtn:{
                  fontWeight: 'bold',
                  fontSize: 14,
                  color: 'orange'
              },
              place:{
                  marginTop: 30,
                  padding: 10,
                  borderColor: "red",
                  borderWidth: StyleSheet.hairlineWidth
              },
              displayImage:{
                  width:200,
                  height:200,
                  padding:40,
                  borderBottomWidth: StyleSheet.hairlineWidth,
                  borderColor: "red",
              },  
              txt:{
                  borderBottomWidth: StyleSheet.hairlineWidth,
                  borderColor: 'black',
  
              },
              cardFirstLine:{
                  padding: 5,
                  flexDirection:'row',
              },
              cardImage:{
                  paddingTop: 15,
                  borderWidth: StyleSheet.hairlineWidth,
                  borderColor: 'black',
                  width: '75%',
                  height:100,
  
              }
          }); 
  </code></pre>
  
  <p>I did review most of the StackOverflow posts regarding this, but I have not been able to solve the issue on my end. <br>
  Can anyone help me understand what is wrong with this UI?</p>