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 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).