react-native-google-places

react-native-google-places

iOS/Android Google Places Widgets (Autocomplete, Place Picker) for React Native Apps

Shots

Install

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

Google Places API Set-Up

1. Sign up for Google Places API 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-api/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-api/start.
5. With both keys in place, you can proceed.

Post-install Steps

iOS (requires CocoaPods)

Auto Linking With Your Project (iOS & Android)

• 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.

Manual Linking With Your Project (iOS)

• In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name].
• Go to node_modules ➜ react-native-google-places and add RNGooglePlaces.xcodeproj.
• In XCode, in the project navigator, select your project. Add libRNGooglePlaces.a to your project's Build Phases ➜ Link Binary With Libraries.

Install CocoaPods Dependencies

• 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.
• Add pod 'GooglePlaces', (pod 'GooglePlacePicker' only if you are using the PlacePickerModal) and pod 'GoogleMaps' to your Podfile. Otherwise just edit your Podfile to include:

source 'https://github.com/CocoaPods/Specs.git'

target 'YOUR_APP_TARGET_NAME' do

  pod 'GooglePlaces'
  pod 'GoogleMaps'
  pod 'GooglePlacePicker'

end

• In your AppDelegate.m file, import the Google Places library by adding @import GooglePlaces; and @import GoogleMaps; on top of the file.
• Within the didFinishLaunchingWithOptions method, instantiate the library as follows:

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

• 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.

Android

• In your AndroidManifest.xml file, request location permissions and add your API key in a meta-data tag (ensure you are within the tag as follows:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<application
      android:name=".MainApplication"
      ...>
	<meta-data
		android:name="com.google.android.geo.API_KEY"
		android:value="YOUR_ANDROID_API_KEY_HERE"/>
	...
</application>

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 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
  );
}

• 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>
    );
  }
}

Open PlacePicker Modal

class GPlacesDemo extends Component {
  openSearchModal() {
    RNGooglePlaces.openPlacePickerModal()
    .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>Open Place Picker</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Example Response from the Autocomplete & PlacePicker Modals

{ 
	placeID: "ChIJZa6ezJa8j4AR1p1nTSaRtuQ", 
	website: "https://www.facebook.com/", 
	phoneNumber: "[phone]", 
	address: "1 Hacker Way, Menlo Park, CA 94025, USA", 
	name: "Facebook HQ",
	latitude: 37.4843428,
	longitude: -122.14839939999999
}

• Note: The keys available from the response from the resolved Promise from calling RNGooglePlaces.openAutocompleteModal() are dependent on the selected place - as phoneNumber, website are not set on all Google Place objects.

Troubleshooting

On iOS

You have to link dependencies and re-run the build:

1. Run react-native link
2. Try Manual Linking With Your Project steps above.
3. Run react-native run-ios

On Android

1. Run "android" and make sure every packages is updated.
2. If not installed yet, you have to install the following packages:

• Extras / Google Play services
• Extras / Google Repository
• Android (API 23+) / Google APIs Intel x86 Atom System Image Rev. 13
• Check manual installation steps

License

The MIT License.