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