Masks and Mobile Phones
So You Want To Build A Mobile App...

Kathryn O'Donnell
It is a truth universally acknowledged, that a JavaScript programmer in possession of a good idea, must be in want of an mobile app.

Like many programmers before me, I decided it was time that I figure out how to code up a mobile app and get it deployed to the Google Play Store and Apple's App Store. And it's summer 2021, so what else do I have going on anyway?

 

There are a lot of great (and free!) tutorials on how to go about this step-by-step; here, I wanted to share some of the lessons I learned on my journey in the hopes that they may be of use to those who follow a similar path.

 

Just jump in.

 

Overall, it was very easy to build and deploy an app. To be completely honest with you, there are fiddly little bits all over the process, but I didn't run into much that Stack Exchange didn't already have covered. I'm a hands-on learner and, despite having coded up lots of webpages, I had thought developing a mobile app would be too complex without taking a proper class or having an expert on call -- I was totally wrong and I regret not doing this years ago!

Download or update XCode, Android Developer Studio, and your development machine OS.

 

I did not do this as a first step, and ending up having to backtrack and rework things as certain tools would not work with slightly older versions. Unfortunately, at that point certain tools would not work with the newest versions; e.g., I ended up having to downgrade my Java version on my final Android deployment build.  So keep an eye out for errors that may be caused by incompatible versions.

 

Use React Native.

 

If you have JavaScript knowledge, picking up the React Native framework will pose little problem.  React Native allows you to build a single JavaScript codebase into both an Android and iOS app. There will be some missing functionality from not using Kotlin (Android) or Swift (iOS), and not using platform-specific capabilities, but React Native is great for your first foray into app land. I tried Swift first, and while it is a fairly easy language to pick up, I found myself focusing more on learning the language as opposed to just building the app I wanted to build. With React Native, I could focus on the mechanics of the app and not the language. It also allowed me to build something in just a couple weeks rather than months. And as a bonus, I got both an Android and iOS app out of it.

 

Use Expo.

 

Expo is a React platform that gets you coding fast and gives you a bunch of freebies in building your React Native app. Go to https://docs.expo.dev to get started with the step-by-step tutorial. I particularly liked that I could, for essentially no effort, use any Google font, code up navigation really quickly, fiddle with any small differences between Android and iOS, and load my splash screen. Also incredibly helpful is that, as you change your code, you can see your changes immediately reflected in your app as it is running on an iPhone or Android emulator. Since I am an old and prefer to use emacs as my IDE, this made me very happy.

 

Get comfortable with React Native animations.

 

All the cool apps have cool animations. I'd previously done my webpage animations in JavaScript and CSS, so it was a little bit of a learning curve for me to get comfortable with React Native's animations, as well as React's useRef and useEffect Hooks. Try multiple tutorials -- I found that people used different techniques and syntax to create basically the same animation, and it took me a few different tries before what they were doing clicked into place. I'm not an expert by any means, but I can now make objects wiggle and change color when I want them to, which was enough for my first app.

 

Fire up Adobe. Or Figma.

 

When I open Adobe, it is like a great ancient beast has been awakened from deep inside my little Mac Mini. It lumbers forth, sucking up all available CPU and RAM, and once it is started it will. Not. Stop. That said, it is nifty software for creating background images for your app, designing splashscreens, and editing artwork to be used in your Google Play and App Store storefronts. It is more than a little overpowered for much of my graphic artistry, so I have become enamored of Figma, which is a free web-based graphics editor. It's great for creating the items you'll need for your app and storefronts. When you create your Google Play and App Store listings, pay attention to the screenshots, pictures, and icons that are required to publish; they aren't lying when they give you dimension requirements!

 

Stop using Expo.

 

Once you have your app all coded up and you are ready to deploy to the stores, you should consider "ejecting to a bare workflow". I applied to have my app in Google Play's Designed for Families program, which has restrictions on the SDKs that can be included in your build. Expo, when building for deployment, automatically includes some SDKs that are not approved, as I found out in my first rejection notice from Google Play, and these SDKs cannot be removed. To avoid this, you eject to a bare workflow, then use React Native's instructions to build your Android (https://reactnative.dev/docs/signed-apk-android) and iOS (https://reactnative.dev/docs/publishing-to-app-store) apps. And then test your builds in XCode and Android Developer Studio. I found I had to make some small adjustments that Expo was doing quietly in the background, like using a JPG rather than a PNG in full background images on iOS. You know, those little annoying things that take you multiple days to figure out that make programming so very rewarding.

 

And that's it.

I do hope that my experiences will help you in your app building journey. Or at least encourage you to just go for it and start creating. My app is called 'Fill It App!' and is available for .99USD on Google Play and Apple's App Store now!

 

 

Happy coding!