Connect With Us

Getting started with React Native: Core Architecture of React Native

By Aman Maharjan on Dec, 15, 2017 in React, React Native, mobile, architecture of react native, advantage of react native, react native for beginners

React Native is a modern framework that allows JavaScript to run on and interact with iOS and Android phones in the same way as native code does. It provides opportunities for organizations that want to consolidate down their application architectures, and take a ‘write once deploy anywhere’ approach to application development for devices. But for starters, it’s really confusing so as to know how does react native really works and hence boils down to understand of these three architecture

  1. Javascript Runtime Environment Architecture
  2. Build Process Architecture
  3. Debugging Architecture


Javascript Runtime Environment Architecture(Bridging)
To understand how react native works, we need to look into how javascript is actually executed in iOS/android devices. For javascript to run, react native uses a runtime environment called Javascript Core, which is just some code on top of operating system.


Diagram: core architecture of react native

In order for JavaScript to run a native app it must still use the underlying native code. From above diagram, We can see that each React Native control will interact with a native counterpart component. React Native simply allows the bridge for the two way communication to happen. So the native code is actually operating on it’s own thread, meaning that if our React Native JavaScript code is taking a long time the UI won’t hang or slow down. It simply calls back across the bridge using events.

Build Process Architecture
While building react native application, react native does following two things:

  • It will run a node web server locally which publishes a payload file that holds all of our React Native JavaScript code
  • Then it will build a pure native application project (for IOS or Android) and deploy this to the phone. This project is configured to have the JavaScript runtime environment and then to download the previously generated payload
  • This payload is then delivered directly ‘into’ the JavaScript runtime environment via the React Native build process. Now we have both the native container and JavaScript code which are required to power our entire React Native application.

Debugging Architecture
For debugging process of react native application, we need to do two things:

  • Set the location of the source code
  • Open a browser that the debugger can publish debugging information
  • Alternatively, we can just log data to console to understand build process or debug application.

React Native enables quick prototyping and a very high initial velocity. Basic features are relatively easy to implement. If needed, they can be extended with native code and native views, and also integrate well with other view controllers. Since react native uses javascript, developers can work faster and more efficiently as they don’t have to restart developed app after each update, they can simply refresh viewing page.

At jyaasa, Mobile applications is relatively a new direction for us, but we’ve already boasted few beautiful apps in our portfolio. We conceptualize, design and develop customized applications to deliver scalable and innovative applications. Mobile Applications such as campus brainiac and Asscky are the recently built apps. We have used react native framework for building android and IOS mobile application and Ruby on Rails on the backend for handling APIs.

For more information, click given link to watch presentation given by our mobile software engineer Aman Maharjan on title ‘Architecture of React Native’: video of architecture of react native


Share This:


Никто так не интересуется микронаушниками, как студенты. Производство микронаушников, думается, было ориентировано именно на этот изобретательный и творческий класс, которому любой ценной надо сдать экзамен (и не один!), подробнее читайте на сайте
 June 14, 2018
Ram Raut
Very useful article about React Native. There are only few companies in Nepal using React Native and I am glad that company like Jyassa is using it. I have a few concerns about using expo to develop React Native instead of using React Native CLI. Although using expo helps us in reducing complication of getting started with React Native and gives us many pre-built components and functions to work with nicely but it is just wrapper of web view through which our react native code runs and that code doesn't necessariy converted into a native code. That means, a React Native app built with expo is just a hybrid app which have lots of performance issue because all of our JavaScript code runs inside a webview. Whereas on the other side, React Native CLI is bit of a hassle to get started and doesn't provide us all the components to make our development easier, but the JavaScript code we write will get transpiled into native code and if we wish to use only third party libraries with native dependencies then we will get the exact performance of a true native app. I may be mistaken but those are the things I have learnt from React Native by using it almost a year and making some simple apps using both expo and React Native CLI.
 July 14, 2018
Roderick Martin
This term now day's common in some countries where as Ecopayz casinos guide show the exact data of the react native.
 August 07, 2018

Add a new comment

Latest Posts

Jyaasa in IT Career Fair 2018 By Sonika Thapa on Jun, 12, 2018

Encrypted secrets in Ruby on Rails By Rasna Shakya on Apr, 20, 2018

Rails Payment Integration with zipPay (Buy Now and Pay Later) By Nelson Suwal on Mar, 23, 2018

Getting started with React Native: Core Architecture of React Native By Aman Maharjan on Dec, 15, 2017

First Step to Software Development: Design Thinking Process By Rasna Shakya on Nov, 03, 2017