Using REST APIs with React Native Google-Places-Autocomplete Library (requestURL)

While working on a project on React Native, my team and I ran into a problem securing our API keys on our server-side rather than our client-side. The library does not have enough documentation when it comes to connecting HTTP URLs to the component. So here I am, to help you out. First, it is important to dig into the source code to understand how this library works.

When typing in the textbox, the library uses the Places Autocomplete API to generate a list of predictions; it makes a call to an HTTP link of this format:

https://maps.googleapis.com/maps/api/place/autocomplete/output?parameters

It displays the top 5 predictions on a dropdown. When a user then selects one of these options it makes a call to the Places Details API for that specific place and returns all the details to you in JSON or XML format (however you request it in the output parameter). That call is made to this link:

https://maps.googleapis.com/maps/api/place/details/output?parameters

To add your own server-side URL, use the requestUrl component as demonstrated below:

requestUrl={{    useOnPlatform: “all”,    url: `https://example.cloudfunctions.net/exampleUrl`,}}

This URL is used in different ways in the source code to make calls to the Autocomplete, Details, NearbySearch, and Geocode APIs which all are used to return extremely accurate predictions.

The React Native Google-Places-Autocomplete library requests your URL four different times in four different ways, and we will have to write four different HTTP requests for these separate calls:

1.

request.open(        
'GET',
`${url}/place/autocomplete/json?input=`+ encodeURIComponent(text) + '&' + Qs.stringify(props.query),
);

2.

`${url}/geocode/json?` +          
Qs.stringify({
latlng: latitude + ',' + longitude,
key: props.query.key, ...props.GoogleReverseGeocodingQuery, });

3.

`${url}/place/nearbysearch/json?` +          
Qs.stringify({
location: latitude + ',' + longitude,
key: props.query.key,
...props.GooglePlacesSearchQuery,
});

4.

request.open(        
'GET',
`${url}/place/details/json?` +
Qs.stringify({
key: props.query.key,
placeid: rowData.place_id,
language: props.query.language, ...props.GooglePlacesDetailsQuery,
}),
);

Essentially, it takes the URL you input in the requestUrl property and makes the calls by appending parameters and queries to the end. As a result, you should build HTTP requests that look similar to the following:

For Google Places Autocomplete and Google Places Details API:

For Google Places NearbySearch API and Google Places Geocode API:

With these four functions, and with the correct usage of the requestURL property, your Google-Places-Autocomplete will hide your API key and will work according to your function calls!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store