Building with Expo

Building with Expo

My First App

After accepting the task of developing a mobile application for the racquet sports club I work at - a task I was unknowingly wholly unprepared for - I began scouring the internet for a place to begin. I started reading about how iOS and Android apps were developed and the tools for each. I saw Xcode, Swift, Kotlin, and so many more options. I felt overwhelmed. With only my trusty Dell laptop by my side, I was seeking a simple way to get started that didn't require much background knowledge or particular hardware requirements (Xcode being fairly inaccessible without a Mac computer, for example). My search led me to React Native; a framework built upon React, created for mobile app development.

I was super excited. Here was, I hoped, my answer to developing both an iOS and Android app. By writing code once, it can be compiled for both types of applications, effectively halving development time. I dove into YouTube videos about starting React Native development and found myself waist-deep in Android Studio virtual machines and - with all of my respect for the incredible programmers creating the resources - outdated information regarding React Native. Fervent Google searches resulted in my discovery of Expo.

Expo is a React Native framework that allows users to easily set up and start developing mobile apps. The default framework alone was enough to get me started, and only after spending some time learning Typescript and JavaScript (yes, I was unfamiliar with JavaScript), did I realize how handy the Expo tools were. The tool that aided me most along my journey was Expo's mobile app: Expo Go. The app allows you to scan a QR code and connect to the server being hosted by your development device (i.e. laptop, computer, etc.). I could see my app in real time on my own smartphone, and the start-up time was much faster than the virtual machines on Android Studio. I have always used Android phones and never owned an iPhone; my girlfriend, however, does. Expo Go's quick setup allowed me to periodically check the progress on iOS, despite primarily developing on an Android phone.

A Lesson Learned

Request: create an app that lets users post about finding groups for tennis and pickleball. The idea presented to me by my club's manager and owner. I didn't expect too much difficulty; he only asked for one main feature. How hard could it be? Goal: user-generated content that can be displayed and seen by anyone on the app, preferably in real-time.

Once I realized I would need to connect to an online database, I had a new problem on my hands; my experience with databases was limited, and I did not know any great options. Google's Firebase services - specifically Firestore - were perfect for this. Free to set up and begin using, it promises the ability to store and read information saved in its online database. A few YouTube videos later and I wasn't making much progress. One or two of the things in the videos worked correctly, but overall I had issues with the code and database setup. This was the first major lesson I learned on my journey: seemingly quality resources can become faulty.

Like many facets of life, things on the internet can grow old. The videos I was watching from years prior were no longer up-to-date. It is rare for online publications to receive updates - let alone to be updated as frequently as maintained software. There is one source that is almost always current; however, the resource's documentation. 

Switching from dated videos and guides to documentation halved my frustration and is the most important thing I can recommend to fellow first-time developers. This isn't to say that online content can't be helpful, but when you have what is practically an instruction manual available, try reading that, too.

Development

With the database issue solved, I now needed to create the app. I will admit that having no background in HTML, Javascript, or Typescript led to several weeks of simply learning how to use the languages. Expo and Firebase both offer great code snippets inside their documentation. These, along with some of the online resources mentioned earlier, allowed me to piece-meal my way through the first stages of the app. I decided to go with Expo's Tabs layout for my app: a clean and concise user-interface for switching between routes.

App navigation secured, I moved onto implementing the features the app would need. I learned a few things along the way. I learned that <Pressable> offered more flexibility and customization than the built-in <Button>, using hooks can be confusing but important, storing data in Firestore is easier than reading and displaying it, and - on a similar note - <FlatList> is great for displaying content. I learned that even though the code compiles and works on iOS and Android, there are differences between how things look and other small details, so make sure to test on both operating systems.

A few months of sporadically working hard and hardly working later, I had a functional app on my hands. Functional is being used loosely here, because it didn't really do much. Comprised of the user's profile, ability to add and view posts, and a home screen, I felt like it needed more, despite fulfilling the original request. I ended up adding push notification support and another route that displays programming we offer at the club. At this point, I felt like the app would be contributing positively to the average user, the goal I was aiming for, and the expectation I will have for future apps.

App Submission

For some reason, I had this idea that the Apple Store was some mysterious place that was nearly impossible to get an app approved for, while Google Play streamlined the process and was much less stringent. I was wrong. On top of Google's app requirements (found on Google Play Console at https://play.google/developer-content-policy/), beginning in November 2023, Google Play began requiring individual developer accounts to have 12 testers use the app for 14 days. For developer accounts created before November 2023, this rule did not retroactively take place, but new developers will face this requirement.

Online resources like Termly and Google Docs allowed me to create legal documents for the app, and host them online. I found Expo's free templates and video guide for creating and sizing app icons to be very useful. The Google Play app Testers Community was invaluable for finding my testers. And, of course, Expo Application Services (EAS) streamlined the submission process.

Everything discussed thus far was my Google Play Store undertaking, aside from the $25 Google developer license. Submitting to Apple versus Google was comparatively easy. Once I figured out that my Windows and Android devices were unable to create an Apple ID or purchase an Apple developer license - I had to get my hands on a Mac and $100 for that part - I began working with App Store Connect, Apple's version of Google Play Console. Once again using EAS, I input my Apple credentials to Expo, and they handled App Store Connect's build submission process. From this point, I added app metadata (info to be displayed on the app store), filled out a questionnaire to determine age rating, and provided information for their review process. I submitted the app, and it was approved for distribution after about 36 hours. Several weeks quicker than Google's approval.

Wrapping Up

My biggest perspective shift that I have yet to mention is how I balanced design and development. Going in, I imagined doing all the backend work before starting on UI; this didn't keep me engaged. I'm the type of person, like I imagine most of us are, that has an easier time working on something when it feels useable and isn't hard to view. A white background filled with black text, square boxes, and question marks for images can be... stressful. Changing my approach to working with - at least slightly - pleasant designs made it easier to focus on the task at hand. 

Finally, to any other developers thinking about mobile app design - go for it! The process, while filled with headaches here and there, was rewarding and the fast-paced progress you can track from your own phone is incredible to witness. I hope my article has been helpful for your own journey. I look forward to continuing to learn and improve my mobile app development skills.