AV's Blog

Reflections on Learning React Native (to Create a Botched Side Project)

February 07, 2019

React Native is a great way to create mobile apps using JavaScript as a language, for both Android and iOS. For someone like me who doesn’t code in Java or doesn’t know Swift or Objective-C, but only knows JavaScript and React, it’s a God-sent.

A few months after learning how to use React Native however, I realized how complex creating mobile apps are, even if React Native is supposed to remove the barriers for those who don’t have iOS or Android development training. In short, I think it still is a good idea to know something about iOS or Android development, so you can do some troubleshooting. Otherwise, one needs to be friends with an iOS or Android developer to get things going.

I learned this while working on a side project that’s supposed to be a mobile app for a non-profit organization I volunteered for. I ended up giving up this project since 1) I’m new to React Native, 2) there are only two of us working on this project and both of us are new to React Native (we didn’t have any other help), 3) the non-profit group wanted a fast turn-around on this project. I felt like I need to work on this project 100% of my time without getting paid. It would take too much of my time learning only React Native and not spending some time for other things like studying for coding interview questions, and writing for this blog. :-) Besides, I started taking a part-time job as an adjunct professor in chemistry this spring semester.

However, for a newbie like me, I believe I’ve done a lot just by myself. My co-hacker and I started using Expo but along the way, we encountered a problem getting Expo to work. Suddenly, the command expo start wouldn’t work, frustrating me for a while. Later on, I realized it was probably because I needed to update my Node.js. I’m not entirely sure, but after doing that, my Expo project started working again. But this was after I’ve totally re-started the project using a different approach to creating a React Native project, which I learned from a Udemy tutorial by Maximillian Schwarzmüller (React Native - The Practical Guide).

This tutorial taught me how to create a React Native app using the react-native-init command, and learned that this route allows one to be able to have access to the native code (Android/Java and iOS/Objective-C), while Expo creates a great deal of abstraction so one doesn’t have to touch native code at all and greatly facilitates the React Native development process. It’s a pity that I didn’t come across a great tutorial for using the Expo route. But I think I liked learning the react-native-init route.

I ended up learning a lot from Maximillian’s tutorial, though I veered from using the recommended versions of modules used in the tutorial, such as react-native-navigation which was taught using version 1. I ended up using the current version (v2) using the docs instead of the ones in the tutorial. I liked learning using the docs, and using the new version (of anything, really) even if it takes me a while to get it going. Because of this tutorial, I was able to get the project mobile app going from the splash screen to a large number of screens for the project. I also ended up loving react-native-navigation (at this point, I haven’t really learned a lot about react-navigation, the module used in Expo-created projects). Going through the Android and iOS codes weren’t much of a problem unless the documentation for installation of a module is poorly written.

Here is a video of what I have so far in the project. It only shows the iOS version, though it also runs in Android.

Even though there is a build failure notification upon running the app, the iOS simulator still runs (not sure what’s going on there, exactly). Also, I realized that I would have copyright problems with the icons I used for the weather which I stole from Dark Sky. There are icons provided by the UX designer for the app, but I didn’t use them because they were svg files (I was lazy converting them to png or requesting png versions at the time I was working on this part). Also, the pollen data is fake since we don’t have access to an open source API for it. Only the weather and AQI data were real data.

I was actually able to get an opinion from a professional React Native developer a few weeks ago, before I decided to give up on this project. She recommended using Expo because it really helps with not dealing with the native code. Also, my co-hacker can’t deal with react-native-init or didn’t want to mess with native code. So this means I would have to redo what I’ve done so far. This isn’t a problem for me, really but it’s just that there’s not enough time. The non-profit group needs to have the app deployed soon, so they decided to give it to a professional mobile app developer.

At the moment, I’m busy preparing for my classes. I teach an organic chem lab and a gen chem lab and I actually like getting to review my chemistry knowledge, interacting with students, and serving again after three and a half years of taking off work. I like talking about chemistry again. But I’m also continuing to learn more about mobile app development.