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 accompany their surprise dinner experience.

The challenge

Tasks in this project included:

  • showing an introductory video header in the app to the user to get them excited about the 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 (e.g. taxi on its way, taxi arrived, taxi arrived at restaurant) 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:

The biggest time saver

The biggest time-saver was probably how easy Expo it makes 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’ve written another post about my experience building the uncovercity app, where I 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.