Skip to content
A react-native component with render props around the Google Autocomplete Api
TypeScript JavaScript
Branch: master
Clone or download
Latest commit 45a3f98 Jul 8, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Merge pull request #24 from EQuimper/develop Jul 8, 2019
.editorconfig Initial Commit Apr 17, 2018
.gitignore Add rollup Apr 17, 2018
.prettierrc Initial Commit Apr 17, 2018
LICENSE Add license Aug 14, 2018
README.md Add lat and lng props Jul 8, 2019
package.json Add lat and lng props Jul 8, 2019
rollup.config.js Add rollup Apr 17, 2018
tsconfig.json Version 0.1.2 Jun 6, 2018
tslint.json Add rollup Apr 17, 2018
yarn.lock Fix query radius Jul 4, 2019

README.md

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
clearSearchs Clear the search result, can be nice when you have a clear button next to your text input

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.

You can’t perform that action at this time.