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

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

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

[maazwaqar33]

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