# @liberdev/react-native-google-autocomplete

> Using render props to make google autocomplete work nicely with any design.

Latest version **0.1.7** (published 2019-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @liberdev/react-native-google-autocomplete
pnpm add @liberdev/react-native-google-autocomplete
yarn add @liberdev/react-native-google-autocomplete
bun add @liberdev/react-native-google-autocomplete
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2019-08-07 |
| First published | 2019-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Emanuel Quimper |
| Maintainers | liberdev |

## Links

- npm: https://www.npmjs.com/package/@liberdev/react-native-google-autocomplete
- npm.io page: https://npm.io/package/@liberdev/react-native-google-autocomplete

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [query-string](https://npm.io/package/query-string.md) ^6.8.1
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8

## Recent versions

- 0.1.7 (latest) — 2019-08-07

## README

# React-Native-Google-Autocomplete

Using render props to make google autocomplete work nicely with any design.

## Installation

`yarn add react-native-google-autocomplete`


## Props


| Props      | Descriptions                                                                                           |
| ---------- | ------------------------------------------------------------------------------------------------------ |
| apiKey     | Your api key get from https://developers.google.com/places/documentation                               |
| debounce   | optional - default 300                                                                                 |
| language   | optional - default en                                                                                  |
| queryTypes | optional - default address - https://developers.google.com/places/web-service/autocomplete#place_types |
| minLength  | optional - default 2 - this is the min length of the term search before start                          |
| components | optional - A grouping of places to which you would like to restrict your results.                      |
| radius     | optional - The distance (in meters) within which to return place results.                              |
| lat        | optional - The latitude. If provide lng is required                                                    |
| lng        | optional - The longitue. If provide lat is required                                                    |


## Render Props


| Props            | Descriptions                                                                                       |
| ---------------- | -------------------------------------------------------------------------------------------------- |
| inputValue       | A string you can put to your input for controlled input                                            |
| handleTextChange | most important function this is the callback for the text change just put it inside your TextInput |
| locationResults  | The array result                                                                                   |
| fetchDetails     | Http call when you have the place_id, good when you want to get more info after click an item      |
| isSearching      | Boolean if search is on                                                                            |
| clearSearchs     | Clear the search result, can be nice when you have a clear button next to your text input          |

## Results

The locationResults give you this. The maximum result set by Google is 5 location by query.

```js
export interface GoogleLocationResult {
  description: string;
  id: string;
  matched_substrings: Array<{
    length: number;
    offset: number;
  }>;
  place_id: string;
  reference: string;
  structured_formatting: {
    main_text: string;
    secondary_text: string;
    main_text_matched_substrings: Array<{
      length: number;
    }>;
  };
  terms: Array<{
    offset: number;
    value: string;
  }>;
  types: string[];
}
```

When call the fetchDetails this is what you got

```js
export interface GoogleLocationDetailResult {
  adr_address: string;
  formatted_address: string;
  icon: string;
  id: string;
  name: string;
  place_id: string;
  scope: string;
  reference: string;
  url: string;
  utc_offset: number;
  vicinity: string;
  types: string[];
  geometry: {
    location: {
      lat: number;
      lng: number;
    };
    viewport: {
      [type: string]: {
        lat: number;
        lng: number;
      };
    };
  };
  address_components: Array<{
    long_name: string;
    short_name: string;
    types: string[];
  }>;
}
```

## Examples

```js
import { GoogleAutoComplete } from 'react-native-google-autocomplete';

function MyComponent() {
  return (
    <GoogleAutoComplete apiKey="YOUR API KEY" debounce={300}>
      {({ inputValue, handleTextChange, locationResults, fetchDetails }) => (
        <React.Fragment>
          <TextInput
            style={{
              height: 40,
              width: 300,
              borderWidth: 1,
              paddingHorizontal: 16,
            }}
            value={inputValue}
            onChangeText={handleTextChange}
            placeholder="Location..."
          />
          <ScrollView style={{ maxHeight: 100 }}>
            {locationResults.map((el, i) => (
              <LocationItem
                {...el}
                fetchDetails={fetchDetails}
                key={String(i)}
              />
            ))}
          </ScrollView>
        </React.Fragment>
      )}
    </GoogleAutoComplete>
  );
}
```

## Typings

You can import both result typing if you need for flow or typescript.

```js
import { GoogleLocationDetailResult, GoogleLocationResult } from 'react-native-google-autocomplete';
```

## Restrict by country

If you want to restrict the search by country you can add this as a props `components="country:ca"`. This here would example restrict it to Canada only.

---
_Source: https://npm.io/package/@liberdev/react-native-google-autocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._