Newsworthy Presidential Mistakes

    react-native-google-places-autocomplete-benestudio

    1.2.8 • Public • Published

    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 react-native@0.28 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} // 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]}
          />
        );
      }
    });

    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 API" 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)

    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)

    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

    Install

    npm i react-native-google-places-autocomplete-benestudio

    DownloadsWeekly Downloads

    10

    Version

    1.2.8

    License

    MIT

    Last publish

    Collaborators

    • adambene