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.