1.1.1 • Published 2 years ago

react-native-google-auto-complete-place-picker v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

react-native-google-auto-complete-place-picker npm version

Native iOS & Android google place autocomplete picker wrapped into React Native App.

iOSAndroid

Table of contents

Installation

Add the npm package:

npm i react-native-google-auto-complete-place-picker --save

iOS

Installation on iOS should be completely handled with auto-linking, if you have ensured pods are installed after adding this module, no other actions should be necessary

cd ios && pod install

At the top of your AppDelegate.m:

@import GooglePlaces;

And then in your AppDelegate implementation, Add the following to your application:didFinishLaunchingWithOptions :-

NSString *kAPIKey = @"YOUR_PLACES_API_KEY";
[GMSPlacesClient provideAPIKey:kAPIKey];
...

Android

Installation on Android should be completely handled with auto-linking, if you have ensured following steps are performed after installing npm package :-

  1. Open up android/build.gradle file (Project level gradle file)
  • Add jcenter() in the allProjects/repositories above google()
  1. Clean object and rebuild project again

In the AndroidManifest.Xml file , add your places api key in following way :-

<meta-data
        android:name="com.google.android.places.PLACE_API_KEY"
        android:value="place your api key here.."/>

Usage

import GoogleAutoCompletePlacePicker from 'react-native-google-auto-complete-place-picker';

GoogleAutoCompletePlacePicker.pickPlace().then((placeData)=>{
       console.log("place data >>",placeData)
       this.setState({locationResult:JSON.stringify(placeData)})
}).catch((error)=>{
    if(error.code == "GOOGLE_PLACE_PICKER_CANCEL_ERROR"){
        console.log("Cancelled by user.")
     }else if(error.code == "GOOGLE_PLACE_PICKER_UNKNOWN_ERROR"){
        console.log("Some Unknown Error Occured.")
     }else{
        console.log(error.message)
     }
})

Example

The Response Object

paramDescription
nameThe name of this Place
placeIDThe unique id of this Place
formattedAddressThe formated address of selected location
coordinateThe latitude & longitude value of selected location