https://github.com/luchermkens/react-native-gplaces
React Native library for utilizing Google's Autocomplete for Places.
https://github.com/luchermkens/react-native-gplaces
auto autocomplete complete google gplaces native places react react-native react-native-gplaces
Last synced: about 1 year ago
JSON representation
React Native library for utilizing Google's Autocomplete for Places.
- Host: GitHub
- URL: https://github.com/luchermkens/react-native-gplaces
- Owner: LucHermkens
- License: mit
- Created: 2018-10-21T14:57:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T14:33:50.000Z (over 3 years ago)
- Last Synced: 2025-05-03T23:32:02.350Z (about 1 year ago)
- Topics: auto, autocomplete, complete, google, gplaces, native, places, react, react-native, react-native-gplaces
- Language: TypeScript
- Size: 105 KB
- Stars: 23
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-gplaces
React Native library for utilizing Google's Autocomplete for Places.
## Install
**Notice**: Geolocation must be linked, in React Native 0.60+ this is done automatically.
### using npm
```sh
npm install --save react-native-gplaces @react-native-community/geolocation
```
### using yarn
```sh
yarn add react-native-gplaces @react-native-community/geolocation
```
## Importing
### ES6
The module uses an ES6 style export statement, simply use `import` to load the module.
```js
import GPlaces from 'react-native-gplaces';
```
### ES5
If you're using an ES5 require statement to load the module, please add `default`. Look [here](https://github.com/joltup/rn-fetch-blob/wiki/Trouble-Shooting#rnfetchblobfetch-is-not-a-function) for more detail.
```js
var GPlaces = require('react-native-gplaces').default;
```
## Usage
This package supports custom queries if you'd like to use them. For searching queries look [here](https://developers.google.com/places/web-service/autocomplete#place_autocomplete_requests) and queries for getting places look [here](https://developers.google.com/places/web-service/details#PlaceDetailsRequests).
### Creating an instance
You can obtain a Google API key [here](https://developers.google.com/maps/documentation/javascript/get-api-key).
```js
const places = new GPlaces({
key: 'YOUR_GOOGLE_MAPS_API_KEY' // https://developers.google.com/maps/documentation/javascript/get-api-key
});
```
### Search for places
```js
places.search('nemo', {
components: 'country:nl',
types: 'establishment'
})
.then(r => {
// returns ACResult[]
})
.catch(console.error)
```
### Search for places nearby
```js
places.searchNearby('brussel', 2500, {
components: 'country:be',
types: '(cities)'
})
.then(r => {
// returns ACResult[]
})
.catch(console.error)
```
### Get details for a Place
```js
places.getPlaceDetails('ChIJn8N5VRvZxkcRmLlkgWTSmvM', {
fields: 'geometry'
})
.then(r => {
// returns PDResult
})
.catch(console.error)
```
## API
### `constructor GPlaces(options: Options): GPlaces`
Constructor for creating an instance of the GPlaces class
### `request: (url?: string) => Promise (@private)`
Calling this method will fetch an URL and return a JSON response
### `autocompleteRequest: (options?: string) => Promise (@private)`
Calling this method will fetch and return an array of results
### `search: (input?: string, query?: ACQuery | undefined) => Promise`
Calling this method will search for places matching the input.
### `searchNearby: (input?: string, radius?: number, query?: ACQuery | undefined) => Promise`
Calling this method will search for nearby places matching the input in a given radius.
The default radius is 1000m / 1km.
### `getPlaceDetails: (placeid?: string, query?: PDQuery | undefined) => Promise`
Calling this method will get certain details for a place based on a query.
## Types
For up-to-date information about Autocomplete queries look [here](https://developers.google.com/places/web-service/autocomplete#place_autocomplete_requests), for Place Details queries look [here](https://developers.google.com/places/web-service/details#PlaceDetailsRequests).
```ts
export interface ACQuery {
sessiontoken?: string;
offset?: number;
location?: string;
radius?: number;
language?: string;
types?: string;
components?: string;
strictbounds?: boolean;
}
export interface PDQuery {
language?: string;
region?: string;
sessiontoken?: string;
fields?: string;
}
export interface Options {
key: string;
}
export interface MSubstring {
length: number;
offset: number;
}
export type MSubstrings = Array
export interface SFormat {
main_text: string;
main_text_matched_substrings: MSubstrings;
secondary_text: string;
}
export type SFormatting = Array
export interface Term {
offset: number;
value: string;
}
export type Terms = Array
export interface ACResult {
id: string;
place_id: string;
reference: string;
description: string;
matched_substrings: MSubstrings;
structured_formatting: SFormatting;
terms: Terms;
types: Array;
}
export type ACResults = Array
export type Types = Array
export type HTMLAttrs = Array
export interface AddressComponent {
long_name: string;
short_name: string;
types: Types;
}
export type AddressComponents = Array
export interface Photo {
height: number;
html_attributions: HTMLAttrs;
photo_reference: string;
width: number;
}
export type Photos = Array
export interface Location {
lat: string;
lng: string;
}
export interface Viewport {
northeast: Location;
southwest: Location;
}
export interface Geometry {
location: Location;
viewport: Viewport;
}
export interface PDResult {
address_components: AddressComponents;
adr_address: string;
formatted_address: string;
geometry: Geometry;
icon: string;
id: string;
name: string;
photos: Photos;
place_id: string;
reference: string;
scope: string;
types: Types;
url: string;
utc_offset: number;
vicinity: string;
}
```