react-native-google-autocomplete

React-Native-Google-Autocomplete

Using render props to make google autocomplete work nicely with any design.

Installation

yarn add react-native-google-autocomplete

Props

Props	Descriptions
apiKey	Your api key get from https://developers.google.com/places/documentation
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 provide lng is required
lng	optional - The longitue. If provide lat is required

Render Props

Props	Descriptions
inputValue	A string you can put to your input for controlled input
handleTextChange	most important function this is the callback for the text change just put it inside your TextInput
locationResults	The array result
fetchDetails	Http call when you have the place_id, good when you want to get more info after click an item
isSearching	Boolean if search is on
clearSearch	Clear the search result, can be nice when you have a clear button next to your text input

*(clearSearch was previously clearSearchs)

Results

The locationResults give you this. The maximum result set by Google is 5 location 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 call the fetchDetails this is what you got

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[];
  }>;
}

Examples

import { GoogleAutoComplete } from 'react-native-google-autocomplete';

function MyComponent() {
  return (
    <GoogleAutoComplete apiKey="YOUR API KEY" debounce={300}>
      {({ inputValue, handleTextChange, locationResults, fetchDetails }) => (
        <React.Fragment>
          <TextInput
            style={{
              height: 40,
              width: 300,
              borderWidth: 1,
              paddingHorizontal: 16,
            }}
            value={inputValue}
            onChangeText={handleTextChange}
            placeholder="Location..."
          />
          <ScrollView style={{ maxHeight: 100 }}>
            {locationResults.map((el, i) => (
              <LocationItem
                {...el}
                fetchDetails={fetchDetails}
                key={String(i)}
              />
            ))}
          </ScrollView>
        </React.Fragment>
      )}
    </GoogleAutoComplete>
  );
}

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.