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. [email protected]

Installation

yarn add @appandflow/react-native-google-autocomplete

npm i @appandflow/react-native-google-autocomplete

Usage

The useGoogleAutocomplete hook takes 2 arguments

Config object

Exposed properties

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[];
  distance_meters?: number; // Present when origin parameter is provided
}

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

Custom Headers

You can pass custom headers to the underlying Google Places API requests. This is useful for application restrictions such as Android app or iOS bundle restrictions.

// Android
const { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {
  headers: {
    'X-Android-Package': 'com.example.app',
    'X-Android-Cert': 'your-signing-certificate-fingerprint',
  },
});

// iOS
const { locationResults, setTerm } = useGoogleAutocomplete(API_KEY, {
  headers: {
    'X-Ios-Bundle-Identifier': 'com.example.app',
  },
});

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.