Hacker News Stories App using React Native

react react-native

At the beginning of the New Year, the company I work for created a program for its employees to learn Mobile Development. We were given the task of creating a mobile app that displays Hacker News stories in 2 weeks. We were given the freedom to choose the tech stack that we want. I chose React Native since I was already a React Developer. Here are my thoughts on the process of creating the app.

Architecture Choices

React and Redux

I decided early on that I would use the standard React and Redux combination. I am already familiar with Redux so I don’t have to invest time learning it. The community for Redux is big and the support is excellent. Because of that, I have access to a lot of third party libraries. I don’t have to reimplement a lot of things.

Offline Storage

React Native encourages using a wrapper for AsyncStorage instead of using it directly. The most popular library I have found is redux-persist. I found that it worked well out of the box. It was good enough for my needs so I didn’t bother trying to find alternatives.

Off the Shelf Components

I was tempted to import and use react-native-elements for my components. But I decided against it for two reasons.

  • I wanted the UI to be a dark version of the Hacker News website. I need to implement custom styles in order to achieve this. Importing 3rd party libraries and restyling them would be more difficult thatn starting from scratch.

  • This project’s goal for learning Mobile Development. I feel that creating components from base React Native components without relying on 3rd party UI toolkits would be more in line with this goal.

API

The first API that I used was in Github. Unfortunately, I quickly ran into a problem with it. Querying the lastest queries only returns a list of story identifiers. It doesn’t retrieve the data themselves. I would have to loop over the list of story ids to query data for each them. This was not an acceptable solution for me so I tried finding other APIs.

The next API I found was in HN Algolia. This API returns story items with their data with just one call except for the actual comments. I decided that it was enough so I went with using this API.

Thoughts

Setup

The first thing that I needed to do was to download the Android SDKs for Android and XCode for IOS. Since I don’t live in an area with a superb internet connection, I copied these from a friend.

The Genymotion emulator for Android was recommended by many people over AVD so I used that.

I then downloaded and installed React Native using Homebrew and its CLI.

After setting up my skeleton app, I only needed to run these respective commands in order to test if everything is working right

react-native run-android    
react-native run-ios

That’s it! I ran my first React Native app without problems.

Built-in Developer Tools

React Native comes built-in with a host of developer tools to help facilitate development. The Inspector and Remote Debugging tools were the ones that found myself constantly using. The Inspector could use a little polish though. Remote Debugging was great but you need to have focus on the browser window where the debugger is attached. Otherwise, the app’s performance slows down.

Navigation is one of the pain points of using React Native. There are a lot of different solutions that are recommended but none of them were particularly easy to implement.

I started by using the NavigationExperimental library but it was too convoluted to setup. It was also hard to integrate with Redux.

I didn’t use React-Native-Router-Flux solution.

I settled on using the ExNavigation library created by Exponent

UPDATE: The React Native community recently released a new Navigation library that seems to supercede the current Navigation and NavigationExperimental components.

Fetching Data

Fetching data in React Native is easy. You only need the built-in fetch method. You can opt to use it with Promises or with Async/Await.

Conclusion

As a JS/React developer, I was impressed at how fast I was able to build a mobile app without prior knowledge of mobile development. I didn’t even have to use boilerplates such as Ignite.

I recognize that React Native isn’t the right choice for some apps, especially those that involve games and extensive animations. A native platform developer might find some things that will frustrate him about it.

There are also some parts like Navigation where I wish that there was a consensus on what to use. But this is just a minor gripe. The community is still actively working on improving React Native further.

For apps that revolve around CRUD operations, React Native can help you get out that app quickly.