Building a Coffee Map with React Native and Expo
The young web developer knows the web. They’ve spent countless hours slinging divs and casting margins. They’ve hammered out countless to-do applications in JavaScript, Python, Golang, Fortran, Basic… you name it!
But now, this hotshot developer wants to conquer a less familiar territory. They want to displace their team’s gang of mobile developers—all of them—by using the hip new framework, React Native. Thinking it’ll be practically like writing a simple web application, they install the React Native CLI and scaffold an empty project.
It starts off just fine. They find out that instead of divs, they must create Views. In order to create text, they must use the built in Text component. Instead of CSS, they must use inline JavaScript styles. In order to create a nice layout, they require some knowledge of flexbox.
But then they want to wield more powerful features like geolocation, audio input, or push notifications. They find that in order to enable these features, they must open up XCode and edit some fairly verbose configuration files, change the plist, and create headers and implementations in Objective-C. They start to think that maybe they should stick to the web.
Enter Expo
Fortunately, the beautiful team over at Expo has created a pretty powerful SDK that greatly improves the React Native developer experience. They’ve made it such that when you create an application with Expo, you will probably never have to crack open XCode or edit any platform-specific configuration files.
If you’re familiar with create-react-app for bootstrapping a React web application, Expo works in pretty much the same way. You run
exp init <project-name>from the command line and then just enter the project directory and run it with exp start.
Expo provides you with a QR code that you can use to view your project right on your device. You could also just run the simulator. The simulator is a little bit faster between saves but doesn’t have quite the performance as the real device.
Espressopedia
It’s like Expedia for coffee. Or something like that. From a high-level standpoint, the app will go like this:
- we will have a map view with the user’s location in center
- on the map will be a set of markers for the locations of coffee & tea shops nearby
We will use the Yelp API for getting the list of coffee places. Their API is pretty straightforward to setup and use, just head over to Yelp and sign up then create an app.
Creating a new project
Let’s get coding. Start by installing the Expo CLI, then initializing a project:
npm install -g expexp init espressopedia
It’ll ask you whether you want to set up a blank template project or one with some starter files like a tab navigator. I chose the blank project because we won’t need any tab navigation.
Now I’m going to test the app in the iOS simulator. You can use your own device as well but then it’s up to you to download the Expo client and set it up. To run the simulator:
exp ios# or for Androidexp android
and to build the project:
exp startNow when you open up your root directory you will find the blank template App.js file.
If you’re a React veteran, this file shouldn’t look too intimidating. Note the usage of View and Text tags. This file uses StyleSheet but we could’ve defined styles as a plain object as well.
Building the Map
The first Expo API we’ll explore is the MapView component.
This Map component is a wrapper for Expo’s MapView component. By electing to wrap the built-in component, we can decorate our map with functionality through lifecycle methods and application-specific methods, such as rendering the markers. Here, it’s not implemented specific to our use case of finding coffee shops — that decision is made in the App.js component that renders it.
Here we pass down an initial region object which should put your map somewhere around the city of Cupertino. (We’ll replace this when we get user location to center our map view.) We also use SafeAreaView for the top level component. This allows our content to look good even with the iPhone X’s whacky screen region.
Getting User Location
To get the user location, we can use the Location and Permissions modules within Expo. Add this to App.js:
Here we make sure to get our user’s permission to use geolocation while our App is mounting. If they refuse, we set an errorMessage in state and have the option of display that rather than the map. Once permission is granted, we can call getCurrentPositionAsync which returns a location object that’s a little more complex than we need, so we massage it getting only the properties we want, namely latitude and longitude (and the deltas so our map knows how much to zoom).
Fetching data
To get our coffee shop data, we’ll query the Yelp API. Its pretty easy to setup an app on Yelp, just log in and go to Manage App. Here you’ll get an API key which you can use to consume their API.
Just as on web, we can leverage the Axios library to perform HTTP requests. Go ahead and run”
npm install --save axiosNow for the sake of modularity, I’ll add a new folder called services inside the app directory, and inside this folder, a file called yelp.js. Here we define how our application will interface with Yelp’s API:
This service works by creating an http client with axios.create and passing in the baseURL and the Authorization header. We can then use it to query the Yelp API by sending a GET request to https://api.yelp.com/v3/businesses/search with query parameters. Axios makes this easier by allowing us to set the parameters as an object in its argument list. After that, the only part of this getCoffeeShops method that makes it unique to our app is where we specify categories in the request. We could change that to “vegan” or “burgers” and it would change the results of our map completely. (Well, mostly.)
Now let’s consume this service inside App.js, starting by importing YelpService:
Now we’re in business! You should be able to see a map with markers on it, as well as your location. Unless you’re on a simulator. Then you’ll see that you’re in San Francisco somewhere. I wonder if that is where the Expo team works?
I hope you got a kick out of this article somehow; hopefully it’ll inspire you to make something even cooler. During my prep for this article I created a similar app with a few more bells and whistles in that it even has filter buttons. One of the filters is “Starbucks” (you know, in case you couldn’t find them all). If you’re interested, you can see that code here.
Since this is my first post, I’d appreciate comments, suggestions, or critiques. That will fire up engagement and make sure that future posts are even better.
Until next time.
