https://github.com/zhangtaii/react-native-google-place-picker

React Native Wrapper of Google Place Picker for iOS + Android.
https://github.com/zhangtaii/react-native-google-place-picker

android google input ios location map native picker place react react-native

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zhangtaii/react-native-google-place-picker
• Owner: zhangtaii
• License: mit
• Archived: true
• Created: 2016-09-09T09:14:35.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-11-01T11:39:33.000Z (almost 5 years ago)
• Last Synced: 2024-04-23T02:36:44.740Z (5 months ago)
• Topics: android, google, input, ios, location, map, native, picker, place, react, react-native
• Language: Java
• Homepage:
• Size: 105 KB
• Stars: 184
• Watchers: 5
• Forks: 54
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome-react-native - react-native-google-place-picker ★148 - React Native Wrapper of Google Place Picker for both Android and iOS. (Components / UI)

README

        

# react-native-google-place-picker [![npm version](https://badge.fury.io/js/react-native-google-place-picker.svg)](https://badge.fury.io/js/react-native-google-place-picker)

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

iOS | Android

------- | ----

 | 

## Table of contents

- [Install](#install)

  - [iOS](#ios)

  - [Android](#android)

- [Usage](#usage)

  - [Example](#example)

- [Response object](#the-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](https://github.com/q6112345/react-native-google-place-picker/blob/master/Podfile.template)

6. Run `pod install --project-directory=ios` in the project root path.

7.  At the top of your `AppDelegate.m`:

    ```objc

    #import 

    #import 

    ```

    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];

    ```

8. 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`:

```groovy

include ':react-native-google-place-picker'

project(':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`:

```groovy

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

```

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

```xml

    ...

    

    ...

    

      ...

      

      ...

    

```

## Usage

```javascript

import RNGooglePlacePicker from 'react-native-google-place-picker';

RNGooglePlacePicker.show((response) => {

  if (response.didCancel) {

    console.log('User cancelled GooglePlacePicker');

  }

  else if (response.error) {

    console.log('GooglePlacePicker Error: ', response.error);

  }

  else {

    this.setState({

      location: response

    });

  }

})

```

### Example

* A fully working [example](https://github.com/q6112345/react-native-google-place-picker/tree/master/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](https://github.com/frostney/react-native-create-library)

* [react-native-image-picker](https://github.com/marcshilling/react-native-image-picker)

* [react-native-maps](https://github.com/lelandrichardson/react-native-maps)

* [react-native-lock](https://github.com/auth0/react-native-lock)

### License

Code in this git repo is licensed MIT.