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

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

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.

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

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

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

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

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

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

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

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

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

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

The MIT License.