Introduction: Using React Native for Hybrid App Development

Why Choose React Native for Hybrid App Development

“How much will it cost?” is the first question that comes to mind when you are going to develop something. Building two separate apps for iOS and Android costs more, take extra time and require a bigger team. With “Hybrid App Development” you can avoid all three of the above and make one app that will run on both platforms. You don’t need a specific IDE or operating system so it reduces development cost. Coding only once saves time and there’s no need for separate iOS and Android developers.

In hybrid app development there are number of platform options available like React Native, Ionic, Cordova and PhoneGap. Every one of them has there pros and cons but React Native stands prominent and famous among all. React Native is open source and is supported by Facebook.

Why React Native instead of Ionic, Cordova and PhoneGap?

React Native is developed by Facebook, a big player in the game, which ensures that it is reliable and is not going anywhere anytime soon. App developed with Cordova is purely hybrid which means it runs a JavaScript app in WebView that has some additional native extensions. Second player is Ionic, which is also based on Cordova and comes with angular. To mimic the native controls in mobile it is bundled with a set of standard controls. PhoneGap is a distribution of Cordova with a few custom packages and tweaks.

Apps built with React Native are also written in JavaScript but they are rendered using native components unlike other platforms which are just websites embedded in a mobile app using a WebView. Which ensures that the user experience is as close to native built app as possibly through conforming to the standards imposed by the operation system. React Native apps have better performance and smoother animations, nearly indistinguishable from native Android or iOS apps. Many big companies like Skype, AirBnB and Instagram have already built their apps using React Native.


Learning Curve

To learn React Native, you must first be familiar with JavaScript, HTML and CSS.

Setup (NodeJS installation and all)

For building React Native project node must be installed on your laptop. You can download node from their official website link below:

After installation of node you need to install node module for creating a React Native project for that run the following command:

npm install  -g  create-react-native-app

Now after successfully installation of this module create a React Native application using following command:

create-react-native-app AwesomeProject

Now go to that directory and in command prompt and start the node server using command:

npm start

Install expo client in your android or iOS device then scan QR code generated by node on command prompt to run the application.

You can follow the following link for step by step guide to create and run React Native application:

Selecting an IDE

React Native doesn’t provide any IDE. There are a bunch of IDE’s available online for coding some are as follow:

  • Atom
  • Visual Studio
  • Web storm
  • PHP storm
  • Sublime Text
  • Etc.

It is your personal choice which IDE do you prefer to write and manage code. As I am a native android developer and using android studio so I prefers web storm because android studio and web storm have same visual environment and it is easy for me to adopt but it is purely your choice.