Google Places AutoComplete In React Native

In a previous article on google maps, we covered Geolocation and Geocoder to get the current location of the user and get the actual name of the place from its latitude and longitude using Geocoder. Now in this article, we will cover the Google Places Autocomplete feature. This feature is nothing but googles maps search places text input component, which searches for the places based on the match value we send to the text input. We will use React Native Google Places Autocomplete library to implement this feature.

What Is Google Maps?

Google Maps is a way of organizing the world’s geographic information where we can map a geographic location. In addition, Google Maps offers real-time traffic, street maps, satellite view, and routing information for various modes of transport like trains, bus, car, walk, etc. 

Installation

1. npm install react-native-google-places-autocomplete–save

cd iOS && pod install     

Customizable Google Places autocomplete component for iOS.

2. Before using this feature you need to enable Places API and Maps JavaScript API in Google Cloud Console. For that click on side menu at the top left corner and select “API & Services” => “Enable API & Services” => “+ ENABLE API & SERVICES”

Now you can see Places API and Maps JavaScript API; if not, you can search them using the input bar.

3. Click on each and enable them, showing an “API Enabled” message with a complete green icon. An important note is to allow your billing configuration to use this service. Otherwise, it will not show any places autocomplete suggestions.

4. We also need API KEY which we already created while using the geocoder in the previous article. You can find that API key in “API & SERVICES” => “Credentials” => “API keys”.

Let us start with the actual implementation,

Import the library as shown above. We will see the basic usage by logging the place’s data on the onPress() function as below. Here you can use any placeholder I have passed as a “Search” query prop to give your API key, which we created and got from the credentials section.

Replace “YOUR API KEY” with your actual key. And on the onPress() function, you will get the place’s data and details. To get the data and details successfully, you must set fetch details props to true.

The result of the above code will be as soon as below in the screenshot.

The Data and Details which we printed on the onPress() function will be like this,

const Details = [{

   "address_components": [

       {"long_name": "Pune", "short_name": "Pune", "types": [Array]},

       {"long_name": "Pune", "short_name": "Pune", "types": [Array]},

       {"long_name": "Maharashtra", "short_name": "MH", "types": [Array]},

       {"long_name": "India", "short_name": "IN", "types": [Array]}

   ],

   "adr_address": "<span class=\"locality\">Pune</span>, <span class=\"region\">Maharashtra</span>, <span class=\"country-name\">India</span>",

   "formatted_address": "Pune, Maharashtra, India",

   "geometry": {

       "location": {

           "lat": 18.5204303,

           "lng": 73.8567437

       },

   "viewport": {

       "northeast": [Object],

       "southwest": [Object]}

   },

   "icon": "https://maps.gstatic.com/mapfiles/place_api/icons/v1/png_71/geocode-71.png",

   "icon_background_color": "#7B9EB0",

   "icon_mask_base_uri": "https://maps.gstatic.com/mapfiles/place_api/icons/v2/generic_pinlet",

   "name": "Pune",

   "photos": [Array],

   "place_id": "ChIJARFGZy6_wjsRQ-Oenb9DjYI",

   "reference": "ChIJARFGZy6_wjsRQ-Oenb9DjYI",

   "types": ["locality", "political"],

   "url": "https://maps.google.com/?q=Pune,+Maharashtra,+India&ftid=0x3bc2bf2e67461101:0x828d43bf9d9ee343",

   "utc_offset": 330,

   "Vicinity": "Pune",

   "website": "http://www.punecorporation.org"

}]

From these details, you can use information like the place’s name in the description or the long_name/short_name of the place. You can also use the latitude and longitude of the place. You also get a place you can use for waypoints on the map in the future.

Many other props will help you to customize the place autocomplete search input bar, such as the below styles can be passed to the style prop for changing the visual.

const styles = StyleSheet.create({

 textInputContainer: {

   flex: 1,

   height: 48,

   width: screenWidth - 80,

   alignItems: 'center',

   justifyContent: 'center',

 },

 textInput: {

   height: 48,

   paddingHorizontal: 20,

   borderRadius: 4,

   borderWidth: 1,

   borderColor: Colors.secondary,

   fontSize: FontSize.SubHeading,

   fontFamily: FontFamily.asap_medium,

   paddingRight: 25

 },

 listView: {

   zIndex: 1000,

   alignSelf: 'center',

   position: 'absolute',

   top: placeholder ? 120 : 65,

   right: 0,

   width: screenWidth - 20,

 },

 description: {

   fontSize: FontSize.SubHeading,

   fontFamily: FontFamily.asap_medium,

 },

 row: {

   width: screenWidth - 20,

   alignSelf: 'center',

   marginLeft: 10

 },

 separator: {

   borderWidth: 0,

   borderColor: Colors.white,

   backgroundColor: Colors.white

 },

 loader: {

   flexDirection: 'row',

   justifyContent: 'flex-end',

   height: 20,

 },

});

To show the result after hiding the keyboard, you can use the keepResultsAfterBlur prop and set it to true.

You can use renderRow() function to show a customized view for the search results.

Related Read : React Google Map With A Custom Pin Marker