Building a mobile app for iOS and Android can be challenging, because of different programming languages these platforms use. And after you build two different versions of your app you will have to keep them in sync when you add new features.

So in-sort, you have to manage two of everything: development teams, languages, codebases, feature sets, release schedules etc.

React Native is a platform developed by Facebook for solving this problem and enables you to have:

• Fully native apps (not WebView / PWA)
• One development team
• One language
• One codebase
• Fully extensible (Should be anything that is possible without using React Native)

React Native is a framework based on React (a front-end library also developed by Facebook) for building native mobile apps in JavaScript. React introduced some amazing concepts to build UI, and these concepts can be applied not only to web browser, but also to mobile. They include better state management techniques, a unidirectional data flow in applications, component-based UI construction, and much more.

React Native is not like other mobile frameworks such as Ionic / Cordova which generate hybrid application. A hybrid app is a combination of native application and web application. Ionic / Cordova, they use HTML & CSS to build the UI and a WebView component to render it. That means, they create a mobile application which runs a web application inside and behaves like a native application.

Whereas React Native doesn’t create a hybrid app, and even doesn’t depend on HTML & CSS. It is written in JavaScript only. So it creates a mobile app which embeds javascript code and runtime environment. This javascript is executed at the runtime on end-user device and compiled to platform-specific Native code using the React Native bridge to display the UI and respond to user interaction. It happens all the time, but it's optimised in a way that the application will run smoothly in 60 fps, so its performance is much better than so-called hybrid apps.

In terms of lay-outing your application, layout engines for iOS and Android Native apps are different. React Native unites it under one way to layout your application using a modern web technique called flexbox.

It currently supports iOS and Android and there are plans to expand to other platforms.

---

React Native deals with two realms, the JavaScript one and the Native one. Both of them are able to share information. They communicate using a "bridge", which is definitely the very heart of the React Native architecture, the part that offers so much flexibility.

The bridge is the concept that provides a way for bidirectional and asynchronous communications between these two universes. What’s important here is that they are completely written in different technologies, but they are able to communicate.

It is the layer that is closest to the device itself. When an event is executed on the Native layer--it can be a touch, timer, or network request--basically, any event involving device Native modules. Its data is collected and is sent to the Bridge as a serialized message. The Bridge passes this message to the JavaScript layer.

The Bridge is the layer that connects JavaScript and Native modules and is basically a transport layer that transports asynchronous serialized batched response messages across.

The JavaScript layer is an event loop. Once the Bridge passes serialized payload to JavaScript, the event is processed and your application logic comes into play.

If you update the state, triggering your UI to renderer, for example, React Native will batch Update UI and send it to the Bridge. It will pass this Serialized batched response to the Native layer, which will process all commands that it can distinguish from a serialized batched response and will update UI accordingly.

---

It's important to know that everything is done on three main threads:

• UI (the application's main thread)
• Native modules
• JavaScript runtime

The UI thread is the main Native thread where native-level rendering occurs. It is here, where your platform of choice, iOS or Android, does measuring, layouting, and drawing.

If your application accesses any Native APIs, it's done on a separate Native modules thread. For example, if you want to access the camera, geo location, photos, and any other Native API, planning and gestures in general are also done on this thread.

The JavaScript runtime thread is the thread where all your JavaScript application code will run. It's slower than the UI thread since it's based on a JavaScript event loop.