Installations

npm install etm-react-native-google-places-autocomplete

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.6.0

NPM Version

6.9.0 Pull Requests

Open

47

Total

286

Closed

90

Merged

149

Issues

Open

137

Total

690

Closed

553

Releases

43

v2.5.1

Updated on Nov 02, 2022

v2.5.0

Updated on Oct 31, 2022

Release 2.4.1

v2.4.1

Updated on Aug 11, 2021

Release 2.4.0

v2.4.0

Updated on Aug 09, 2021

Release 2.3.0

v2.3.0

Updated on Aug 02, 2021

Release 2.2.0

v2.2.0

Updated on Mar 15, 2021

View All 43 releases

Languages

1

JavaScript

JavaScript (100%)

Developer

FaridSafi

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

GitHub Statistics

MIT License

2,048 Stars

494 Commits

880 Forks

22 Watchers

2 Branches

110 Contributors

Updated on Jul 08, 2025

Maintainers

1

View All 110 Contributors

Package Meta Information

Latest Version

1.4.0

Package Id

etm-react-native-google-places-autocomplete@1.4.0

Unpacked Size

46.47 kB

Size

23.30 kB

File Count

9

NPM Version

6.9.0

Node Version

12.6.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

3

lodash.debounce prop-types qs

Peer Dependencies

1

react-native

Dev Dependencies

3

eslint eslint-config-airbnb eslint-plugin-react

react-native-google-places-autocomplete

Customizable Google Places autocomplete component for iOS and Android React-Native apps

Preview

Installation

npm install react-native-google-places-autocomplete --save
Get your Google Places API keys and enable "Google Places API Web Service" (NOT Android or iOS) in the console.
Enable "Google Maps Geocoding API" if you want to use GoogleReverseGeocoding for Current Location

Example

1import React from 'react';
2import { Image, Text } from 'react-native';
3import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
4
5const homePlace = { description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
6const workPlace = { description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};
7
8const GooglePlacesInput = () => {
9  return (
10    <GooglePlacesAutocomplete
11      placeholder='Search'
12      minLength={2} // minimum length of text to search
13      autoFocus={false}
14      returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
15      keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
16      listViewDisplayed='auto'    // true/false/undefined
17      fetchDetails={true}
18      renderDescription={row => row.description} // custom description render
19      onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
20        console.log(data, details);
21      }}
22
23      getDefaultValue={() => ''}
24
25      query={{
26        // available options: https://developers.google.com/places/web-service/autocomplete
27        key: 'YOUR API KEY',
28        language: 'en', // language of the results
29        types: '(cities)' // default: 'geocode'
30      }}
31
32      styles={{
33        textInputContainer: {
34          width: '100%'
35        },
36        description: {
37          fontWeight: 'bold'
38        },
39        predefinedPlacesDescription: {
40          color: '#1faadb'
41        }
42      }}
43
44      currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
45      currentLocationLabel="Current location"
46      nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
47      GoogleReverseGeocodingQuery={{
48        // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
49      }}
50      GooglePlacesSearchQuery={{
51        // available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
52        rankby: 'distance',
53        type: 'cafe'
54      }}
55      
56      GooglePlacesDetailsQuery={{
57        // available options for GooglePlacesDetails API : https://developers.google.com/places/web-service/details
58        fields: 'formatted_address',
59      }}
60
61      filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
62      predefinedPlaces={[homePlace, workPlace]}
63
64      debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
65      renderLeftButton={()  => <Image source={require('path/custom/left-icon')} />}
66      renderRightButton={() => <Text>Custom text after the input</Text>}
67    />
68  );
69}

Styling

GooglePlacesAutocomplete can be easily customized to meet styles of your app. Pass styles props to GooglePlacesAutocomplete with style object for different elements (keys for style object are listed below)

key	type
container	object (View)
description	object (Text style)
textInputContainer	object (View style)
textInput	object (style)
loader	object (View style)
listView	object (ListView style)
predefinedPlacesDescription	object (Text style)
poweredContainer	object (View style)
powered	object (Image style)
separator	object (View style)
row	object (View style)

Example

1<GooglePlacesAutocomplete
2  placeholder='Enter Location'
3  minLength={2}
4  autoFocus={false}
5  returnKeyType={'default'}
6  fetchDetails={true}
7  styles={{
8    textInputContainer: {
9      backgroundColor: 'rgba(0,0,0,0)',
10      borderTopWidth: 0,
11      borderBottomWidth:0
12    },
13    textInput: {
14      marginLeft: 0,
15      marginRight: 0,
16      height: 38,
17      color: '#5d5d5d',
18      fontSize: 16
19    },
20    predefinedPlacesDescription: {
21      color: '#1faadb'
22    },
23  }}
24  currentLocation={false}
25/>

Features

Places autocompletion
iOS and Android compatibility
Places details fetching + ActivityIndicatorIOS/ProgressBarAndroid loaders
Customizable using the styles parameter
XHR cancellations when typing fast
Google Places terms compliant
Current location
Predefined places

Changelog

1.3.9 : Multiple bugfixes + fixed breaking change in React Native.
1.3.6 : Fixed accuracy issue.
1.3.5 : Fixed bug where input was being cleared.
1.3.4 : Fixed bug where loading was breaking the component.
1.3.3 : Fixed key prop warning and added loading indicator.
1.3.2 : Added small feature which makes the request on componentDidMount() when you already have the default value set.
1.3.1 : Update react-native peerDependecy. (> 0.46)
1.3.0 : Added support for React 16 (isMounted() and propTypes bugfix), support for restricted API key and moving from ListView to Flatlist.
1.2.12 : Fixed render description + docs.
1.2.11 : Fixed current location result onPress event.
1.2.10 : Set default debounce to 0. Fixed debounce typing lag.
1.2.9 : Added isRowScrollable prop.
1.2.8 : Added underlineColorAndroid, listUnderlayColor, renderLeftButton, renderRightButton props. Added nearbyPlacesAPI option None.

License

MIT

Authors

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.1

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More