Introduction

Nowadays, there is an emergence of cross-platform hybrid applications on a large scale. Many top organizations are adapting different frameworks to develop or even entirely rewrite their mobile applications.

In this wave, React Native framework is gaining popularity for building cross-platform mobile applications. Began as a hackathon project, React Native is designed on Facebook’s React JavaScript toolkit, which extends the capabilities of the platform to native mobile app development.

This React Native Pentesting for Android Security Masterclass will cover everything there is to know about pen-testing React Native Android applications. In this blog, you will learn what React Native is, why there is a buzz around it, and the bridge concept.

Prerequisites

• Android pentesting lab
• Android pentesting tools
• Oversecured vulnerable app overview
• Getting started with Frida on the Android App
• Android Security Part-1

2. Basic knowledge of JavaScript and webpack bundler

3. Introductory knowledge about React Native language (Core react native, JSX, Babel) 

What is React Native?

React Native is a JavaScript-based framework curated to develop native applications on platforms like Android and iOS. Facebook initially made React Native available as an open-source project in 2015. It quickly rose to the top of the list of tools used for mobile application development.

Why is there a lot of buzz around the React Native framework?

The tagline of React Native itself is “Learn once, write anywhere.” Thanks to the feature of re-using a large chunk of code of application across different platforms, React Native framework makes it easier to develop applications that provide a better user experience by utilizing the platform’s features along with building apps that are easier to develop and operate on a wider range of platforms and devices.

We can write applications for different platforms such as iOS, and Android with minor tweaks in code as per the platform which translates into saving great time and resources. React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Examples of React Native applications:

Some of the prominent examples of React Native apps are: 

• Call of Duty Companion App
• NerdWallet
• Wix
• DonaldDaters
• Uber Eats

You can download the apks of these apps and play around.

Why not use a hybrid application that displays data over WebView instead of React Native? 

Web+Mobile hybrid applications can display web content using WebView in native Android applications. Users can interact with the web content loaded inside the WebView. However, this type of architecture presents challenges when the application wants to access the user’s device resources such as camera, storage, various sensors, basic device information, etc.

React Native has made it possible to access these native features of the device along with JavaScript without deploying on the web. For this, a “JavaScript Bridge” concept is utilized, which we will discuss in the upcoming segment of this article.

React Native Application Architecture

React Native applications are written in a combination of JavaScript and JSX. JSX is a special syntax extension to JavaScript. A key concept in React Native is “Component”. A component is a piece of a user interface similar to the “Activities“ in JAVA-based Android applications. A React Native application can be made of multiple interconnected components. These components are composable and reusable throughout the application.

How does react native JavaScript code get translated into the native code of the platform (Android/iOS)?

React Native brings React’s declarative UI framework to iOS and Android platforms. With React Native, you use native UI controls and have full access to the native platform features. As we discussed above, a React Native app can have multiple components. During the compilation, all of the components get compiled into one single file, as demonstrated below:  

Sample React Native Project Structure:

As you can see above, the application consists of multiple JS component files during development. However, during compilation into an APK, all the code in these multiple JS components gets bundled into one single file, “index.android.bundle.”

Before understanding “How things work?”, we need to first understand “What are those things?”

A very brief overview of the React Native application’s workflow is like this:

We write code in JavaScript

This JavaScript code gets converted into Native code

The Bridge Concept

React Native deals with two realms: JavaScript and Native. Communication happens between these two realms over a communication channel called “Bridge.” As the name suggests, it provides a literal bridge between these two ends. Bridge provides a way for bidirectional and asynchronous communication between these two realms. In short, it provides a way of communication for two completely different technologies, JavaScript and Native.

Now, coming back to “How things work?” Below is how JS code is translated into a mobile application.

• React Native app is written in JavaScript + JSX.
• The Bridge sends this JavaScript code to the JavaScript core Runtime to further communicate with native components
• Communication happens in multiple threads. As React Native is Asynchronous, each code and process runs in different threads. For example, layout calculations happen in one thread while native code rendering happens in another. These two threads never communicate directly and never block each other.
• JavaScript threads communicate with Native threads via Bridge.
• Finally, the platform’s native components communicate with the iOS/Android SDK and execute the operation instructed in the initial JS code.

TL;DR

• React Native code ⇒ JS+JSX code written during development.
• JS core engine ⇒ Converts JS code into respective native code with the help of a bridge between React Native and Native code.
• Bridge ⇒ Facilitate communication between JavaScript code and Native components.
• Android/iOS native code ⇒ Runs the converted native code on the platform. It also provides support for all native features, such as camera access, sensor access, device information, etc.

Conclusion

Now that we know why React Native is important to Android applications and the bridge concept, we will next learn how to find out if an application is built on react native and how to reverse engineer native apps.

Stay tuned!