App & Flow is a Montreal-based React Native engineering and consulting studio. We partner with the world’s top companies and are recommended by Expo. Need a hand? Let’s build together. team@appandflow.com
yarn add @appandflow/react-native-google-autocomplete
npm i @appandflow/react-native-google-autocomplete
The useGoogleAutocomplete hook takes 2 arguments
| Arg | Description |
|---|---|
| apiKey | Your google places api key |
| config | optional config object |
| Property | Description |
|---|---|
| debounce | optional - default 300 |
| debounceOptions | optional - Configuration options for debounce behavior. |
| language | optional - default 'en' |
| queryTypes | optional - default address - https://developers.google.com/places/web-service/autocomplete#place_types |
| minLength | optional - default 2 - this is the min length of the term search before start |
| components | optional - A grouping of places to which you would like to restrict your results |
| radius | optional - The distance (in meters) within which to return place results |
| lat | optional - The latitude. If provided, lng is required |
| lng | optional - The longitude. If provided, lat is required |
| strictBounds | optional - Returns only places that are strictly within the region defined by location and radius. |
| proxyUrl | optional - This is required if you want to use the hook in a Web based platform. Since we dont use the Google SDK, the http call will fail because of issues related to CORS unless a proxyUrl is provided |
| Property | Description |
|---|---|
| clearSearch | Clears your current search |
| isSearching | Boolean that lets you know the search is underway |
| locationResults | The array of results of the search |
| searchDetails | Function that lets you get more details, good for when you select a result |
| searchError | Errors that could occur during search |
| term/setTerm | The term is the search term used, it's set using setTerm |
This is a minimalistic functionnal snippet that returns 3 results for your search. Clicking on a result logs the details of that result.
const { locationResults, setTerm, clearSearch, searchDetails, term } = useGoogleAutocomplete(API_KEY, { language: 'en', debounce: 300, }); return ( <View> <TextInput value={term} onChangeText={setTerm} /> {locationResults.slice(0, 3).map((el, i) => ( <TouchableOpacity key={String(i)} onPress={async () => { const details = await searchDetails(el.place_id); console.log(JSON.stringify(details, null, 2)); }} > <Text>{el.structured_formatting.main_text}</Text> </TouchableOpacity> ))} </View> );
locationResults returns the following. The maximum result set by Google is 5 locations by query.
export interface GoogleLocationResult { description: string; id: string; matched_substrings: Array<{ length: number; offset: number; }>; place_id: string; reference: string; structured_formatting: { main_text: string; secondary_text: string; main_text_matched_substrings: Array<{ length: number; }>; }; terms: Array<{ offset: number; value: string; }>; types: string[]; }
When calling the searchDetails this is what you get
export interface GoogleLocationDetailResult { adr_address: string; formatted_address: string; icon: string; id: string; name: string; place_id: string; scope: string; reference: string; url: string; utc_offset: number; vicinity: string; types: string[]; geometry: { location: { lat: number; lng: number; }; viewport: { [type: string]: { lat: number; lng: number; }; }; }; address_components: Array<{ long_name: string; short_name: string; types: string[]; }>; }
You can import both result typing if you need for flow or typescript.
import { GoogleLocationDetailResult, GoogleLocationResult, } from 'react-native-google-autocomplete';
If you want to restrict the search by country you can add this as a props components="country:ca". This here would example restrict it to Canada only.