Categories: softare development

How to Use Google Places AutoComplete in React Native

The Google Places Autocomplete feature in mobile software development is useful for searching for verified locations that are available on Google Maps.

In this tutorial, we are going to see how we can use the Google Places Autocomplete feature in our React Native application.

Let’s get started!

1. Obtain an API key from Google Cloud Console

First you need to add billing to your Google Cloud Console account and enable Geocoding.

2. Install the Google Places AutoComplete dependency

Read more about the Google AutoComplete dependency

yarn add react-native-google-places-autocomplete

3. Add code for the Google API

<GooglePlacesAutocomplete
    placeholder='Search location'
    returnKeyType={'default'}
    fetchDetails={true}
    currentLocation = {true}
    isRowScrollable={true}
    keepResultsAfterBlur={false}
    enablePoweredByContainer = { false }
    styles={{
      textInputContainer: {
        marginTop: 0,
      },
      textInput: {
        height: 45,
        color: 'black',
        fontSize: 16,
        backgroundColor: '#ddd'
      },
      predefinedPlacesDescription: {
        color: '#1faadb',
      },
      listView: {
        position: 'relative',
        zIndex: 3,
        marginTop: 0,
        padding: 0
      },
      row: {
      backgroundColor: '#FFFFFF',
      height: 100,
      flexDirection: 'row',
      },
      separator: {
      height: 0.5,
      backgroundColor: '#c8c7cc',
      },
      description: {},
      loader: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      height: 20,
      },
    }}

    onPress={(data, details) => {
      // 'details' is provided when fetchDetails = true
      // console.warn(details);
    }}
    query={{
      key: API_KEY,
      language: 'en',
      components: 'country:us'
    }}
    />

Result:

Did it work out for you? Let me know in the comments.

Don’t build mobile apps from scratch

Recent Posts

Optional Chaining (?.): How to Avoid ‘Cannot Read Property’ Errors in JavaScript

One of the most common errors in JavaScript is the dreaded TypeError: Cannot read property…

14 hours ago

ReferenceError vs. TypeError: What’s the Difference?

When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…

3 days ago

document.querySelector() vs. getElementById(): Which is Faster?

When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…

3 days ago

npm vs. Yarn: Which Package Manager Should You Use in 2025?

When starting a JavaScript project, one of the first decisions you’ll face is: Should I…

5 days ago

Why Learn Software Development? (And Where to Start)

Software development is one of the most valuable skills you can learn. From building websites…

1 week ago

JavaScript Multidimensional Arrays

In JavaScript, arrays are used to store multiple values in a single variable. While JavaScript…

2 weeks ago