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.
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
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 AirBnb’s excellent 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
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.