So I Made a React Native App This Afternoon
Well… it was an afternoon recently. But, you get the idea.
I have built apps using Objective C, and I have been building a Cordova-based app using React and Meteor. So, I have at least an idea of what’s going on in both situations. I have always dreaded jumping in to Objective C, and I have always been let down by the feeling of a Web View app. Which is why React Native has been on my radar for a bit.
React Native promises a lot
- Write javascript
- Generate native code in iOS and Android
- Share code between the two
I am always skeptical of frameworks that promise you can live the dream. They always seem to fall short, or are buggy, or etc. This is probably why I waited so long to try out React Native, but I kept hearing so much about it.
The App
I wanted to create a simple app that checks the status of my bitcoin miner on my mining pool, Bitminter. Here is the basic flow:
- Take a Bitminter API key
- Make a request to the Bitminter API
- Display the data received
It’s Awesome
I’ve been using React a lot, so when I generated a React Native project, it just felt right. Here are some snippets.
I was able to utilize React’s state for storing the API key and the returned data.
React’s lifecycle functions (componentDidMount) allowed me to easily initiate the request to the API.
fetch is available so the request was easy.
There is a polyfill for CSS flexbox properties, so styling was super easy.
Native Mappings
React Native has a bunch of mappings to native functionality out of the box (camera, photos, storage, etc). There is also a really great ecosystem of React Native packages.
I wanted to be able to store the Bitminter API locally so you don’t have to put it in every time (very tedious). React Native handles this out of the box with AsyncStorage. This lets you read and write to native storage writing only javascript. I just defined methods that attempted to load the key from storage. If it does load, it updates the React state. If it doesn’t load, it presents an input which takes the key and then writes it to storage on submit.
That’s It
The full code is available here.
And, the app is available in the App Store.
It really only took me two hours to make this. It’s not that complicated, and that is thankfully reflected in how simple it was to make.
Originally published at www.johnpinkerton.me on April 18, 2016.
