Originally published on Medium
This is the first of a series of posts about the integration of Google Maps and Places in a real-world React Native app using Expo.
The Reason
One of the features required in my most recent side-project was to implement Google Maps and Places in a real-world React Native app using Expo. I found several tutorials, but none of them worked, at least for me. It was a tough battle to implement it.
I spent a lot of time trying to implement Google Maps and Places and getting lots of errors. I also spent a huge amount of time searching on Stack Overflow without any successful results. After this hard struggle, I finally achieved my goal. Then I thought, I should write a post series where I go through all the steps for how to implement this feature and more. So in this post, we’ll create a React native app integrating Google Maps and Places.
The Requirement
Give the user the ability to look for places nearby them and get all their information like photos, vicinity, address, rating, reviews, opening hours, and eventually, in a new version, add the function to look for filters. In addition to that, add the feature that allows the users to tap a specific restaurant and get the dishes associated with the restaurant. This part isn’t the aim of this post — we will talk about it later in another post.
Breaking the Problem Down Into Chunks Called User Stories
Our MVP (Minimum Viable Product)
Let’s plan first and then code.
So, let's break the requirement down into smaller pieces called user stories to see what we’re going to accomplish as a deliverable. Each of the next stories could be broken down into even more specific tasks, but I think for now this is fine.
- As an end-user, I want to see a dashboard with menu options to find places such as banks, ATMs, bars, coffee, hotels, bus stations, and gyms.
- I want to have a tab navigator at the bottom with the menus: home, profile, and settings.
- I want to have the ability to tap either bank, bars, coffee, hotels, bus station, or gyms and get the outcome list of the current place I clicked on.
- I want to see each place’s rating, location, name, description, stars, and vicinity.
- I want to have a search bar to look for a place by a keyword, name, or city.
- I want to tap a place and get the details about it. >Note: I’m assuming you already have a lit bit of experience working with React Native apps and with the main concepts surround React.js. We’re going to build the app under the power of Expo.io tools from scratch to guide you with a step-by-step guide. >So, let’s get started and dirty our fingers.
Setting Up Expo
To be able to work with Expo, you need two things: A local development (Expo CLI) tool and a mobile client (Expo client)to open your app.
Pre-requisites:
Node.js
Git
Installing Expo CLI
npm install -g expo-cli
Installing Expo client tool on your Android device
This is the fastest way to start an Expo project. We’ll need this tool since it allows us to run the apps and show a preview of what the changes we’re developing will look like.
You can download the Expo client app from the Play Store. However, if you prefer to run your Expo apps on your local machine, you need to install a simulator or emulator.
If you need more information about Expo settings, I highly recommend you to go to the official site.
Create an Expo account
You need to sign up on Expo.io. So, go to the Expo login page and create your account. You’ll need it for the next step.
Now we already have Expo CLI installed, and so the next step is to create the app via Expo command.
Creating the project
I’m using Windows Powershell. If you’re using Gitbash, you’ll need extra arguments in non-interactive mode.
expo init rn-google-maps-places
After running that command, choose a template — you can navigate up and down with your arrow keys. After that, add an Expo name app in the name property. This will be the final output:
Just after you press ENTER, you’ll get to the next screen. Type Y to accept to download all the project’s dependency via Yarn. And just wait for a while until all of them are downloaded!
Now, open a command prompt (I’m using PowerShell)to login to Expo. You’ll be prompted to enter the username you just created before and also your password.
expo login
Starting the development server
Having done that, now we need to start the development server. You just need to run the next command. Don't forget to get into the root of the project you just created in the prior steps.
npm start
After that, you’ll get this screen if you goto your favorite browser.
Google Cloud Platform setup
We have to set the Google Cloud Platform up. Login on Google, and then, create the project. You should be able to see something like the next screen.
Now we need to enable both APIs: Maps SDK for Android and Places API. Go to the library menu and search for these APIs, and then enable them.
*Maps SDK for Android
*Places API
Once you’re sure both are enabled, its time to create credentials. From this, we will need the API key to be able to connect our app with these two services. So please save it somewhere — we’ll need it later.
Credential Creation
Google API key
So far, we’ve set up the Expo app and its tools, and we also created the Google project to get the API key. In the next post, we’ll begin dirtying our fingers coding.
Thanks for reading! If this story turned out to be interesting, I’d really appreciate it if you like and share it with your friends. I hope to add a little bit more knowledge to you.
Top comments (2)
Hi, where is the next post where you integrated google maps and places API into the expo App?
Sorry. I forgot to post it here. But you can find it (the second part) on Medium. There you go betterprogramming.pub/google-maps-...
Thanks for reading. Let me know if that works for you.