react-native-google-place-picker

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

iOS	Android

Table of contents

• Install
  • iOS
  • Android
• Usage
  • Example
• Response object

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:

   1#import <GoogleMaps/GoogleMaps.h>
   2#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:

1include ':react-native-google-place-picker'
2project(':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:

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

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

1<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2    package="com.example"
3    android:versionCode="1"
4    android:versionName="1.0">
5
6    ...
7
8    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
9
10    ...
11
12    <application>
13
14      ...
15
16      <meta-data
17          android:name="com.google.android.geo.API_KEY"
18          android:value="YOUR_API_KEY" />
19
20      ...
21
22    </application>
23</manifest>

Usage

1import RNGooglePlacePicker from 'react-native-google-place-picker';
2
3RNGooglePlacePicker.show((response) => {
4  if (response.didCancel) {
5    console.log('User cancelled GooglePlacePicker');
6  }
7  else if (response.error) {
8    console.log('GooglePlacePicker Error: ', response.error);
9  }
10  else {
11    this.setState({
12      location: response
13    });
14  }
15})

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

Credits

Thanks following repositories' inspiration/help:

• react-native-create-library
• react-native-image-picker
• react-native-maps
• react-native-lock

License

Code in this git repo is licensed MIT.