Question 34399 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0 
    <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
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search