React Native Architecture

What is React Native Architecture?

React Native is an open-source framework built by Facebook that helps us to use JavaScript for creating mobile applications. It is being widely used in the industry, right from Facebook which is its creator, but it is also used by enterprise companies like Amazon and Microsoft, and even by some startups. Let’s move ahead towards the basic architecture of React native.

There are four core sections:

• The React code which the developer writes.
• The JavaScript that eventually gets interpreted from the code which the developer has written.
• A series of elements which are known as The Bridge collectively.
• The Native side.

Realms in React Native

Let’s check the two realms which run side by side in a mobile app:

1. JavaScript Realm

In the JavaScript realm our program runs on JavaScript, The code here runs on a JavaScript engine. React Native uses score, which is an open-source JavaScript engine for WebKit. This engine runs inside our app on one of the threads and a mobile app has several threads in which javascript is one of them.

2. Native Realm

In the native realm, The developers will develop in Object Swift if its for iOS or with Java if its for Android. We will use the native, platform-specific languages that we have used before and the main UI thread will be available as usual. Across platforms, we just need to change the UI from the main UI thread and we will be able to create different background threads as required

Explanation: Both of the above-discussed realms are different and are connected with a bridge. React Native is very important in this entire setup. I hope the developers might have tried to debug their application on Chrome. So, when we debug a React Native application using Chrome, then we can see the two realms running simultaneously on different computers. We can run it completely over Chrome. Even at the time of debugging it over Chrome, you will have the native realm running. Now, instead of checking your app, you can directly go through a WebSocket. The bridge travel over WebSocket as well.

React Native Architecture

Redux

The application state and change in the states are maintained by Redux, it is a library which deploys a pure variant of the Flux architecture from Facebook. Redux and Flux are used to have a unidirectional flow of data through the app.

Features of Redux

Redux comes with a feature of synchronous updating of the states, but it has no answers for handling asynchronous actions. The Redux ecosystem has some ways to check this problem. One of the possible solutions for this is the vanilla redux-thunk middleware or we can also use redux-loop.

1. Components

•  The components directory contains React Native JSX components, in which props are taken as inputs. In Redux the components are used by smart container components. The components should consider externalizing the state to the Redux store. If the state needs to be continued or shared by other components then it should go to the Redux store.
• If the implementation of the component differs between iOS and Android versions of the app in any way then we need to create a separate .android.js and a .ios.js file for the component. In not so complex situations the React.Platform.OS property can be used to develop a branch between the platforms.

2. Modules

• The modules’ directory of React Native consists of the interesting bits of the apps. All the codes which have modified the app’s state or have read it from the store should go ahead.
• Each module has its own directory and it is represented by a “discrete domain”. There are no rules for splitting the application into modules, even though it is one of the toughest decision in the process of designing a Redux application.

Features of a Good Module:

1. It should represent a screen or a collection of screens in the applications.
2. It should represent some technical features with its own state.
3. It should not be obligated to use data from any other modules’ states.
4. It should not contain data that is used by other modules.

3. State

• The State consists of the application state and any modification occurred to the state. A state can be considered as data received from a server or created by the user such as login data or UI elements.
• The State Party of the module is called a Redux Duck – a file that consists of a Reducer, Action Creators and the app’s initial stage.
• The Redux Duck pattern is used to keep the code portable and easy to co-locate the reducer with action creators. For some complex modules, the Duck can be difficult to maintain and it can be quite difficult to split it into smaller chunks.
• It can be overcome by splitting the state into smaller Ducks and adding it to the reducers through standard Redux split/combine strategies.

4. Container

•  The Container is responsible for connecting the View component to the Redux store. The Container is also used for the High Order functions with recompose.
• Redux connect receives two arguments, first mapStateToProps which highlight relevant parts from the state of the application to pass to the view, and second mapActionsToProps, which helps in binding the Action Creators to the dispatcher of the store so now the actions can be deployed.
• These functions are called selectors. Whenever the state of application changes, Container comes up with the latest state. If the resultant prop is different from the previous props then the connected View is reproduced.

Conclusion

The architecture of React Native helps us in structuring a project for a multi-platform mobile application, keeping the logic of the business in a reusable and maintained sub-module. In some projects, we can see that the containers could be important to be in the core module but that depends on the applications. React Native uses different mechanisms to create an efficient, consistent and reusable visual identity for the applications.

Recommended Articles

This is a guide to React Native Architecture. Here we discuss the basic concept, two realms, Aspects and Redux of the architecture with features. You can also go through our other related articles to learn more –

1. React Native SectionList
2. React Native State
3. React Native StatusBar
4. React Native Table