React Native is a javascript framework that allows developers to build truly native cross-platform(ios & android) mobile applications using React-- a javascript library for building component-based web applications.

Before diving deeper into React Native, it's crucial that you understand how Native apps work first.

Get the fundamentals down, and the level of everything you do will rise. ~Michael Jordan.

How native apps work

To build both an Android and iOS app traditionally you need to learn both the native programming languages for each platform, Java/Kotlin for Android and Objective C/Swift for iOS.

What these languages do is perform the logic of the application and can also call platform APIs like networking permissions, schedule a background task, Read/Write on local storage, etc. They can call any API that the OS allows, the most common is rendering UI components/views. The Operating system is the one that sends commands to the GPU to render these views.

A view represents the basic building block for user interface components. Eg: EditText, Button, CheckBox, etc

That's basically how native apps work.

Using two different programming languages just to render the same thing and to perform the same logic is not a wise idea, at all. As a junior developer, the first thing you're taught is the DRY(Don't Repeat Yourself) principle.

Please let's remain DRY:)

How do we solve this problem?

Well, we can just render HTML and js on a web view. Frameworks like Cordova are already employing this method but that's not efficient at all. We don't want to sacrifice performance for faster development either. We want a high performant app as well, not just a browser inside an app.

Now comes React Native...

React Native

The difference between React Native and other cross-platform development solutions (for example, Cordova and PhoneGap) is that React Native doesn’t render WebViews in its code. It runs on actual, native views and components. This is one of the reasons for React Native’s spectacular success.

How React Native works

Image

React Native basically uses JavaScript to issue commands to the OS to render UI components.

JavaScript runs on a different thread from the main thread. The main thread consists of the bridge which is written in C++. The bridge is responsible for communication between the OS and JavaScript.

For example, when a user presses a button, the OS passes this event to the JavaScript thread through the bridge, and vice versa.

Something to note is that performing long-running tasks on the JavaScript thread will result to shuttering on the screen as the OS doesn't have anything to render.

JavaScript is single threaded and asynchronous so writing good JavaScript code is essential for high performance.

That's how React Native works under the hood. But that's not so useful when writing the actual code.

When writing code, you use specific components that the bridge already understands and knows how to transform them to native components.

React Native components are used with jsx. That is pure React.

Spoiler:)

Note that React Native is not always the best option for building native mobile apps. Do enough research about your business model and choose a technology that meets your requirements.

conclusion

I can't cover everything about React Native in this article. I could but I hate writing alot of stuff, so stay tuned for the next post.

Happy coding!