React Native: What it is and how it works
The trend of using React Native for developing iOS and Android apps is growing. But what exactly is React Native and how does it work under the hood? To understand this, we must first know a bit about React.
What is React?
To display this component using React, our code should look something like this:
return <WriteComment />;
Components in React are composable and reusable. A component can consist of other components and of primitives. In the case of a web component, examples of a primitive would be HTML elements such as
React is smart. It detects which components need to be re-rendered based on the changes in the data, and which not. This makes it fast and powerful, and that’s why it’s a popular choice for development of web applications.
But React is not bound to the document object model (DOM) of the browser. With React, we can also build other types of user interfaces, such as mobile apps.
What is React Native?
Instead of the
span primitive, which we have on the web, React Native offers the
Text primitive. If we are building an iOS app, React Native will make sure that the
Text results with a native iOS
UIView containing the text. If we are building an Android application, it will result with a native
How does it work?
There are two important threads running in each React Native application.
One of them is the main thread, which also runs in each standard native app. It handles displaying the elements of the user interface and processes user gestures.
These two threads never communicate directly and never block each other.
How do threads interact?
Between these two threads is the so-called bridge, which is the core of React Native. The bridge has three important characteristics.
Asynchronous. It enables asynchronous communication between the threads. This ensures that they never block each other.
Batched. It transfers messages from one thread to the other in an optimised way.
Serializable. The two threads never share or operate with the same data. Instead, they exchange serialized messages.
How does the development process look like?
Now we understand the basics of React Native’s architecture. It would be interesting to check out how the development process looks like.
We first open our project using our favorite editor. Let’s say that we have a component named
Greeting, which only displays some text that says “Hi!”
To start the iOS application, we need to execute
react-native run-ios from the command line. This will start the app on a simulator or on a real device, if we have one connected to the computer. The result will look like this:
If we change our mind and want our app to say “Hello!” instead of “Hi!”, we can open our editor and change the text. Then, in the simulator, we can press
Command + R, like we do when reloading a web page. The change will immediately be visible! Instead of waiting on a build process which can take a minute or so, we have instant feedback. This makes the development quite fast.
To start our Android app, we need to execute
react-native run-android. For it, we can completely reuse our
Greeting component. This is because the component does not contain any platform-specific code. React Native will make sure that it provides an Android
TextView instead of an iOS
UIView. This potential for code reuse is one of the strongest sides of this technology.
That’s that! If you want to have a closer look at React Native, I would recommend the following presentations: