Day 7-8: Cross-Platform App with React Native

#100DaysOfCode

Project (Over weekend): A compelling reason for using React Native is that apps tend to be much more faster, responsive and consume less memory compared to hybrid frameworks for cross platform app creation. I wanted to give it a spin this weekend by building a complete cross-platform (android, iOS and web) app with React Native. With this app, I recreated the same use case as what we saw with react.js (searchable github bio and repo with note taking capability).

All the code for this project can be found on my github

Step 1: Install Homebrew, Node, Watchman, React Native

/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node

If there are any perm issues run this to set admin rights:

sudo chown -R $(whoami):admin /usr/local/lib/node_modules/

Then, install watchman using brew and react native using npm.

brew install watchman
npm install -g react-native-cli

Homebrew: Package manager
Watchman: Watches changes in the filesystem and continuously rebuilds.

Finally, setup a project with react native

react-native init thegaze

Step 2: Create the app

I will not be going into specifics of the code/syntax here, full code for the app is available in my github repo. This is a framework app that is useful for introducing the following concept and can be leveraged to plug and play in any app design of your choice.

  1. React navigation using iOS routing
  2. Fetch API, make HTTP server calls and persisting data with Firebase REST API
  3. Build UI components with ImageView, WebView, ListView, ScrollView etc
  4. Reusable components with required propType

Few things to highlight are:

  • Fetch API that we used in the app can be chained together to obtain promise objects while making http requests which can then trigger call back functions.
var url = `https://api.github.com/users/${username}/repos`;
return fetch(url).then((res) => res.json());
  • TouchableHighlights: Wrapper to make views respond properly to touches in the view.
  • Change the view component by pushing them to the navigator as shown below:
this.props.navigator.push({
component: Repositories,
title: ‘Repos Page’,
passProps: {
userInfo: this.props.userInfo,
repos: res
}
});

Step 3: If you download the code from github and run it as a project in xcode you should be able to see the app as below.

React native has definitely impressed me with how quickly one can setup and get running a “learn once write to any platform” app.

Day 7 & 8 of #100DaysOfCode DONE

If you enjoyed this, please click 👏 so that others can enjoy it as well. Follow me on Twitter @HariniLabs to get the latest updates or just to say Hi :)

PS: I curate a bi-weekly #WomenInTech newsletter for a dose of inspiration from the world of tech and yes men can signup too! Get it here :)