@appandflow/react-native-google-autocomplete
v2.0.1
Published
A library to help you use google places autocomplete
Downloads
403
Readme
About
App & Flow is a Montreal-based, close-knit team that specializes in React Native and Expo development. We work with multiple YC-backed startups and are recommended by Expo. Need a hand? Let’s build together. [email protected]
Installation
yarn add @appandflow/react-native-google-autocomplete
npm i @appandflow/react-native-google-autocomplete
Usage
The useGoogleAutocomplete
hook takes 2 arguments
| Arg | Description | | ------ | ---------------------------------------------------------------------------------------------------------- | | apiKey | Your google places api key | | config | optional config object |
Config object
| Property | Description | | ------------ | ------------------------------------------------------------------------------------------------------ | | debounce | optional - default 300 | | 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 |
Exposed properties
| 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 |
Code example
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>
);
Results
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[];
}>;
}
Typings
You can import both result typing if you need for flow or typescript.
import {
GoogleLocationDetailResult,
GoogleLocationResult,
} from 'react-native-google-autocomplete';
Restrict by country
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.