React Native

So you want to be able to build mobile apps for both Android and iOS. What should you learn?  The individual native languages for each app i.e Java for Android and Swift/Objective-C for iOS?

Actually NO! Native Android development and iOS development are quite different and can be expensive – first, the language itself is quite different and second, all the underlying API’s are different – the way of using the GPS is different, the way to create animations is different, the way you make network calls is different.

We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And There are so many hybrid mobile frameworks such as NativeScript, React Native, Ionic, Xamarin, PhoneGap etc. I’ll be focusing more on React Native in this blog. So,

What is React Native? 

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed it to support iOS. However with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Why React Native ? 

Whenever there is an update for apps written in Swift/Objective-C or Java , the whole app needs to be recompiled and a new version has to be distributed to the App Store again. All this can take a few weeks depending on the App Store review process.

To avoid this hassle, React Native apps work in a different way , a native app is able to locate specific JavaScript code, which is later downloaded and compiled when the app is launched on an actual device. By this, updating the app can be done instantly without needing to submit a new version to the App Store again and again.

How to Build a React Native App?

React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. If you don’t already have Node.js installed, it’s time to get it!

First install Homebrew using the instructions on the Homebrew website, then run the following commands in a Terminal after installing Homebrew :

brew install node 

Next, install watchman, a file watcher from Facebook :

brew install watchman

This is used by React Native to figure out when your code changes and rebuild accordingly. It’s like having Xcode do a build each time you save your file.

Next use npm to install the React Native Command Line Interface (CLI) tool :

npm install -g react-native-cli 

This uses the Node Package Manager to fetch the CLI tool and install it globally.

Now , Go to the folder where you would like to develop your React Native application and type following,

react-native init FirstApplication 

This creates a project containing everything you need to build and run a React Native application.

The FirstApplication Project will then be located on your folder , and it will contain an “ios” and “android” folder with some other files too.

Launch a basic React Native app by :

For iOS :

react-native run-ios 

For Android :

react-native run-android

At first glance the source of a React app looks like a strange XML or HTML document that is composed of various components. Behind the hood, these are JavaScript classes that extend the React.Component and render themselves inside each other thanks to JSX syntax.

Now In the next Post , I will be going going through all the initial requirements like :

Adding Navigation, Building the Search Page, Styling, Adding Component State, Performing an API Request and many more to create your first React Native App.