React Native Errors - VirtualizedLists should never be nested inside plain ScrollViews

Question

I'm working on a react-native app and I have to put GooglePlacesAutocomplete in a Scrollview.This is the following code.

<ScrollView style={{flex: 1}>
    <GooglePlacesAutocomplete
      minLength={2}
      nearbyPlacesAPI={'GooglePlacesSearch'}
      debounce={400}
      placeholder="Origin Address"
      query={{
        key: GOOGLE_MAPS_API_KEY,
        language: 'en',
      }}
      onFail={error => console.log(error)}
      enablePoweredByContainer={false}
      onPress={(data, details = null) => {
        console.log(details.geometry.location);
      }}
      fetchDetails={true}
      returnkeyType={'search'}
    />
  </ScrollView>

Errors: VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.

Answer 1

<ScrollView
    horizontal={true}
    showsHorizontalScrollIndicator={false}
 >
    <FlatList
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        scrollEnabled={false} 
        // .....
    />
</ScrollView>

This worked for me.Setting scrollEnabled to false on the flatlist removed the warning

Answer 2

this was a difficult one. I was able to fix this by adding the horizontal and keyboardShouldPersistTaps props. This may cause an issue, with the list of addresses not showing up because of the set styling. You may need to add some styling to the <Scrollview/> using contentContainerStyle. This pseudo-code worked for me.

 <ScrollView
  horizontal={true}
  contentContainerStyle={{
   flexDirection: 'column',
   justifyContent: 'space-around',
   width: '100%',
  }}
  keyboardShouldPersistTaps={'handled'}>
   <GooglePlacesAutocomplete
     disableScroll={false}
   />
 </ScrollView>

Answer 3

this error when you add vertival flatList inside ScrolView so try one of this :

1. change flat list to horizental
2. disable flat list scrolling , (from docs disableScroll={false}).
3. use flat list it outside ScrollView , like in modal.

acording to react-native-google-places-autocomplete docs ther is section says:

Use Inside a or If you need to include this component inside a ScrolView or FlatList, remember to apply the keyboardShouldPersistTaps attribute to all ancestors ScrollView or FlatList (see this issue comment).

Answer 4

<ScrollView
 style={{flex: 1}
 nestedScrollEnabled={true} // <---- 1.
>
<GooglePlacesAutocomplete
  minLength={2}
  nearbyPlacesAPI={'GooglePlacesSearch'}
  debounce={400}
  placeholder="Origin Address"
  query={{
    key: GOOGLE_MAPS_API_KEY,
    language: 'en',
  }}
  onFail={error => console.log(error)}
  enablePoweredByContainer={false}
  onPress={(data, details = null) => {
    console.log(details.geometry.location);
  }}
  fetchDetails={true}
  returnkeyType={'search'}
  disableScroll={true} // <--- 2. this works
/>