Week 3: Building a mobile app in 24 hours using Expo Snack and CLI
How we built a working mobile app in a day using Expo for React Native
Building a mobile app can be daunting. When we built our previous app, we spent countless hours not only writing code but also trying to solve dependencies and testing simulators to work on multiple platforms. Even then, the simulators visualized our apps on computer screens making it difficult to really see how our app really looks and feels like on your device, in your hand. To share the app for testing amongst friends, we had to pay hundreds of dollars for an Apple Developers account to upload the app on TestFlight.
Fortunately, we recently came across Expo and were very excited to try it out for our Pioneer.app project TasteSpace. Feel free to read our previous post to learn more detials but essentially we are building a personalized food recommendation system so you can instantly know what to eat at any restaurant. Amongst Expo tools, Snack ( https://snack.expo.io ) is basically Codepen or JsFiddle customized for React Native app development. It allows you to instantly test code in a browser. It lets you quickly test and prototype your app in seconds without having to install a myriad of dependencies. What’s even cooler is that with Expo CLI, we are also able to build and debug our app not only on a our computers but seamlessly send it to our devices for hands-on testing. It may sound like magic but all you need to do is launch Expo, scan the QR code, and your app is instantly downloaded to your phone.
To try this out, first we install the Expo Cli in your terminal:
npm install -g expo-cli
and then choose your favorite app demo, clone the repo and start the Expo projet with npm install and npm start. This would launch your default browser to a webpage that looks like the image below. You’ll notice you can also run iOS or Android simulators on your computer if you’ve installed the necessary dependencies such as Xcode and Simulator.
Now, to send our app to our phones, we set Connection to Tunnelmode and scan the the QR code to directly launch the Expo app which will download your packaged app to your phone. See the video below to see this in action!
Another amazing feature is that when you edit your code, the app on your phone will also update in real time!
Conclusion
When you need to develop a quick prototype of a mobile app and would like to test it by seeing how it looks and feels on the device in your hand, we highly recommend trying out Expo. Thanks to Expo, we were able to build our app in 24 hours because it made it so easy to test and debug our code. To learn more about what we are building please check out our other posts listed below
