React Native under the Hood

The previous chapter briefly touched on what React Native is and the differences that users experience between the React Native UI and mobile browsers.

In this chapter, we will dig deeper into React Native, becoming well-versed on how it performs on mobile devices and what we should attain before commencing any efforts with this framework. We will also look at what options we can execute for the native functionality of JavaScript and what restrictions we will be up against.

We will cover the following topics:

• Exploring the React Native architecture
• Explaining JavaScript and Native modules
• Exploring React Native components and APIs

Exploring the React Native architecture

Before understanding how React Native works, let’s revisit some historical points about the React architecture and the differences between web and native mobile apps.

The state of web and mobile apps in the past

Meta released React in 2013 as a monolith tool for creating apps, using a component approach and a virtual DOM. It gave us the opportunity to develop web applications without thinking about browser processes, such as parsing JS code, creating the DOM, and handling layers and rendering. We just had to create interfaces using state and props for data and CSS for styling, fetch data from the backend, save it in local storage, and so on.

React, together with browsers, allowed us to create a performance application in less time. At that time, the architecture of React looked like this:

Figure 16.1: React architecture in 2013

The new declarative approach to developing interfaces became more favorable because...

React Native current architecture

The React Native library allows you to create native applications with React and JS by utilizing native building blocks. For instance, the <Image/> component represents two other native components, ImageView on Android and UIImageView on iOS. This is viable because of the architecture of React Native, which includes two dedicated layers, represented by JS and Native threads:

Figure 16.4: React Native threads

In the next sections, we will explore each thread and see how they can communicate, ensuring that JS is integrated into the native code.

JS as part of React Native

As the browser executes JS through JS engines such as V8, SpiderMonkey, and others, React Native also contains a JS virtual machine. There, our JS code is executed, API calls are made, touch events are processed, and many other processes occur.

Initially, React Native only supported Apple’s JavaScriptCore virtual machine. With iOS devices, this...

Explaining JS and Native modules

React Native does not cover all the native capabilities out of the box. It only provides the most common features that you will need in a basic application. Also, the Meta team itself has recently moved some functions into its own modules in an effort to reduce the size of the overall application. For example, AsyncStorage, for storing data on a device, was moved into a separate package and must be installed if you plan to use it.

However, React Native is an extendable framework. We can add our own native modules and expose the JS API using the same bridge or JSI. Our focus in this book will not be on developing native modules, since we need prior experience with Objective-C or Java. Also, it is not necessary, since the React community has created an enormous number of ready-to-use modules for all cases. We will learn how to install native packages in subsequent chapters.

The following are a few of the most popular native modules, without which...

Exploring React Native components and APIs

The main modules and components will be discussed in detail in each new chapter, but for now, let’s familiarize ourselves with them. A number of core components are available in the React Native framework for use in an app.

Almost all apps use at least one of these components. These are the fundamental building blocks of React Native apps:

• View: The main brick of any app. This is the equivalent of <div>, and on mobiles, it is represented as UIView or android.view. Any <View/> component can nest inside another <View/> component and can have zero or many children of any type.
• Text: This is a React component for displaying text. As with View, <Text/> supports nesting, styling, and touch handling.
• Image: This displays images from a variety of sources, such as network images, static resources, temporary local images, and images from the camera roll.
• TextInput: This allows users to...

Summary

In this chapter, we looked at the history of the cross-platform framework React Native and what problems it solved for companies. With it, companies can use a single universal developer team to build one business logic and apply it to all platforms simultaneously, thus saving a lot of time and money. Considering, in detail, how React Native works under the hood allows us to identify potential issues at the planning stage and resolve them.

Additionally, we started to examine React Native’s basic components, and with each new chapter, we will learn more about them.

In the next chapter, you’ll learn how to get started with new React Native projects.