What is the React Native Framework & how does it function.pdf

Copyright © Biz4Solutions LLC. All Rights Reserved
Biz4solutionsLogoanddesignsaretrademarksofBiz4SolutionsLLC. Alltrademarksandlogos
referenced herein are the properties of their respective owners.
What is the React Native Framework & how does it function
React Native is one of the most preferred frameworks for cross-platform app development and has
been adopted by several industry giants including Facebook, Instagram, Skype Microsoft, Tesla,
Shopify, Walmart, and UberEats. This framework was created by the Facebook team to address the
limitations of React.js.
The Facebook-developed SDK React was a viable option for building web apps. However, when
Facebook adopted a mobile-first strategy, web apps needed to be rendered to the mobile platform.
This task was indeed challenging! At first, the Facebook engineers employed HTML5 to render
apps on the mobile web, but this strategy failed. Thereafter, they embedded the WebView within a
mobile-native container. This approach too wasn’t workable due to the absence of necessary
attributes like gestures & touch events, a keyboard API, and image management capacities.
Then, they realized the need to build native apps for delivering an impeccable UX. But, the idea to
build Native apps for Android and iOS separately involved roadblocks – an imperative coding
process, separate codebases for different platforms, and a slow iteration process as each app’s
prototype needed Playstore’s prior approval.
Finally, Facebook conducted an internal hackathon, and React Native, an improved version of
React, was coined. The React Native framework was launched in 2015 as the one-stop solution for
mobile app development and made open-source in the same year. Let’s explore more about the
framework and its functioning!
React Native: An Overview
React Native is a JavaScript-based mobile app development framework that is used for crafting
natively-rendered mobile applications for the Android and iOS operating systems. The unique
selling point of React Native lies in the fact that developers can build apps for both platforms
simultaneously using a single codebase. The framework uses platform-specific modules and APIs

by compiling the JS code to native components. So, the React Native developers can use native
components like Text, View, and Images as building blocks for creating new components.
How does React Native differ from React?
React Native is based on React for the web, the Facebook-developed JS library used for developing
UIs. But, while React targets the browser, React Native targets mobile app platforms. As such,
mobile app developers enjoy the convenience of using a known JavaScript library for creating
mobile apps with a native-like look and feel.
React Native uses Text primitive in place of span primitive used for the web. This Text results in a
native TextView for Android apps and a native iOS UIView for iOS apps. For this reason, despite
using JavaScript for app development, the end application is not a web app embedded within the
shell of a mobile app, rather it is a mobile app which is real native.
React Native apps are created using JSX, a combination of JavaScript and XML-esque markup,
just like React apps. The difference is that React Native uses a “bridge” under the hood for
invoking native-rendering APIs. Here, Objective-C/Swift APIs are used for rendering UI
components on iOS apps while Java/Kotlin APIs are used in the case of Android apps. Simply put,
the bridge translates JS code into platform-specific components. As a result, the app renders real
mobile UI components instead of web views; imparting the look and feel of a mobile app.
Moreover, React Native exposes the JS interfaces for the platform APIs; this enables apps to access
smartphone device features like a user’s current location, camera, etc.
How do React Native Apps function?
A React Native app is segregated into three different parts –native code, JavaScript code, and the
bridge. The bridge interprets JS code for executing it in native platforms and enables asynchronous
communication between Native elements and the JS code.
Significant threads involved in the functioning of a React Native application
Main (Native) thread: The main thread, also called the Native thread, is used for UI rendering in
iOS and Android applications. It manages the task of displaying UI elements and processes users’
gestures.

JavaScript thread: The JS thread basically deals with the app’s business logic and defines the
structure as well as the UI functions. The functions of the JS thread include executing the JS code
within a separate JS engine, making API calls, processing touch events, etc.
Shadow thread (Shadow Tree): This thread generates shadow nodes and acts as a mathematical
engine that uses algorithms to transform layout updates into accurate data and UI events into the
correctly serialized payload.
Native module thread: Whenever an application requires access to the platform API, the process
takes place in the native module thread.
Customs Native Module thread: Such threads are used for accelerating an app’s performance
when custom modules are used. For instance, React Native handles animations using a separate
native thread so that this task is offloaded from the JS thread.
Out of the aforesaid threads, the most important threads that help a React Native app to function
are the Native thread and the JS thread. Interestingly, there is no direct communication between
these two threads and so, they do not block each other.
Functioning of a React Native App: Crucial Steps
Check out how a React Native app works!
Step # 1
When an app launches, the Native thread loads the app and spawns the JavaScript thread for
executing the JS code. The Native thread hears UI events such as touch, press, etc., and passes on
these events to the JS thread through the React Native bridge.
Step # 2
JavaScript loads and the JS thread sends information to the shadow thread on what has to be
rendered on the screen. The shadow thread then calculates layouts using algorithms and decides on
how the view positions should be computed. The shadow thread then passes on the layout
parameters to the main thread for rendering the view. )
Step # 3
The Main thread collects UI events and sends them to the shadow thread. Events are converted into
serialized payloads and sent to the JS thread.
Step # 4
The JavaScript thread now processes the payloads and then updates the UI or calls native methods.

Step # 2, step # 3, and step # 4 get repeated continually every time JavaScript’s event loop is
iterated.
After every event loop in the JS thread gets completed, the native side receives batched updates to
native views; these are then executed in the Native thread. Remember, the batched updates should
be sent by the JS thread to the Native thread before the deadline for the rendering of the next frame,
to keep up the app performance. A slow JS thread due to complicated processing in the JS event
loop hampers the UI. The only exception wherein a slow JS thread doesn’t affect performance is in
scenarios when native views take place entirely in the Native thread.
How does the React Native Bridge ensure smooth interaction amongst the threads?
The React Native Bridge allows asynchronous communication between the threads so that one
thread doesn’t block the other. Moreover, the messages are batched – messages are transferred
between threads in an optimized way. Furthermore, the bridge serializes messages so that two
threads cannot share the same data or operate using the same data.
How to set up the React Native App Development Environment?
Here’s how to set up the environment to create a React Native app with the help of Expo.
• Install Node.js, get Expo’s command-line tool, and then put the command npm install
Expo-cli –global. Once the Expo cli tool gets installed type expo init todo-app.
• Now a screen will be displayed and you need to select the option “blank” for a blank app.
Include the workflow features of Expo as well. Then, enter your app’s name, press enter,
and continue the setting-up process.
• Navigate to the new project created for starting the app with the command npm start and
for stopping the app you need to press Cntrl + C. The developers’ server will run and a
new tab having the Expo manager screen gets opened in the web browser.
The app can be previewed by either running it on an Android emulator or by installing the Expo
app on your mobile phone and running the app on the device by scanning the QR code. Thereafter,
you need to install a text editor like Atom, Sublime, Visual Studio Code, etc. Now you’ve got all
the necessary tools to create a React Native app.
Final Verdict:

React Native is a profitable option to pick if you need to build a mobile app that targets Android as
well as the iOS operating systems. Cross-platform development with React Native speeds up your
development and reduces development costs. Hence, this framework is best for entrepreneurs who
intend to build a quick app prototype for validating the app idea.
Need technical assistance and expert guidance on React Native app development? Contact
Biz4Solutions, a highly experienced React Native development company in USA and India ,
offering world-class services to clients across the globe.

What is the React Native Framework & how does it function.pdf

Recommended

Recommended

More Related Content

More from Shelly Megan

More from Shelly Megan (20)

What is the React Native Framework & how does it function.pdf