@appandflow/react-native-google-autocomplete

About

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. [e-mail]

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

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.