Updated June 29, 2023
What is React Native Architecture?
React Native is an open-source framework built by Facebook that helps us use JavaScript to create mobile applications. It is being widely used in the industry by Facebook, its creator, but enterprise companies like Amazon, Microsoft, and some startups also use it. Let’s move ahead toward the basic architecture of React Native.
There are four core sections:
- The React code which the developer writes.
- The code written by the developer eventually interprets the JavaScript.
- 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, which javascript is one of them.
2. Native Realm
In the native realm, The developers will develop in Object Swift if it’s for iOS or with Java for Android. We will use the native, platform-specific languages we have used before, and the main UI thread will be available as usual. Across platforms, we need to change the UI from the main UI thread, and we can create different background threads as required.
Explanation: The above-discussed realms are different and connected with a bridge. React Native is essential 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, we can see the two realms running simultaneously on different computers. We can run it entirely over Chrome. Even when debugging it over Chrome, you will have the native realm running. Instead of checking your app, you can go through a WebSocket. The bridge travel over WebSocket as well.
React Native Architecture
Redux
Redux maintains the application state and changes in the states; it is a library that 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 has 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 React Native JSX components in the components directory accept props as inputs. Smart container components use the components in Redux. The components should consider externalizing the state to the Redux store. The Redux store should receive the state if it needs to be continued or shared by other components.
- If the implementation of the component differs between iOS and Android versions of the app, 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 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 directory and is represented by a “discrete domain.” There are no rules for splitting the application into modules, even though it is one of the most challenging decisions in designing a Redux application.
Features of a Good Module:
- It should represent a screen or a collection of screens in the applications.
- It should represent some technical features with its state.
- Data from other modules’ states should not oblige its use.
- Other modules should not use the data.
3. State
- The state consists of the application state and any modification occurred to the state. A state can be considered data received from a server or created by the user, such as login data or UI elements.
- The State Party of the module calls it a Redux Duck, a file that includes a Reducer, Action Creators, and the app’s initial state.
- The Redux Duck pattern keeps the code portable, making it easy to co-locate the reducer with action creators. For some complex modules, the Duck can be difficult to maintain and split into smaller chunks.
- You can overcome it by splitting the state into smaller Ducks and adding them 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 uses recompose for implementing High Order functions.
- Redux connect receives two arguments, first mapStateToProps, which highlights 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 the application changes, the Container comes up with the latest state. The connected view will update if the current props differ from the previous props.
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. The containers could be essential to the core module in some projects, 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 –
