rn-google-places-autocomplete

Easy to use Google Places Autocomplete with in-built support for sessionToken generator.

Screenshot

See demo app here

Installation

Note: You must obtain an API Key for Places Autocomplete from your google developer console. This Module uses the HTTP Places Autocomplete web service .

npm install rn-google-places-autocomplete

or

yarn add rn-google-places-autocomplete

Usage

import PlacesAutocomplete from 'rn-google-places-autocomplete';
const apiKey = 'YOUR_API_KEY';

// I recommend using `nanoid` for generating session tokens
const tokenGen () => {
  return Math.random().toString(36).substr(1);
}

// built from the ground up to be easily customized
// includes typings for all options

<PlacesAutocomplete
  googleParameters={{
    apiKey: apiKey,
    components: ['ng']
  }}
  autocompleteContainer={{
    width: '96%',
  }}
  tokenGenerator={tokenGen} // accepts token generator that return string | Promise<string>
  placeholder="Search place"
  fetchActivity={true}
  predictionOptions={{
    icon: <Icon /> // any arbitrary react element,
    highlight: 'matched',
    style: {
      suggestedText: {
        color: '#5c6bc0'
      },
      highlightedText: {
        color: '#303f9f'
      }
    }
  }}
  onSelectAddress={(addr) => {
    // returns a prediction type
  }}
  onQueryError={(e) => {
    // do something with the return error
    // type spec below
  }}
  onFetching={(status) => {
    // true when fetch starts and false when fetch end
    // you can create a custom interaction by listing to this event
  }}
  onClearText={() => {
    // perform actions here when the address gets cleared using the "x" button
  }}
/>

Features

• Supports Session Tokens
• Offers useful events that allows for more customizations
• Easy to style and customize
• Mirrors all parameter on the google documentation here, with typings

Complete PlacesAutocomplete Options

  tokenGenerator: () => string | Promise<string> // inject a function that generates random string. Checkout nanoid

  placeholder: string // input place holder

  value: string // set initial Value

  autocompleteContainer: ViewStyle // style for the container that wraps everything

  inputContainerStyle: ViewStyle // style the view that wraps the TextInput

  inputStyle: TextStyle // style the input box

  fetchOffset: number // number of characters to enter before starting places search

  fetchActivity: boolean | JSX.Element // set to true to show the default fetch activity or passing in your own Element

  predictionOptions: {
    style?: suggestionsStyle, // style every component in the predictions list see styling for more information
    icon?: JSX.Element, // icon to display on the left in each prediction item
    highlight?: decorateTextFormat // matched | unmatched; specifies part of prediction result to highlight
  }

  googleParameters: GoogleParameters // all supported parameters from places autocomplete. see https://developers.google.com/places/web-service/autocomplete

  onSelectAddress: (address: prediction): void // Event | returns the selected prediction type

  onFetching: (status: boolean): void // Event | returns the selected prediction type

  onQueryError: (res: GoogleAutoCompleteResult) // Event | returns the Result from Google Places when status != 'OK'

Stylings

  PlacesAutocomplete {

    autocompleteContainer: ViewStyle // root container

    inputContainerStyle: ViewStyle // input contain style

    inputStyle: TextStyle // input style

    predictionOptions: {

      style: suggestionStyle {

        container: ViewStyle // predictions container style

        itemContainer: ViewStyle // prediction lineItem style

        suggestedText: TextStyle // prediction text style

        highlightedText: TextStyle // styling for when highlight is set

      }

    }

  }

Important types

  // see https://developers.google.com/places/web-service/autocomplete for more 
  // information on the type of values to pass here
  GoogleParameters {
    apiKey: string;
    offset?: number;
    origin?: latlng;
    location?: latlng;
    radius?: number;
    language?: supportedLanguages;
    types?: googlePlacesType,
    components?: Array<iso3166>;
    strictbounds?: boolean;
  }

  // see https://developers.google.com/places/web-service/autocomplete#place_autocomplete_responses
  // for more information on the type of response that'll be populated here
  GoogleAutocompleteResult{
    error_message: string;
    predictions: Array<prediction>;
    status: string;
  }

  // represents each item in the predictions fromplaces autocomplete
  prediction {
    description: string;
    distance_meters?: number;
    id: string;
    matched_substrings: Array<lengthAndOffset>;
    place_id: string;
    reference: string;
    structured_formatting?: structured_formatting;
    terms: Array<offsetAndValue>
    types: Array<string>
  }

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT