React Native Google Places Autocomplete Tutorial

react-native-google-places-autocomplete

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

Changelog

• 1.2.7 : Use
  children
  prop to pass children elements directly into
  GooglePlacesAutocomplete.
• 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

Example

            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} // paling 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 Jago merah : 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]}       />     );   } });
          

Installation

1. npm install react-native-google-places-autocomplete --save
2. Get your Google Places Api keys and enable “Google Places Api Web Service” (Not Android or iOS) in the console.
3. Enable “Google Maps Geocoding Jago merah” if you want to use GoogleReverseGeocoding for Current Location

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)

Example

            <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} />
          

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

License

MIT

Authors

• Farid Safi
• Maxim Yaskevich