react-native-google-places-autocomplete not working

Question

react-native-google-places-autocomplete is not working, I am facing multiple issues 1. the places drop down is not showing up 2. onPress handler is not triggered at all

Note: all google location apis are enabled , google maps api, places api and geocode api are enabled and a valid api key is given.

I tried all possible solutions available in internet 1. setting zIndex: 1000 a high value to avoid it being hidden behind some other view 2. Tried creating new RN App and added only this component to keep the project clean 3. Referred other SO post and tried to fix it

here the code snippet

<GooglePlacesAutocomplete
  placeholder="Search"
  minLength={2} // minimum length of text to search
  autoFocus={false}
  fetchDetails={true}
  onPress={(data, details = null) => {
    // 'details' is provided when fetchDetails = true
    console.log(data);
    console.log(details);
  }}
  getDefaultValue={() => {
    return ''; // text input default value
  }}
  query={{
    // available options: https://developers.google.com/places/web-service/autocomplete
    key: 'VALID_API_KEY',
    language: 'en', // language of the results
  }}
  styles={{
    description: {
      fontWeight: 'bold',
    },
    predefinedPlacesDescription: {
      color: '#1faadb',
    },
    listView: {
      color: 'black', //To see where exactly the list is
      zIndex: 1000, //To popover the component outwards
      position: 'absolute',
      top: 45
    },
  }}
  currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
  currentLocationLabel="Current location"
  nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
  GoogleReverseGeocodingQuery={
    {
      // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
    }
  }
  GooglePlacesDetailsQuery={{
    // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
    fields: 'formatted_address',
  }}
  filterReverseGeocodingByTypes={[
    'locality',
    'administrative_area_level_3',
  ]} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
  predefinedPlaces={[homePlace, workPlace]}
  predefinedPlacesAlwaysVisible={true}
/>

Answer 1

I had the same issue with this lib, and after trying for hours, I found a solution. The problem was in the billing configuration on the google APIs. Try to configure the project where you are using key and activate billing configurations, it solved my problem. Please let me know if it works for you.

P.S. I hope this can help you.

Answer 2

Make sure to wrap the component in a ScrollView like below :

<ScrollView>
                    <GooglePlacesAutocomplete
                        placeholder='Search destination'
                        minLength={2}
                        onPress={(data, details = null) => {
                            // 'details' is provided when fetchDetails = true
                            console.log(data, details);
                        }}
                        query={{
                            key: mapApiKey,
                            language: 'en',
                        }}


                    />
                </ScrollView>