Welcome to the coding universe again. In this article, I will try to briefly and clearly explain what is exactly React Native and how it works. Besides, we will figure out if this framework is the right choice for any aim in mobile app development. Let’s start!

A bit of history

Back in the days before there were technologies for cross-platform development (such as Apache Cordova and React Native), you had to learn the Java programming language to write an Android application and Objective-C to write an iPhone application. No doubt that it will take a long time to learn two languages ​​and write the same application twice: for Android and iPhone. How tough!

Then great minds began to think: “How can we make it so that we write the code just once, and it works on both operational systems?” And this is how Apache Cordova was invented. We write an application in HTML, CSS, JavaScript (just like a website), and Cordova runs it in the browser on the phone. This approach greatly accelerated the application development process. But it has some disadvantages. Among them:

• existing plugins for Cordova quickly became outdated, and you needed to write your own ones;
• since the application is launched in a browser, it becomes difficult to get feedback from the native application;
• you need to try to optimize the application so that it works quickly and stably.
• Apache Cordova applications look practically all the same way and are not as pleasant to use as native applications.

Therefore, the guys from Facebook decided to do a thing that will allow you to write the code once, and it will work everywhere. And this thing should be free of the disadvantages of Cordova. This is how React Native was born.

React Native: overview of the framework

React Native apps are written in JavaScript. BUT! The final application, the one we run on the phone, uses native code (Java for Android, Objective-C for iOS). As a result, we get the same application as if we were writing it in a native language: controls, appearance, and gestures work the same as in a native application. Magic! But how does this happen?

Every React Native app has two important streams:

• The main thread that it runs in absolutely every native application. It handles the display of UI elements and user gestures.
• The second stream is a so-called JavaScript Stream. It executes JavaScript code in a separate engine. JavaScript deals with the business logic of an application. It defines HOW the application works.

How do these streams communicate with each other? How does JavaScript know which button the user has clicked? Or how does the main thread know which window to display? The answers to all these questions are close.

The so-called bridge is responsible for communication between the two threads; this is the core of React Native. The bridge allows streams to communicate in the best possible, optimized way. It serves as an intermediary that resolves requests and incoming data from two streams. This approach allows them to communicate asynchronously, which leads to stable operation because threads can never block each other.

To make it clearer, imagine a bridge with border control in the middle. He decides who goes across the bridge and who doesn’t.

How does React Native work?

Below I’ll give you some kind of illustration of how React Native works.

As I understand it for myself: React Native is a circus in which JavaScript is a puppeteer who pulls a doll by the strings Java or Objective-C.

What are the crucial features of React Native that make it so attractive for many developers?

1. Exporting native modules

iOS and Android have huge SDKs with thousands of modules. It would be irrational on the part of the React Native development team to export each of them to a JavaScript environment. In the rare case where the React Native API isn’t enough, you can turn to native code in Objective-C, Swift, and or Java. For example, for the application we are currently working on, I needed to get the average color of the top and bottom areas of the image. Not finding a way to do this in JavaScript, I solved this problem in my native Objective-C environment. Likewise, a developer can export library functionality from third parties.

2. Layout in React Native

I would like to note the great pleasure of working with the layout. When creating a user interface in native code, developers must specify the exact coordinates of each UI element, whether they use AutoLayout or directly change coordinates and size. React Native components are added to the component tree as HTML elements and each component appears below the previous one. To manipulate layouts, the developer uses a subset of flexbox borrowed from CSS. This makes building the user interface much easier. Finally, you can forget about a hundred and one ways to do this in iOS.

3. Compilation time

Xcode takes a very long time to compile Swift. A lot of articles have been written about ways to speed up and analyze compilation time (just google “Swift compilation time”). You probably know the difference between interpreted and compiled languages. You even know that JavaScript is an interpreted language. Probably understand what I’m driving at? Yes! React Native doesn’t compile code, you can run modified JavaScript on a real device and on a simulator with a couple of seconds delay. This obviously affects the speed of development. You will have more time for a mug of hot coffee. Sounds interesting, huh?

In total

Finally, here’s a shortlist of the advantages of React Native development:

• Reuse code between iOS and Android.
• Native JavaScript development (one language for mobile apps, front-end, and back-end).
• Accelerated development time JavaScript does not need to be compiled; the result of code changes is visible for a couple of seconds.

If I was unable to convince you, take a look at the list of apps using React Native on the official site. This list includes mobile clients for Facebook, Instagram, Airbnb, and many more.

Conclusion

After all the text of this article, let’s finally summarize. Why is React Native cool?

React Native is a framework for building cross-platform JavaScript applications. It allows you to write applications for iOS, Android, Windows Phone, and even VR (you can create applications for helmets and virtual reality glasses on React VR React Native is a great way to be fast and use your favorite tools right out of the box (they don’t need to be configured, they work here and now): CSS, ES6, ES7, NPM, Yarn, etc.

The creator of React Native is Facebook, a front-end leader, a company that invests enormous resources in the development of its technologies. Facebook is actively developing React and React Native, creating a whole infrastructure and a powerful IT community around them.

Another advantage of the technology is a fast-growing community of companies that use the technology, invest in it, and support its development: GeekBrains, Yandex, Airbnb, Wix, Tesla, SoundCloud, Walmart. What is more, UberEats, FacebookGroups, and partly Instagram and Facebook are written on this framework.

So, when such commercial giants use React Native, then why are you still stopping yourself, hire your best react native development company?