Customizable Google Places autocomplete component for iOS and Android React-Native apps
- 1.2.7 : Use
children
prop to pass children elements directly intoGooglePlacesAutocomplete
. - 1.2.6 : Added
renderRow
prop. - 1.2.5 : Added
renderDescription
prop for rendering dropdown item text - 1.2.4 : Added
listViewDisplayed
prop for controlling dropdown - 1.2.3 : Removed ProgressBarAndroid to remove warnings
- 1.2.2 : Added prop to change placeholder text color
- 1.2.1 : Fixed special request characters issue + ensure [email protected] peer dependency.
- 1.2.0 : Using ActivityIndicator therefore removing deprecation warning. Requires react-native >= 0.28
- 1.1.10 : Update to work with react-native > 0.24
- 1.1.9 : Added
setAddressText
method - 1.1.8 : Ability to set address from outside of component
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');
const homePlace = {description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
const workPlace = {description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};
var Example = React.createClass({
render() {
return (
<GooglePlacesAutocomplete
placeholder='Search'
minLength={2} // minimum length of text to search
autoFocus={false}
listViewDisplayed='auto' // true/false/undefined
fetchDetails={true}
renderDescription={(row) => row.terms[0].value} // display street only
onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
console.log(data);
console.log(details);
}}
getDefaultValue={() => {
return ''; // text input default value
}}
query={{
// available options: https://developers.google.com/places/web-service/autocomplete
key: 'YOUR API KEY',
language: 'en', // language of the results
types: '(cities)', // default: 'geocode'
}}
styles={{
description: {
fontWeight: 'bold',
},
predefinedPlacesDescription: {
color: '#1faadb',
},
}}
currentLocation={true} // Will add a 'Current location' button at the top of the predefined places list
currentLocationLabel="Current location"
nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
GoogleReverseGeocodingQuery={{
// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
}}
GooglePlacesSearchQuery={{
// available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
rankby: 'distance',
types: 'food',
}}
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
predefinedPlaces={[homePlace, workPlace]}
/>
);
}
});
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
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) |
<GooglePlacesAutocomplete
placeholder='Enter Location'
minLength={2}
autoFocus={false}
fetchDetails={true}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth:0
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 38,
color: '#5d5d5d',
fontSize: 16
},
predefinedPlacesDescription: {
color: '#1faadb'
},
}}
currentLocation={false}
/>
- 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