React Native: A JavaScript framework to build real native mobile apps (Android and iOS)

React-Native originated from the React project.  React is a JavaScript framework/library for building user interfaces. The fundamental building block of React is the Component.

React-Native is a javascript library/framework that is used to build native mobile apps. It is built on top of the React framework with some added features for the native mobile development.

 

What is native mobile development?

The most popular mobile operating system are Android and iOS. The development of mobile application for those platforms using the officially  recommended technologies, libraries and frameworks is known as the native mobile development.

e.g:- For Android (Android SDK + Java Or Kotlin

For iOS Swift or Objective C

Then  you might be thinking of how the react-native has become a native mobile application development framework. let me explain.

In React Native, we are trying to build native mobile app with some framework provided javascript components. Those components will be compiled (or transformed) into native android or iOS  application (native android code) when building the application. Therefore ultimately you will get something similar to what you get with native development. Therefore the built application will behave exactly same as native application and will be having the access to all of the core features of the underlying operating system of the device.

 

What is React-Native?

As i have already described, React-Native is a Javascript framework that can be used to develop native mobile application. The code written in react-native framework (with javascript) will be converted/transformed into the real native (Android and iOS) platform code in the compilation and building process. Therefore ultimately it will be a real native code that is almost similar to what you get from native mobile development (Android or iOS).

 

How does React Native differs from Ionic?

In ionic, we are building a HTML based web application that runs inside the native (Android or iOS) mobile application (with support of WebView). WebView is basically a hidden browser.  So it is just a web application that runs inside(that is hosted inside) the WebView component of the underlying native application. Therefore it is not a native mobile app and it has some limited wrappers to access the core features of the underlying operating system (Android or iOS) of the device.

 

Mobile Specific Components for React-Native 

Unlike in “normal” React apps built for the browser, you’ll NOT use HTML tags. Instead, you’ll use a set of pre-built components which will be compiled to native code by the React Native toolchain.

In the React, you can see <div> and <span> components much similar to HTML elements. But in react-native you cannot use such components as the native mobile application does not recognize <div> and <span>. It has some special developed components such as <View> , <TextView> etc  and those will be compiled/transformed into native application syntaxes in the compilation process.

Screen Shot 2018-07-01 at 12.52.39 AM.png

 

 

Does it compile everything into the native application code?

No. Only the react components designated for UI rendering will be transformed into the native application code (native component).  Other javascript code will be remained as javascript.

e.g:- View will be transformed into Android View component.

Text will be transformed into Android TextView.

 

Screen Shot 2018-06-30 at 9.19.58 PM.png

 

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s