React Native Wrapper of Google Place Picker for iOS + Android

react-native-google-place-picker

React Native Wrapper of Google Place Picker for iOS + Android.

iOS	Android

Install

npm install react-native-google-place-picker --save

Then you must install the native dependencies. You can use rnpm (now part of react-native core) to add native dependencies automatically:

react-native link

or link manually like so:

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]

2. Go to node_modules ➜ react-native-google-place-picker and add RNGooglePlacePicker.xcodeproj

3. In XCode, in the project navigator, select your project. Add libRNGooglePlacePicker.a to your project’s Build Phases ➜ Link Binary With Libraries

4. Inside your ios directory add a file named Podfile with the following content

5. Run pod install --project-directory=ios in the project root path.

6. At the top of your AppDelegate.m:

   #import <GoogleMaps/GoogleMaps.h>
   #import <GooglePlaces/GooglePlaces.h>
   

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

   NSString *kAPIKey = @"YOUR_API_KEY";
   [GMSPlacesClient provideAPIKey:kAPIKey];
   [GMSServices provideAPIKey:kAPIKey];
   
   

7. Run react-native run-ios

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNGooglePlacePickerPackage; to the imports at the top of the file
• Add new RNGooglePlacePickerPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

include ':react-native-google-place-picker'
project(':react-native-google-place-picker').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-google-place-picker/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':react-native-google-place-picker')

4. Add permisson and your YOUR_API_KEY to your manifest file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example"
    android:versionCode="1"
    android:versionName="1.0">

    ...

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    ...

    <application>

      ...

      <meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="YOUR_API_KEY" />

      ...

    </application>
</manifest>

Usage

import RNGooglePlacePicker from 'react-native-google-place-picker';

RNGooglePlacePicker.show((response) => {
  if (response.didCancel) {
    console.log('User cancelled GooglePlacePicker');
  }
  else if (response.error) {
    console.log('GooglePlacePicker Error: ', response.error);
  }
  else {
    this.setState({
      location: response
    });
  }
})

Example

• A fully working example

The Response Object

key	type	Description
didCancel	boolean	Informs you if the user cancelled the process
error	string	Contains an error message, if there is one
address	string/null	The formated address of selected location, null if not available
name	string	The name of this Place
google_id	string	The unique id of this Place
latitude	number	The latitude value of selected location
longitude	number	The longitude value of selected location

Download Details:

Author: zhangtaii

GitHub: https://github.com/zhangtaii/react-native-google-place-picker

#react-native #react #programming