Android Attack: Reversing React Native Applications

Estimated difficulty: 馃挏馃挏馃馃馃

This post is going to walk you through how to reverse engineer an Android application that is built using React Native. It is more common to see applications being built using this mobile framework, as it supports the development of an app in both Android and iOS platforms. Let’s unpack this further! We will also touch on how to decompile React Native applications also built using Hermes.

What is React Native

React Native is a software framework. A mobile application framework supports the development of an application. React Native is a JavaScript framework that allows for a developer to build user interfaces for native mobile applications across platforms such as, but not limited to, Android and iOS. You can use React Native in existing Android or iOS applications or create a whole new application with it and build it from scratch.

Detecting a React Native Application

Before we start reversing an application, we need to know what framework the application is built in, or at least how to detect that. One great method on how to do this was detailed in a HackTricks post.

As the an apk file is ultimately a zip file, take your application in question and rename the ‘.apk‘ extension to ‘.zip‘.

$ mv example.apk 

Unzip the apk file and change into the assets directory.

$ unzip

Look for the ‘‘ file inside of the assets folder. file in Assets/

This tells us the application was built with the React Native framework, as the file is where the React JavaScript logic is, in a minified format.

Decompiling a React Native Application

One of the best open-source tools to decompile an Android application is Jadx-GUI. This can be downloaded for many different operating systems, including Windows. I will be using the tool on Windows to analyse the example application, React Native Example, taken from the website APKpure.

Open the application in Jadx-GUI.

Open the ‘.apk‘ file, this will load all the different classes and resources into the interface for you to browse.

We can check the ‘‘ file in the ‘Resources/assets‘ folder.

This is not looking too pretty… Luckily, there is another way that we can view this file!

Analysing the Bundle File

Since we have opened up the ‘‘ file in Jadx-GUI, and it is not making very much sense to us, we can change the way that we are viewing this to that it actually looks pretty!

Open up the folder where the ‘‘ file lives and create a new ‘index.html‘ file in the same directory. Inside of that ‘index.html‘ file, you need to put the below script:

<script src="./"></script>

I create my HTML file in a notepad and save the file as HTML

The two files will look like the below.

Load the HTML file into Google Chrome and launch the Developer Tools in the same tab as the loaded file. Go to Sources and look for the ‘‘ file. If you see an ‘‘ file in the sources list then you will be able to view the unformatted JavaScript. Unfortunately for us, this example application did not provide us with such joy, so it was onto other methods to unminify the code.

Opening index.html and Developer Tools


Another method you can use is unminifying the JavaScript code with CyberChef, who knew! To do this, upload your bundle file to CyberChef using the option to add input as a file.

Once the file has been uploaded, then you can beautify the JavaScript code.

This is very quick and works like a charm. With your beautified JavaScript code, if you would like, you can download the output as a JavaScript file and open it in your favourite IDE. I like to use Visual Studio Code.

Lastly, one other method I tried was going to the website, where the site is meant to unminify the minified JavaScript code. Personally, I have not tested this site, therefore, I am unsure as to whether or not any code uploaded is sent to a remote server, so please do not give this site your implicit trust and upload sensitive code, unless you know otherwise.

Due to the size of the example file I had, this took a very long time to unminify, however, I took a snippet of the file and uploaded it to the site, to give you an example of what the unminified code would look like.

Example unminified bundle file

Once we have unminfied the bundle file, as a RE you should start searching for any interesting keywords. This will completely depend on your goal! Maybe you are looking for malware, or maybe you are assessing the security of an application… Either way, a good place to start would be for words like password, username, accessibility, etc.

React with Hermes

Sometimes you might come across react native mobile applications that are also built with Hermes. What is Hermes you might ask? Hermes is an open-source JavaScript engine that is meant to optimise the performance of the application. The following doc shows you how to integrate Hermes with your React Native app.

When it comes to reversing this type of app, when you go to analyze the “” file you will see byte code rather than JavaScript. In this instance, there is a really awesome tool called hbctool, which should help to decode the bytecode.

Unfortunately, this tool will not solve all our problems, as there are only a limited number of supported versions. Definitely worth trying out!

And that is all folks, it is a short but sweet post to come back to after so long away.

Thank you all for reading. Please do leave a comment if you have any questions or even any nuggets of information you want to share on this. Both are gratefully received!

Have a great day 馃榾

Sarah <3


  1. Thanks for this post, very handy for this pentest I’m doing. hbctool is about to merge a pull request from here which adds support for Hermes Bytecode 83/84/85/89 馃帀

    • That is very exciting they are about to release an update! Thanks for the heads up. I am also glad you found this helpful 馃榾

      All the best,

  2. How does React Native function as a software framework for developing mobile applications? Can it be used to create new applications from scratch or integrated into existing Android and iOS applications?

    • Hi! Let me break down my answers for you 馃檪

      * How does React Native function as a software framework for developing mobile applications?
      I hope I am understanding this question right, but React Native is a software framework, as it is a type of structure a developer can choose to develop their software. For example, the developer may not be limited to only Java or Koitlin but can implement JavaScript as well to provide additional functionality, or even just use it because they are more comfortable with that language.

      * Can it be used to create new applications from scratch or integrated into existing Android and iOS applications?
      It can create new apps from scratch and be integrated into existing apps, check out their official website – – Alternatively, it might be a fun project to try and build an app in React Native yourself 馃榾

      Feel free to ask anymore follow up questions if that is not clear, thanks!

  3. Gabriel

    Having Done the reverse engineering of the apk, what do i do next to build a fresh apk with what i have or make few changes in the code and then rebuild it, how do i go about it pls am new new to react native

    • Hi! Apologies for the slow reply on this comment. A great way to modify an applications behaviour after reversing it, is through using a tool called Frida. You can hook into the functions you care about, perform a stack trace on the functions and even re-package the app (using Frida Gadget) with the new functionality to re-install.

      I hope that helps!

  4. How is it possible to reverse engineer these apps made with react native on runtime with the various debuggers? Thanks

    • Hi! Similar to my previous comment, you can use Frida or even Objection to get a understanding for what the application is doing at runtime. You can listen for when specific functions are being called and then later use Frida scripts to hook into and instrument the applications from there. You can also use Burp to view the traffic and you could even use logcat potentially to view what the phone is doing when the app is running.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.