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

What are WebSockets?

If you've played Fortnite, watched a live ESPN match, or used Slack or Microsoft Teams,…

11 hours ago

How to Use Custom Hooks in React

A custom hook in React is a JavaScript function that leverages React’s built-in hooks—like useState,…

3 days ago

South Korea bans downloads of DeepSeek AI until further notice

The South Korean government announced on Monday that it had temporarily halted new downloads of…

2 weeks ago

Which programming language is best for software development?

As a software developer, choosing the right programming language for software development can be a…

2 weeks ago

What is a server farm?

A server farm, also known as a server cluster or data center, is a collection…

2 weeks ago

Elon Musk’s Starlink satellite internet service is awaiting authorization to begin operations in Pakistan.

Pakistan's mobile and broadband internet speeds rank in the bottom 10 percent globally, according to…

2 weeks ago