What I learned from my first React Native App and why I abandoned it for a PWA
I wrote this piece throughout the process of creating a React Native App, however when it came time to deploy, I kept running into problems that I didn’t know how to solve. The main one being, the Apple Store test teams couldn’t get my app to run, and I had no idea why (It ran fine in test environments and in beta testing on real devices of my own).
This major setback made me rethink whether I wanted to spend my time on RN, or build it in something more useful: a Progressive Web App (PWA). However, I didn’t want to let this useful information go to waste. If anyone feels braver than I, this info is for you. So, the stuff that follows is based on my experiences using RN, and at the end I explain in detail why I left it for something else.
This is NOT a tutorial. For one thing, I don’t think you can really make a RN tutorial in a medium post. I read a few, but they were lacking some info. What this IS though, is a bunch of tips and tricks to be aware of before you start your first project and hopefully a reference if you run into similar problems. There are links to some great tutorials and resources at the end of this article, however. Enjoy!
- Figure out your app name first — Changing the name of your app after you have already written it all is not an easy task. I ended up having to recreate the project.
- Setting up Android development tools on a mac is a pain in the ass. The instructions on the React Native tools are out of date from how Android studio runs. Short of it is you have to run the emulator from Android Studio first before running the command line. More in depth instructions are below.
- Get comfortable with the React Native Component Library because you’ll have to use them as wrappers for nearly everything.
- Apple Deployment is a pain in the ass. Check out the resources below for some assistance in this.
- I didn’t use it, but there is now a Create-React-Native tool that is similar to Create-React-App. By the time I found it, I was already in too deep and didn’t want to spend time figuring that out. It’ll probably be the standard moving forward, so i’m definitely going to be using it for the next project.
- The term “React Native” was used 15 times.
- Working knowledge of React. It is possible to figure out everything starting with React Native, but knowing React helps immensely.
- A couple of devices to test it on (ios and android). This isn’t a hard “requirement” but it is always better to test on actual devices.
- If you plan on publishing: ios Developer Account ($99 a year) and Play Store Developer Account ($25 a year).
- Some familiarity with Xcode is helpful, but not required. Same goes for Android studio, but be aware that I’d never used it before I started with this project and it wasn’t too difficult to figure out.
- React Native 0.44.0
- iPad Air 2 running ios 10.3.1
- Google Pixel running Android 7.1
- Macbook Pro
- Atom for text editor
- Android Studio 2.3.1 for Mac.
- Xcode 8.3.2
What I wanted to build
I live in an area of Los Angeles with a rich choice of restaurants. As an amateur foodie, I often find it difficult to decide where to eat (yeah, I know, first world problems). Soooo, I wanted to build an app that pulls in some search results from Yelp, randomizes them and then displays a single item. Seems pretty straight forward, right? Sort of.
It’s Dangerous to Go Alone
Of course, the key to any new project is getting the right tools. I used the React Native docs for a lot of it, but I also used this video to get me started:
When it came time to figure out how to fetch API’s, I visited this video quite a bit:
This took me a considerable amount of time to figure out. So here’s some resources, so hopefully you won’t waste a whole afternoon like I did!
Setting up a development environment on ios, assuming your using a Mac, is EASY. The instructions on the official React Native docs should get you there, no problem.
As of this writing, Android Studio is newer than the references on the documentation on the React Native page. The biggest difference is that the emulator is now wrapped up inside Android Studio, meaning you HAVE to have your project open in Android studio in order to run the emulator.
Testing on an actual device/beta testing:
The instructions on the React Native docs are limited, at best. I found a couple articles that helped IMMENSELY. I highly recommend reading both. The long and short of it is, you will do all the submissions through XCode. If it’s your first app, it may take a bit to setup, but after that it’s fairly simple.
Deploying the app to the app store is a continuation of the previous section. Submission of the app is based on the provisions you uploaded to iTunes Connect, which is accomplished in the beta testing. Once again, refer to the link below for detailed instructions.
The thing to know about running anything on android is this: Run the simulator/real device through Android Studio first, then run the command line instructions. For whatever reason, it only works this way. If you run only the command line tool, it will fail.
Testing on a device:
In order to run on a physical device (I used my Google Pixel), you have to enable developer mode on your device and enable USB debugging. The RN official docs gives some guidance on that.
Before you can submit to the Play Store, you have to create a signed APK. This process is described with pretty good detail on the official RN docs. I ended up using the method described in the docs for storing the password securely in my keychain access.
The deployment takes place through the Play Console and requires a Developer account ($25).
One of the frustrating things about building something custom is always going to be that you run into issues that aren’t always the top questions on Stack overflow. So here’s a couple things that will hopefully save someone else a few hours.
If you are used to the WONDERFUL debugging tools that the React ecosystem has built up, abandon that feeling because debugging in React Native is a pain in the ass. Okay, its not a “pain in the ass” but it’s a lot less intuitive.
However, once you get it going, it’s pretty similar to the approach you would use for any other JS debugging.
console.log() is your best friend. Essentially, you want to make sure to enable remote debugger in the simulator and use the chrome tools to debug everything. I got used to how to read it and probably became a much better JS debugger because of it.
Update: I started writing this blog shortly after i finished the first beta version of the app, and looking at it now, I can’t figure out why i was so angry! If you know what you’re looking for, it gives you the info you need. I guess that’s just part of learning how to debug. Ah, sweet introspection.
In an effort to avoid 9000 API calls, I wanted to figure out a way to store the access token that Yelp returns on initial request. I ended up settling on Async storage, which is incredibly powerful and natively supported in RN. The token itself doesn’t expire for 6 months, so a simple logic checker in the fetch call and storing the token to local storage was useful in avoiding the excessive token requests.
The entirety of this app rests on the suction of data from an API endpoint. This took the longest out of any of the build, simply because I had never done it before. I used a couple resources to figure this out including:
Animated GIF doesn’t work on Android?
iOS builds allow for animated GIFs by default, Android does not. To get it to work in Android, you just have to add a line of code to the gradle file. Those instructions are in the docs for the image tag.
Presenting your Work
What’s the point in making anything, if you can’t show it off, right? Well, I was looking for a way to record the screen to show some interaction. I found out you can record screenshots and videos direct from the ios simulator. Check out this thread for more info, but the basic terminal command for saving a video is below:
xcrun simctl io booted recordVideo <filename>.<file extension>
xcrun simctl io booted recordVideo appvideo.mp4
You can import that video into photoshop and make a gif, if you’re feeling special.
It probably won’t be long until this information is out of date. Since I started this project React Native has already updated twice. There is also a new RN generator on the block called Create-React-Native. As mentioned in the TL/DR, I didn’t end up using it for this app, but probably will in later use.
Why I abandoned React Native
Theres are the main reasons I decided, after probably 40–50 hours of development to abandon my RN project:
- The code is Fragile. Every time I compiled the code, or rather the RN command line tools compiled it for me, I had no idea what was happening and if I opened XCode or Android Studio I was greeted with 1000 warnings. I assume this is because currently RN only runs on older versions of iOS and Android.
- I’m not an app developer, I’m a web developer. I know more about web languages than I do Java or Swift, so I am much better equipped at debugging, testing and deploying. This probably sounds like I’m wincing from the challenge, but the reality is I only have X hours in a day and i’d rather spend it learning Node than Swift.
- PWA’s are the future. I didn’t say it, everyone else did. If you don’t believe me check out twitter’s and Uber’s.
Final Final Thoughts
If you made it this far, Awesome! Glad to have you along for the ride. I will be writing a similar article for my journey of building this same App using the PWA method, with hopefully more success. In honor of your achievement, here is a potato.