Why can't I select results from Google Places Autocomplete in React Native?

You type an address, the suggestions appear, and tapping one does nothing, or the list just vanishes. It’s confusing because the search is clearly working and the results are fine. If the component sits inside a ScrollView or another list, the fix can be a single prop on that parent.

Why it happens

The results show up in a FlatList under the text input. When the whole thing sits inside a ScrollView or another list, that parent’s keyboardShouldPersistTaps setting controls what a tap does while the keyboard is open. Its default is 'never', which means a tap outside the focused input closes the keyboard and the tap doesn’t reach the children. The input loses focus, the results hide, and the row you tapped never gets the press.

The second cause shows up when fetchDetails is on. Tapping a row then sends a Place Details request, and onPress only runs after that request succeeds, so a failing request (the API isn’t enabled, billing isn’t set up, or the key isn’t allowed to call it) makes every row look dead.

How to fix it

1. Let taps through on every parent list. The library’s README says to apply this to all ancestor ScrollViews and FlatLists, not only the nearest one:

   <ScrollView keyboardShouldPersistTaps="handled">
     <GooglePlacesAutocomplete /* props below */ />
   </ScrollView>

2. Clear the nesting warning if you see VirtualizedLists should never be nested inside plain ScrollViews with the same orientation. Either move the autocomplete above the ScrollView, or pass disableScroll so its results list stops scrolling on its own and the page scrolls instead.

3. Use the Places API your project can turn on. Google’s legacy Places API isn’t available to Google Cloud projects created after March 1, 2025, so a new project needs Places API (New), with billing enabled. Recent versions of the library support it through isNewPlacesAPI, and that’s what we’re using in the example below:

   <GooglePlacesAutocomplete
     placeholder="Search for an address"
     query={{ key: process.env.EXPO_PUBLIC_GOOGLE_PLACES_KEY!, language: "en" }}
     isNewPlacesAPI
     fetchDetails
     fields="location,formattedAddress"
     disableScroll
     onFail={(error) => console.warn("Places error", error)}
     onPress={(data, details) => {
       const lat = details?.location.latitude;
       const lng = details?.location.longitude;
       saveAddress(details?.formattedAddress ?? data.description, lat, lng);
     }}
   />

   On the legacy API, the coordinates are in details.geometry.location.lat and .lng instead. The fields prop asks for only the fields you use, and it’s there because Place Details (New) has no default field list.

4. Keep the key on your server in a live app. The library’s README notes it doesn’t work with Android or iOS app restrictions, so a key that ships inside your app can be copied and used to run up your Places bill, even when it’s restricted to the Places API. We’d put a small endpoint on your backend in front of Google, which checks that the user is signed in and calls Google with a key only your server knows, and point the library at it with the requestUrl prop:

   requestUrl={{
     useOnPlatform: "all",
     url: "https://your-backend.example.com/places",
     headers: { Authorization: `Bearer ${accessToken}` },
   }}

   The library adds its usual paths (such as /v1/places:autocomplete) to that URL, so your endpoint forwards each request to Google and returns Google’s response unchanged. While you’re still testing, a key restricted to the Places API is enough.

How you know it’s fixed

On a real phone, when you type an address and tap a suggestion, the input fills with the address while your onPress code runs once with coordinates. Nothing shows up from onFail in the logs.

If it still doesn’t work

Check that no other wrapper, such as a KeyboardAvoidingView inside a second ScrollView, is missing keyboardShouldPersistTaps. If results never appear at all, look at the onFail message to see whether it names an API or billing problem. On the web, the library needs a proxy server passed through requestUrl, because of the CORS rules on Google’s Places endpoints.