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

[carlossuds]

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

[austin1134]

I'm also experiencing this in expo.. I've tried all the examples along with some additional examples and tweaking.. but no luck with show results. If I'm lucky I can get the component to show the result for two seconds after I initially type but after that nothing shows..

[carlossuds]

I experienced something like that too. I was looking for a solution then when I came back to the application, the predictions were showing. It only lasted until I typed the next character then it all vanished again.

[geoffmphillips]

I'm having similar issues but the cause seems to be the google api key, not this package. When looking at the response from google places I'm getting a REQUEST_DENIED error "API keys with referer restrictions cannot be used with this API."

What I think would be useful is if there is an error in the response for that error to be made visible in some way.

[lukBakTsh]

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

[kwameaj67]

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

Alright, same problem. got me thinking the whole night looking for the solution

[carlossuds]

@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?

[kwameaj67]

@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?

same with mine but im yet to look at my api

[jailsonpaca]

Hi! you solve your problem? @carlossuds

[kwameaj67]

my api is valid but its not populating the list of places

[carlossuds]

Hi! you solve your problem? @carlossuds

nope.

[jaing]

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

[sethcwhiting]

@carlossuds Have you tried messing around with your CSS? It's been a while since I first set it up in my project, but I think I remember having an issue with a height being set on something and the fact that overflow: 'hidden' was set by default.

[bell-steven]

@carlossuds Are you trying this on the web, or on an Android or iOS device? Because of CORS issues, you need to use the javascript SDK on the web. Otherwise, i'll be more than happy to look into this.

P.S. Thanks for the providing code for reproduction, it makes it way easier.

[a--hoang]

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

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

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

[thomashagstrom]

So there's "using Expo" in the issue template, a PR about Expo support - but this solution from @a--hoang actually works!

[bell-steven]

@a--hoang can you put in a PR to update the docs with this?