/ Miscellaneous

React Native library for utilizing Google's Autocomplete for Places

React Native library for utilizing Google's Autocomplete for Places


React Native library for utilizing Google's Autocomplete for Places.


using npm

npm install --save react-native-gplaces

using yarn

yarn add react-native-gplaces



The module uses an ES6 style export statement, simply use import to load the module.

import GPlaces from 'react-native-gplaces';


If you're using an ES5 require statement to load the module, please add default. Look here for more detail.

var GPlaces = require('react-native-gplaces').default;


This package supports custom queries if you'd like to use them. For searching queries look here and queries for getting places look here.

Creating an instance

You can obtain a Google API key here.

const places = new GPlaces({
  key: 'YOUR_GOOGLE_MAPS_API_KEY' // https://developers.google.com/maps/documentation/javascript/get-api-key

Search for places

places.search('nemo', {
  components: 'country:nl',
  types: 'establishment'
  .then(r => {
    // returns ACResult[]

Search for places nearby

places.searchNearby('brussel', 2500, {
  components: 'country:be',
  types: '(cities)'
  .then(r => {
    // returns ACResult[]

Get details for a Place

places.getPlaceDetails('ChIJn8N5VRvZxkcRmLlkgWTSmvM', {
  fields: 'geometry'
  .then(r => {
    // returns PDResult


constructor GPlaces(options: Options): GPlaces

Constructor for creating an instance of the GPlaces class

request: (url?: string) => Promise<any> (@private)

Calling this method will fetch an URL and return a JSON response

autocompleteRequest: (options?: string) => Promise<ACResult[]> (@private)

Calling this method will fetch and return an array of results

search: (input?: string, query?: ACQuery | undefined) => Promise<ACResult[]>

Calling this method will search for places matching the input.

searchNearby: (input?: string, radius?: number, query?: ACQuery | undefined) => Promise<ACResult[]>

Calling this method will search for nearby places matching the input in a given radius.
The default radius is 1000m / 1km.

getPlaceDetails: (placeid?: string, query?: PDQuery | undefined) => Promise<PDResult>

Calling this method will get certain details for a place based on a query.


For up-to-date information about Autocomplete queries look here, for Place Details queries look here.

export interface ACQuery {
  sessiontoken?: string;
  offset?: number;
  location?: string;
  radius?: number;
  language?: string;
  types?: string;
  components?: string;
  strictbounds?: boolean;

export interface PDQuery {
  language?: string;
  region?: string;
  sessiontoken?: string;
  fields?: string;

export interface Options {
  key: string;

export interface MSubstring {
  length: number;
  offset: number;
export type MSubstrings = Array<MSubstring>

export interface SFormat {
  main_text: string;
  main_text_matched_substrings: MSubstrings;
  secondary_text: string;
export type SFormatting = Array<SFormat>

export interface Term {
  offset: number;
  value: string;
export type Terms = Array<Term>

export interface ACResult {
  id: string;
  place_id: string;
  reference: string;
  description: string;
  matched_substrings: MSubstrings;
  structured_formatting: SFormatting;
  terms: Terms;
  types: Array<string>;
export type ACResults = Array<ACResult>

export type Types = Array<string>
export type HTMLAttrs = Array<string>

export interface AddressComponent {
  long_name: string;
  short_name: string;
  types: Types;
export type AddressComponents = Array<AddressComponent>

export interface Photo {
  height: number;
  html_attributions: HTMLAttrs;
  photo_reference: string;
  width: number;
export type Photos = Array<Photo>

export interface Location {
  lat: string;
  lng: string;
export interface Viewport {
  northeast: Location;
  southwest: Location;
export interface Geometry {
  location: Location;
  viewport: Viewport;

export interface PDResult {
  address_components: AddressComponents;
  adr_address: string;
  formatted_address: string;
  geometry: Geometry;
  icon: string;
  id: string;
  name: string;
  photos: Photos;
  place_id: string;
  reference: string;
  scope: string;
  types: Types;
  url: string;
  utc_offset: number;
  vicinity: string;