This post walks you through the process of creating a Hacker News App for iOS and Android devices with React Native. 

If you're new to React Native or CSS Flexbox, it'd be best to walk your way through:
Getting Started React Native
Networking: fetch, async and await
Layout with Flexbox

What you'll need

  • MacOS, Xcode
  • NodeJS
  • NPM
  • React Native Package Manager
  • React Native 0.26

Stack

  • ES6, ES7
  • React Native
  • CSS Flexbox

Project structure

├── android
├── ios
├── Dashboard.js
├── HackerNewsApi.js
├── PostWebView.js
├── PostsListView.js
├── index.android.js
├── index.ios.js
└── package.json

Project dependencies

Let's start

Init project

react-native init HackerNewsApp  
cd HackerNewsApp

Hacker News APIs

We use some public APIs of Hacker News

Web View

List View

Install GiftedListView and react-native-timeago 

npm install react-native-gifted-listview --save  
npm install react-native-timeago --save

Dashboard

Install react-native-tab-navigator and react-native-vector-icons

npm install react-native-tab-navigator --save  
npm install react-native-vector-icons --save  
npm install rnpm -g  
rnpm link

Final piece

Run

react-native run-ios

Source code

git@github.com:hellokoding/hackernewsapp-reactnative.git https://github.com/hellokoding/hackernewsapp-reactnative

React Native