Skip to content

Latest commit

 

History

History
219 lines (174 loc) · 7.67 KB

README.md

File metadata and controls

219 lines (174 loc) · 7.67 KB
Raw

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: "+1 650-543-4800", 
	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.