react-native-google-places

iOS/Android Google Places Widgets (Autocomplete Modal) and API Services for React Native Apps

Notice: The Google Play Services version of the Places SDK for Android (in Google Play Services 16.0.0) is deprecated as of January 29, 2019, and will be turned off on July 29, 2019. A new version of the Places SDK for Android is now available. I suggest you read the documentations again and update your app to use v3.0.1 (or above) of this package

Shots

<img width=200 title="Modal Open - iOS" src="./shots/modal-open-ios.png"> <img width=200 title="Modal in Search - iOS" src="./shots/modal-in-search-ios.png"> <img width=200 title="Modal Open - Android" src="./shots/modal-open-android.png"> <img width=200 title="Modal in Search - Android" src="./shots/modal-in-search-android.png"> <img width=200 title="Place Picker Open - Android" src="./shots/picker-android.png"> <img width=200 title="Place Picker Open - iOS" src="./shots/picker-ios.png">

Versioning:

• for RN >= 0.40.0, use v3+ (e.g. react-native-google-places@3.1.0)
• If you are still using the v2 of this library, you really should not, then Version 2 Documentations

Sample App

• A new Sample App is available to help with sample usage and debugging issues.

Install

npm i react-native-google-places --save

OR

yarn add react-native-google-places

Google Places API Set-Up

1. Sign up for Google Places & Google Maps APIs for Android in Google API Console to grab your Android API key (not browser key).
2. Read further API setup guides at https://developers.google.com/places/android-sdk/signup.
3. Similarly, sign up for Google Places API for iOS in Google API Console to grab your iOS API key (not browser key).
4. Ensure you check out further guides at https://developers.google.com/places/ios-sdk/get-api-key.
5. Enable billing for your projects - please do not file any issues on this repo without first checking you have, indeed, enabled billing on your account.
6. With both keys in place, you can proceed.

Post-Install Steps (iOS)

1) Auto Linking & Cocoapods Integration

• If you do not have CocoaPods already installed on your machine, run gem install cocoapods to set it up the first time. (Hint: Go grab a cup of coffee!)
• If you are not using Cocoapods in your project already, run cd ios && pod init at the root directory of your project. This would create a Podfile in your ios directory.
• Run react-native link react-native-google-places at the root directory of your project and ensure you edit your Podfile to look like the sample below (remove all the targets you are not building for, such as Tests and tvOS):

# platform :ios, '9.0'

target '_YOUR_PROJECT_TARGET_' do

  # Pods for _YOUR_PROJECT_TARGET_
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTSettings',
    'RCTAnimation',
    'RCTLinkingIOS',
    # Add any other subspecs you want to use in your project
    # Remove any subspecs you don't want to use in your project
  ]

  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  # This should already be auto-added for you, if not add the line below
  pod 'react-native-google-places', :path => '../node_modules/react-native-google-places'

end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == 'react-native-google-places'
      target.build_configurations.each do |config|
        config.build_settings['CLANG_ENABLE_MODULES'] = 'No'
      end
    end
    if target.name == "React"
      target.remove_from_project
    end
  end
end

• Replace all references to YOUR_PROJECT_TARGET with your project target (it's the same as project name by default).
• By now, you should be all set to install the packages from your Podfile. Run pod install from your ios directory.
• Close Xcode, and then open (double-click) your project's .xcworkspace file to launch Xcode. From this time onwards, you must use the .xcworkspace file to open the project. Or just use the react-native run-ios command as usual to run your app in the simulator.

2) Configuration on iOS

• In your AppDelegate.m file, import the Google Places library by adding

    @import GooglePlaces; 
    @import GoogleMaps;

on top of the file.

• Within the didFinishLaunchingWithOptions method, instantiate the library as follows - read about a better way to secure this below:

[GMSPlacesClient provideAPIKey:@"YOUR_IOS_API_KEY_HERE"];
[GMSServices provideAPIKey:@"YOUR_IOS_API_KEY_HERE"];

• Ensure you have the required location permissions for the application by declaring keys for NSLocationWhenInUseUsageDescription and NSLocationAlwaysAndWhenInUseUsageDescription in your info.plist file, either using Xcode or manually editing the file e.g.

<key>NSLocationWhenInUseUsageDescription</key>
	<string>RNGPDemos needs your location to show you places</string>
	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
	<string>RNGPDemos needs your location to show you places</string>

Post-Install Steps (Android)

Auto Linking With Your Project

• This was done automatically for you when you ran react-native link react-native-google-places. Or you can run the command now if you have not already.
• In your AndroidManifest.xml file, request the following permissions:

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

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

• In your /android/gradle.properties file, add your API key, read about a better way to secure this below

RNGP_ANDROID_API_KEY=Insert_API_KEY_here

Manual Linking With Your Project (Android)

• The following additional setup steps are optional as they should have been taken care of, for you when you ran react-native link react-native-google-places. Otherwise, do the following or just ensure they are in place;
• Add the following in your android/settings.gradle file:

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

• Add the following in your android/app/build.grade file:

dependencies {
    ...
    compile project(':react-native-google-places')
}

• Add the Google Maven Repo in your android/build.gradle file:

allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        maven {
            url "https://maven.google.com" 
        }
    }
}

• Add the following in your ...MainApplication.java file:

import com.arttitude360.reactnative.rngoogleplaces.RNGooglePlacesPackage;

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      ...
      new RNGooglePlacesPackage() //<-- Add line
  );
}

Additional Requirement (Android)

• Enable multiDex for your application.
• Ensure you are compiling with Java 1.8 or above. Add the following in your /android/app/build.gradle file:

android {
    defaultConfig {
        ...
        multiDexEnabled true
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

• Finally, we can run react-native run-android to get started.

Usage

Allows your users to enter place names and addresses - and autocompletes your users' queries as they type.

Import library

import RNGooglePlaces from 'react-native-google-places';

Open Autocomplete Modal (e.g as Callback to an onPress event)

class GPlacesDemo extends Component {
  openSearchModal() {
    RNGooglePlaces.openAutocompleteModal()
    .then((place) => {
		console.log(place);
		// place represents user's selection from the
		// suggestions and it is a simplified Google Place object.
    })
    .catch(error => console.log(error.message));  // error is a Javascript Error object
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => this.openSearchModal()}
        >
          <Text>Pick a Place</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Optional Parameters

To customize autocomplete results as listed for Android and iOS in the official docs, you can pass an options object as a parameter to the openAutocompleteModal() method as follows:

    RNGooglePlaces.openAutocompleteModal({
            initialQuery: 'vestar', 
            locationRestriction: {
                latitudeSW: 6.3670553, 
                longitudeSW: 2.7062895, 
                latitudeNE: 6.6967964, 
                longitudeNE: 4.351055
            },