react-native-google-places-autocomplete: Not showing predictions list with Expo

I have my component but the List showing the predicted places based on what I write is not showing. Any ideas?

"expo": "~36.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-google-places-autocomplete": "^1.4.0",
"react-native-maps": "^0.26.1",
"react-native-maps-directions": "^1.7.3",

PS: I am using Expo

import React from "react";
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import { Platform } from "react-native";

// import { Container } from './styles';

export default function Search() {
  return (
    <GooglePlacesAutocomplete
      placeholder="Para onde?"
      placeholderTextColor="#333"
      onPress={(data, details) => {
        console.log(data, details);
      }}
      query={{
        key: "AIzaSyBVFhY3cURPTbAoOnkyAeijkAt2kqRJ2iY",
        language: "pt"
      }}
      textInputProps={{
        autoCapitalize: "none",
        autoCorrect: false
      }}
      fetchDetails={true}
      enablePoweredByContainer={false}
      styles={{
        container: {
          position: "absolute",
          top: Platform.select({ ios: 60, android: 40 }),
          width: "100%"
        },
        textInputContainer: {
          flex: 1,
          backgroundColor: "transparent",
          height: 54,
          marginHorizontal: 20,
          borderTopWidth: 0,
          borderBottomWidth: 0
        },
        textInput: {
          height: 54,
          margin: 0,
          borderRadius: 0,
          paddingTop: 0,
          paddingBottom: 0,
          paddingLeft: 20,
          paddingRight: 20,
          marginTop: 0,
          marginLeft: 0,
          marginRight: 0,
          elevation: 5,
          shadowColor: "#000",
          shadowOpacity: 0.1,
          shadowOffset: { x: 0, y: 0 },
          shadowRadius: 15,
          borderWidth: 1,
          borderColor: "#ddd",
          fontSize: 18
        },
        listView: {
          borderWidth: 1,
          borderColor: "#ddd",
          backgroundColor: "#fff",
          marginHorizontal: 20,
          elevation: 5,
          shadowColor: "#000",
          shadowOpacity: 0.1,
          shadowOffset: { x: 0, y: 0 },
          shadowRadius: 15,
          marginTop: 10
        },
        description: {
          fontSize: 16
        },
        row: {
          padding: 20,
          height: 58
        }
      }}
    />
  );
}

edit: format and dependencies versions

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 18 (1 by maintainers)

Most upvoted comments

posting here in case it helps anyone - there were two things that I had to do to get me unstuck (am using expo)

i was using the “Get current location” option so i needed to set navigator.geolocation. expo has a package that does this for you: expo-location (i had issues with the two recommended packages in the instructions - from README: // navigator.geolocation = require(‘@react-native-community/geolocation’); // navigator.geolocation = require(‘react-native-geolocation-service’);

anyway, you can use expo-location. just do

import * as Location from "expo-location";

export default AddressInput = (props) => {
    Location.installWebGeolocationPolyfill();
    // ...rest of logic
    return (<GooglePlacesAutocomplete.../>);
}

^ make sure you call installWebGeolocationPolyfill() this inside the component logic so that if it re-renders it is called again. a re-render without doing this may cause a silent failure (presumably because navigator.geolocation becomes null).

after doing 1), i got “You have exceeded your daily request quota for this API” when typing. Turns out this is because i did not have billing enabled/wasn’t fully signed up for google places api. Make sure you’ve signed up, hopefully this doesn’t become expensive/isn’t a dealbreaker for you - the free tier is pretty generous and good enough for development.

cc @carlossuds @kwameaj67

a--hoang on May 26, 2020

yup the true answer is billing, just enable the billing and it’s worked.

maazwaqar33 on Apr 16, 2022

@carlossuds The example you provided is working correctly, only your API key is invalid. I think your problem has nothing to do with Expo.

When I look at my google api keys, the amount of requests keeps increasing whIle I type locations and nothing shows up. That’s why I thought it is (or should be) working fine. And also one of my instructors said my code had no issues and it could be related to Expo. I really dont know, if its the api it shouldnt be working running with the cli, right?

carlossuds on Feb 7, 2020

This package is no longer maintained and simply not working. I tried on IOS with expo. I didn’t even get a list of results. I found a other package that is working like a charm:

https://www.npmjs.com/package/react-native-places-input

jaing on May 10, 2020