Architecture of React Native how does it work?

Sanjana Human In Tech
2 min readOct 4, 2023

--

React Native is a Framework. It allows Software developers to build mobile
applications using Typescript, Javascript, CSS, and React. When developers write the code, first it starts to complied with the native code for the platforms such as iOS and Android using the React Native CLI.

How does it work?

React native CLI
React Native CLI

The React Native CLI uses the tool called Metro to bundle the javascript and assets into a single file that is that can be loaded by the native code.

Metro server also takes time to load the react native application where we can see the bundling 100% is going on in the background.

What is a Metro server?

Metro server is a javascript bundler that is similar to WebPack. It is mainly optimized for mobile development.

Metro to JS code

Once the code is bundled, the responsibility of the Reactnative CLI is to compile it into native code for Android, and iOS. For the android, the code is compiled using Android Studio. For the iOS, the code is compiled using Xcode. Bundling can be done by metro using Visual Studio code.

During the compilation code, the native code is linked to the Javascript code using the bridge that allows the two to communicate with each other. The bridge is responsible for passing the data between the Javascript and native code and it allows React native to provide a native-like experience to users.

Native code to JS code
Native code to JS code

Once the code is compiled and linked, it can be deployed to a device or emulator (android), or simulator (iOS) for testing.

The React Native CLI provides tools for building, running, and debugging the application on both iOS and Android devices.

--

--

Sanjana Human In Tech
Sanjana Human In Tech

Written by Sanjana Human In Tech

A React Native front-end enthusiast and dedicated development engineer, eager to expand knowledge on development techniques and collaborate with others.

No responses yet