Siwicki

Building an App in 24 hours

April 06, 2016

Part 2 - React Native

I have been dabbling with some React work over the past few months. It is hard to find a blog or some code on Github that does not talk about React. I had heard about React Native, but had been using Ionic for another project to get the cross platform support. Now that React Native had Android support, I had been looking for a project to dip my feet in the water.

I had a design that was fairly simple and I wanted to use it as the basis to learn a new technology. React Native has really good documentation, so the stage was set. It was 4:30AM, my design was finalized, and I was ready to build.

Basically, I really didn’t know much about React and its workings. Now, at 4:30AM, I was working with React docs to get me up to speed. React Native comes with a boilerplate code right off the bat, so it was cool to be able to study how some of the text and data was being displayed.

For the app, I needed to get some data. The app was just going to display the current value of Bitcoin. I had found a simple API that displays the current value of Bitcoin in multiple different currencies, so the API was all set, but I couldn’t figure out how to get historical data to make that chart happen. The chart was turning into something that I might have to put on the back burner. After an hour of research, I was still unsure about how to get the historical data.

I only had one more hour before I had to leave for work, so I worked on the style of the single view. React uses Flexbox for styles, so I spent some time setting up my colors and trying to work in some fonts, playing with things that I was comfortable with. There is nothing like getting into the middle of a project, having to leave, and not being able to properly debug. I would stew on it all day.

After I got back from work at 6:00PM that night, I set a deadline to submit the app to the Google Play Store before I went to sleep that night. I had a Google Developer account since it was a little bit cheaper than the $99 Apple fee.

I spent most of my time working in the index-ios.js file and using the Xcode simulator to look at the iOS version of the app. Developing this way was really painless and enjoyable. Trying to work was Android tools is a pain in the ass. Android Studio is a step in the right direction, but the Apple Developer tools are just far better.

I was working on that one file, but I had never anticipated publishing this app in the App Store. But, it was easier to iterate and start some trial and error. I am used to web dev and being able to basically just try anything and refresh.

In my mind, I could just copy this over to Android, compile, and move on. However, for Android you need to sign the APK. It was a whole process and I was getting tired of looking at a screen. My deadline was looming as I spent a lot of time figuring out how to get my API data to work the way that I wanted it to.

I signed my android APK file but didn’t really test things on an android device. I made my Google Developer account and filled out a poorly worldly description of the app. I decided to push the APK live without testing it on a device or even in an emulator.

I felt like I was on top of the world. The listing was rolled out to Google Play. I did it! A long standing goal of mine is finally accomplished.

I went to bed, feeling like I could do anything. I was even writing a list of new app ideas.

The next morning, I installed the app from Google Play. There is no feeling like it seeing your app in the store. It was different from a web project. There was something exciting about it.

I installed it, and my app crashed. I checked some of my code and then submitted another APK before I went off to work. But, the app kept crashing and wasn’t working.

I finally spent some time working on the Android side. I cleaned up my code, installed an APK on an old device, and found what my bugs were. They just there from a rush job. If I was going through the process with some calculated effort, they would have been caught. But I was trying to hit a goal and in the process, I learned a bit about the building process for Android and the differences in the platforms for React.

React is turning out to be an amazing platform. This whole process gave me a small taste of what I can do with React Native. Just looking around, there is another project for React Native Desktop: to get Native Mac Apps running with React Native. The ecosystem is so rich and powerful. Just this past month I saw that React now has more stars on Github than jQuery. This is a space that I am going to spend a ton of time in. There are a ton of great resources out there, but if you are looking for a few quick roundups to get started, I would recommend this [CSS Tricks] screencast and this React.js [free course].


John SiwickiWritten by John Siwicki who lives and works building interesting things. You should follow him on Twitter