Speeding up the build of a surprise dinner app in React Native using Expo

This is the first post in a 4-part series about building the iOS and Android app for uncovercity using React Native. You can find the other ones here:

1. Speeding up the build of a surprise dinner app in React Native using Expo
2. Battle testing a ridesharing API and React Native’s MapView in Expo
3. Supporting multiple languages in React Native with Expo Localization
4. The intricacies of nesting navigators in React Native using react-navigation

---

React Native can be hard. But a lot of the heavy lifting can be done by its open source companion toolchain Expo.

Recently, I helped Spanish startup uncovercity build a mobile app to augment their surprise dinner experience.

If you’re a Spanish app store user, you can find the iOS version of the app here and the Android version here. However to get the whole app experience, you’ll have to reserve a table on https://uncovercity.com/

The challenge

Tasks in this project included:

• showing an introductory video to the user to get them excited about the upcoming experience
• picking up the user at a specific location using a ride-sharing API and showing the current position of the client’s ride on a map
• showing several popups indicating the current status of the user’s experience (taxi on its way, taxi arrived, …) and sending a push notification for each status change

The solution

I had built several React Native apps before and knew how tricky it would be to implement custom styling or third-party components.

That’s why I chose Expo in this case, because it provides several predefined components for each of the above mentioned scenarios by default:

• Video: a relatively hassle-free integration of mp4 files
• MapView (based on React Native community’s map component)
• a blurred modal (which doesn’t come with React Native by default).
• and many others…

The biggest time saver

The biggest time-saver was probably how easy Expo makes it to send push notifications. It’s almost too simple. See this guide, or let me sum it up quickly:

• grab a token on the phone by asking the user for notification permissions using Expo’s Permissions component
• send the obtained token to your backend and store it for subsequent requests
• use one of Expo’s push notification libraries (node, Ruby, PHP etc…) to trigger a notification from your backend application logic

I’ve created a very simple example of an Expo push notification server on GitHub using node.js and mongoDB.

Testing those notifications is easy (and fun) as well. You can use your phone-specific token and use the Expo push notification tool to send yourself some push notifications and play around with the parameters.

Why am I saying this?

Many times, we think of native apps as complex systems with a lot of custom programming and the risk of having to dig deep into native iOS/Android code.

My experience in this case has been the complete opposite. Need a video component? Expo provides one out-of-the-box. Need a map integration? Expo has you covered. Need a push notification solution without spending a week on integrating it? Let me cite the Expo docs here: “it’s almost too easy”.

Even trivial things like using Expo’s LinearGradient to show, well, a linear gradient, can save you some headaches here and there.

What about testing?

To wrap up, testing the app on your phone is a piece of cake as well. Expo Client allows you to immediately preview and test the app on your phone within minutes, allowing you to see changes in real-time. Pretty awesome, isn’t it?

Future posts about this project

I’m going to publish another post soon where I talk about my journey of building this app. It’ll cover how we did the API integration and what I learned from doing some real life user testing by living the experience as an uncovercity user myself.

Originally published in ITNEXT on September 27, 2018.