DEV Community

Cover image for React native and the JavaScript bridge.
Aman Kumar Singh
Aman Kumar Singh

Posted on

React native and the JavaScript bridge.

Introduction

In this article we will discuss how does react native came in existence, what problems it solves.

What is react native?

React native is a framework build by facebook and open-sourced in 2015. It is a JavaScript based mobile app framework, that allows to build natively rendered mobile app for Android and IOS.

wait for both android and ios form single js code how?

The answer is "JavaScript bridge". Or in other words "BLACK MAGIC".

Today i will try to unveil, how react native does it.

At first lets assume that React native might be compiling JavaScript code into native code that can be executed on IOS and Android respectively.

Diagram for above assumed paradigm

But this analogy is extremely hard to achieve as Objective C and Java are strongly typed languages, while JavaScript is not, so react native does not follow this.

Let's understand JavaScript Bridge.

As you go through the React native Documentation you will see this word "JavaScript Bridge" and this is responsible for the Magic/Black-magic done by react native.

Let's compress the picture, to execute the JavaScript code on native devices there must be some way that the JS thread can communicate with the Native thread at the runtime, this is done by JavaScript bridge it acts as a messenger/postman between the JS thread and Native Thread.

React native architecture

Let me frame this in layman words :

Lets assume conversation two people having different first language. So they communicate in the language that is understood by both.

In the same way React Native, for communication between JS Thread and Native Thread we rely on JSON messages, pushed into the message queue. The first service pushes some commands inside this queue, and the other one has to execute them.

JS thread sends asynchronous JSON message describing the actions that native side needs to accomplish to render the UI.

Top comments (0)