react-native-google-places-autocomplete: the Web Service API key, not the native SDK keys

The component calls the Web Service API, not the native iOS or Android Places SDKs

react-native-google-places-autocomplete is a React Native component that provides a text input and a live suggestions list backed by the Google Places Autocomplete service. It targets both iOS and Android and ships as a single npm package.

The API dependency is the first thing to settle before writing any code. The README specifies the "Google Places API Web Service" as the API to enable in the Google Cloud console, and it adds "(NOT Android or iOS)" next to that name. Developers who have previously set up native Maps integrations often reach for the Android or iOS-specific Places SDK API types, but this component does not use those. It calls the Places Web Service over HTTP, which is the API type tied to server-side or client-side JavaScript requests.

Billing must be active on the Google Cloud account for that key to return any results. A key without billing produces an error on every request, and the autocomplete dropdown shows nothing. The README links to the Google Places API key documentation for the complete account setup steps, since those steps are outside the package itself.

Installing version 2.6.5 and the three API setup steps

The package is on npm as react-native-google-places-autocomplete. Installing it pulls in the component and its registered dependencies:

npm install react-native-google-places-autocomplete --save

Yarn users can install the same version with:

yarn add react-native-google-places-autocomplete

After installation, getting the component to return results requires completing the Google side first. Step one: enable "Google Places API Web Service" in the console. Step two: confirm billing is active on the account. Step three: enable "Google Maps Geocoding API" if the currentLocation feature will be used for reverse geocoding.

The basic usage mounts one component with the query prop holding the API key and language, and the onPress callback firing when a user selects a suggestion. The details parameter in that callback carries a default value of null in the example code, with a comment in the example reading `// 'details' is provided when fetchDetails = true`. Place coordinates are not available unless fetchDetails is set.

fetchDetails triggers a second API call and changes what onPress receives

Selecting a suggestion from the autocomplete list triggers onPress with two parameters. The data object carries the place description and a place_id. The details parameter is null by default. Setting fetchDetails={true} on the component changes that: it fires a second request to the Places Details API when a suggestion is selected, and details then carries geometry, formatted_address and address components.

For apps that need latitude and longitude, this distinction is the key decision. A field that only records which place a user typed can use the default setup and read the description from data. A map that needs to position a pin after a selection must enable fetchDetails and read from details.geometry.location.

The autoFillOnNotFound prop exists for the edge case where the Places Details API returns a not-found response for a place that appeared in the autocomplete list. Its default is false, per the props table. Setting it to true falls back to the autocomplete data in that situation instead of leaving the field blank. Both fetchDetails and autoFillOnNotFound control the behavior of this second API call, and both default to a state that makes details unavailable.

currentLocation requires a separate geolocation package on React Native 0.60.0+

Setting currentLocation={true} adds a "Current location" entry at the top of the suggestions list. The label for that entry is set with currentLocationLabel. Both props are straightforward, but the underlying geolocation setup on React Native 0.60.0 and later is not.

The README marks this as an "Extra step required" for React Native 0.60.0+. The component does not bundle a geolocation client. Developers must install either @react-native-community/geolocation or react-native-geolocation-service separately, follow the installation steps for that package on both iOS and Android, and then add the line `navigator.geolocation = require(GEOLOCATION_PACKAGE)` somewhere in the application before the GooglePlacesAutocomplete component mounts.

The README gives both package names with links but does not favor one over the other. Each has its own native module installation process, which for iOS means a CocoaPods step and for Android means a Gradle configuration. Skipping the navigator.geolocation assignment means the currentLocation button renders but fails to retrieve a position. The README does not describe a fallback behavior for that failure.

predefinedPlaces injects static entries at the top of the list

The predefinedPlaces prop accepts an array of place objects and renders them above the API suggestions. Each predefined entry needs at minimum a description string and a geometry.location object with lat and lng. The README's example shows a Home and Work entry, each with a hardcoded coordinate pair. Entries without a geometry structure will appear in the list but carry no coordinates when selected via onPress.

The query.components prop adds a country filter to every API request. The README example sets it to country:us, which restricts suggestions to United States results. This value goes inside the query object alongside the API key and language setting. The README does not show how to restrict to more than one country with this prop.

Together, predefinedPlaces and query.components cover the two most common address input requirements: a saved-address shortcut list and a geographic scope limit. An app used only in one country can restrict suggestions immediately without building any server-side filter, and saved addresses show as instant options that require no API call.

The props table is incomplete; GooglePlacesAutocomplete.d.ts is the shipped reference

The README's props table opens with the note: "_This list is a work in progress. PRs welcome!_" That qualifier is visible above the table itself, and the table is cut off before covering the full API. The visible rows include autoFillOnNotFound and currentLocation, along with their types, descriptions and default values, but the table ends without accounting for all supported props.

The repository ships GooglePlacesAutocomplete.d.ts at the root level, and package.json registers it as the types entry point under the "types" key. For teams using TypeScript, the .d.ts file provides the complete prop signatures and is the reference the package actually distributes.

The textInputProps prop, shown in the custom input example, accepts an InputComp key that replaces the default text field. The README example uses the Input component from react-native-elements and passes additional styling through textInputProps, including leftIcon and errorStyle. Any prop that the replacement component accepts can be passed through textInputProps, though the README covers only this one example.

Version 2.6.5 is MIT licensed, with the last push on 2026-09-09.

Calling the Places API directly is the alternative when the component's structure does not fit

react-native-google-places-autocomplete provides a text input with a suggestions list positioned directly below it. That structure is fixed in the component's design. Customization is available through props, but the overall layout, the input at the top and the list below, does not change.

For apps whose design requires something different, the direct alternative is calling the Google Places Autocomplete endpoint using fetch inside a React Native component. That approach returns the same JSON from the same API but places all rendering decisions in the application. The keyboard handling, result debounce, list virtualization and the optional Places Details follow-up are then the application's responsibility rather than the component's.

For web React applications, this package is the wrong choice regardless of customization needs. The package targets React Native specifically. Its currentLocation mechanism depends on the React Native navigator.geolocation assignment, its dependencies assume a mobile JavaScript environment, and the README and examples all target iOS and Android. A browser-based application handling address autocomplete needs a different integration with the Google Places JavaScript API.

Editorial conclusion

react-native-google-places-autocomplete fits React Native apps that need a working Google Places search input, accepting the fixed UI structure. Pass on it if your app cannot enable billing on a Google Cloud account, because without billing the API returns nothing regardless of configuration. Before wiring it into production, enable the Web Service API in your Google Cloud console, confirm billing is active, and verify with a direct API call that your key returns suggestions: a component that renders but shows an empty list is almost always a credential problem, and the component gives no error message.

Frequently asked questions

Official sources

1. FaridSafi/react-native-google-places-autocomplete on GitHub
2. Issues
3. License: MIT
4. README
5. Releases