react-native-google-maps-places-autocomplete

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

Preview

Installation

1. npm install react-native-google-maps-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 API" if you want to use GoogleReverseGeocoding for Current Location

Example

import React from 'react';
import { Image, Text } from 'react-native';
import { GoogleMapsPlacesAutocomplete } from 'react-native-google-maps-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 } }};

const GoogleMapsPlacesInput = () => {
  return (
    <GoogleMapsPlacesAutocomplete
      placeholder='Search'
      minLength={2} // minimum length of text to search
      autoFocus={false}
      returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
      keyboardAppearance={'light'} // Can be left out for default keyboardAppearance https://facebook.github.io/react-native/docs/textinput.html#keyboardappearance
      listViewDisplayed='auto'    // true/false/undefined
      fetchDetails={true}
      renderDescription={row => row.description} // custom description render
      onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
        console.log(data, details);
      }}

      getDefaultValue={() => ''}

      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={{
        textInputContainer: {
          width: '100%'
        },
        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='GoogleMapsPlacesSearch' // Which API to use: GoogleReverseGeocoding or GoogleMapsPlacesSearch
      GoogleReverseGeocodingQuery={{
        // available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
      }}
      GoogleMapsPlacesSearchQuery={{
        // available options for GoogleMapsPlacesSearch API : https://developers.google.com/places/web-service/search
        rankby: 'distance',
        type: 'cafe'
      }}

      GoogleMapsPlacesDetailsQuery={{
        // available options for GoogleMapsPlacesDetails API : https://developers.google.com/places/web-service/details
        fields: 'formatted_address',
      }}

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

      debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
      renderLeftButton={()  => <Image source={require('path/custom/left-icon')} />}
      renderRightButton={() => <Text>Custom text after the input</Text>}
    />
  );
}

Styling

GoogleMapsPlacesAutocomplete can be easily customized to meet styles of your app. Pass styles props to GoogleMapsPlacesAutocomplete 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

<GoogleMapsPlacesAutocomplete
  placeholder='Enter Location'
  minLength={2}
  autoFocus={false}
  returnKeyType={'default'}
  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

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

License

MIT

Authors

• Mikalai Suhlob