Google Places SDK for React Native

Google Places SDK for React Native. Places SDK allows you to build location aware apps that responds contextutally to the local businesses and other places near the user's device.

Table of contents

• Requirements
  • Minimum Platform Version
  • Google Places API Key
• Installation
• Usage
  • Initialize SDK
    • Initialize SDK
  • Fetch Predictions
    • Sample Implementation
  • Fetch Place By ID
    • Sample Implementation
• Contributing
• Licence

Requirements

Minimum Platform Version

• Android: 21
• iOS: 13

Google Places API Key

• Get Android API Key
• Get iOS API Key

Installation

npm install react-native-google-places-sdk
#OR
yarn add react-native-google-places-sdk

Usage

Initialize SDK

initialize(apiKey: string): void

SDK needs to be initialize only once per App start before using any other functions. Preferably in the root file, e.g., App.tsx.

import GooglePlacesSDK from 'react-native-google-places-sdk';

const GOOGLE_PLACES_API_KEY = ""; // add your Places API key
GooglePlacesSDK.initialize(GOOGLE_PLACES_API_KEY);

Fetch Predictions

fetchPredictions(query: string, filters?: PredictionFiltersParam): Promise<PlacePrediction[]>

PredictionFiltersParams

type PredictionFiltersParam = {
  types?: string[];
  countries?: string[];
  locationBias?: LocationBounds;
  locationRestriction?: LocationBounds;
  origin?: LatLng;
};

PlacePrediction

type PlacePrediction = {
  description: string;
  placeID: string;
  primaryText: string;
  secondaryText: string;
  types: string[];
  distanceMeters: number;
}

Sample Output

{
  "description": "Mumbai, Maharashtra, India",
  "distanceMeters": null,
  "placeID": "ChIJwe1EZjDG5zsRaYxkjY_tpF0",
  "primaryText": "Mumbai",
  "secondaryText": "Maharashtra, India",
  "types": [
    "locality",
    "political",
    "geocode"
  ]
}

Sample Implementation

import GooglePlacesSDK, { PLACE_FIELDS } from 'react-native-google-places-sdk';

GooglePlacesSDK.fetchPredictions(
  "Mumbai", // query
  { countries: ["in", "us"] } // filters
)
  .then((predictions) => console.log(predictions));
  .catch((error) => console.log(error));

// ...

Fetch Place By ID

fetchPlaceByID(placeID: string, fields?: FieldsParam): Promise<Place>

FieldsParam

• Allowed Fields: Refer PLACE_FIELDS in 'react-native-google-sdk'

• If no fields or empty array is passed, then all fields will be fetched for given the place ID.

// type
string[]

// Example
import { PLACE_FIELDS } from 'react-native-google-places-sdk';

const fields = [PLACE_FIELDS.NAME, PLACE_FIELDS.PLACE_ID, PLACE_FIELDS.ADDRESS_COMPONENTS]

Place

type Place = {
  name: string | null;
  placeID: string | null;
  plusCode: string | null;
  coordinate: LatLng | null;
  openingHours: string | null;
  phoneNumber: string | null;
  types: string[] | null;
  priceLevel: number | null;
  website: string | null;
  viewport: (LocationBounds & { valid: boolean }) | null;
  formattedAddress: string | null;
  addressComponents:
    | {
        types: string[];
        name: string;
        shortName: string;
      }[]
    | null;
  attributions: string | null;
  rating: number;
  userRatingsTotal: number;
  utcOffsetMinutes: number | null;
  iconImageURL: string | null;
  businessStatus: BusinessStatus;
  dineIn: AtmosphereCategoryStatus;
  takeout: AtmosphereCategoryStatus;
  delivery: AtmosphereCategoryStatus;
  curbsidePickup: AtmosphereCategoryStatus;
  photos: {
    attributions: {
      url: string;
      name: string;
    };
    reference: string;
    width: number;
    height: number;
  }[];
};

Sample Implementation

import GooglePlacesSDK, { PLACE_FIELDS } from 'react-native-google-places-sdk';

GooglePlacesSDK.fetchPlaceByID(
  placeID = "ChIJwe1EZjDG5zsRaYxkjY_tpF0",
  fields = [PLACE_FIELDS.NAME, PLACE_FIELDS.TYPES]
)
  .then((place) => console.log(place));
  .catch((error) => console.log(error));
// ...

Example Project

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT