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:
- Speeding up the build of a surprise dinner app in React Native using Expo
- Battle testing a ridesharing API and React Native’s MapView in Expo
- Supporting multiple languages in React Native with Expo Localization
- The intricacies of nesting navigators in React Native using react-navigation
Speeding up the build of a surprise dinner app in React Native using Expo
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 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’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.
