How to Protect React Native Apps with Jscrambler
Tags: reactnative, javascript, security
Published: 2019-06-14 16:35:24

---
title: How to Protect React Native Apps with Jscrambler
published: true
description: In this step-by-step guide, you'll learn how to protect your React Native mobile application with Jscrambler to prevent code theft and tampering.
tags: React Native, JavaScript, Security
canonical_url: https://blog.jscrambler.com/how-to-protect-react-native-apps-with-jscrambler/
cover_image: https://blog.jscrambler.com/content/images/2019/06/jscrambler-blog-protect-react-native-apps-with-jscrambler-1.jpg
---

[React Native](https://facebook.github.io/react-native/) is a React-based open-source mobile application framework developed by Facebook. It is actually one of the most popular JavaScript frameworks for mobile development, as shown by the 2018 "[State of JavaScript](https://2018.stateofjs.com/mobile-and-desktop/react-native/)" survey.

By following this tutorial, you will be able to integrate Jscrambler seamlessly into React Native's build process and protect your app with the most potent and resilient [obfuscation](https://jscrambler.com/products/code-integrity/javascript-obfuscation) techniques, [code locks](https://blog.jscrambler.com/jscrambler-101-code-locks/), [self-defensive](https://blog.jscrambler.com/jscrambler-101-self-defending/), and [self-healing](https://docs.jscrambler.com/6.1/code-integrity/documentation/transformations/self-healing) capabilities.

## Pre-Requisites

To properly integrate Jscrambler into the React Native build process, we only need to **set up a React Native app** and **configure Jscrambler**. Let's cover both steps below.

### Creating a React Native Application

To create a mobile app using React Native, you have [two main approaches](https://facebook.github.io/react-native/docs/getting-started.html): using Expo or using the React Native CLI. Usually, Expo is more suited for developers with a Web Development background (it doesn't require Xcode or Android Studio), while using the React Native CLI is most advisable for those that come from a Native Development background (it requires Xcode or Android Studio).

To integrate Jscrambler into the React Native build process, we'll have to use the React Native CLI. However, if you're using Expo, you can also integrate Jscrambler by ejecting the project, as we'll explore further below.

For the purposes of this tutorial, we will be cloning a simple Grocery List app:

```
git clone https://github.com/jscrambler/Integration-Examples.git
```

Now, let's transverse into the React Native app's directory and install the project's dependencies:

```
cd Integration-Examples/ReactNative/Example-Apps/react-native-grocery-list/
npm i
```

The simplified base project structure of our *React Native* application is as follows:

```
react-native-grocery-list/
|-- app.json
|-- babel.config.js
|-- index.js
|-- metro.config.js
|-- package.json
|-- yarn.lock
|-- __tests__/
|-- .expo/
|-- android/
| |-- app/
| | |-- build/
|-- App/
|-- assets/
|-- ios/
|-- node_modules/
```

* `package.json` contains all the configurations which are related to npm such as dependencies, version and scripts.

* The `App` directory features the source code of the application. The sources are then built and packed into either the `android` or `ios` directory. This is where our protected HTML and JavaScript files will be placed after the build.

And we have successfully set up our React Native app. Let's move forward to protecting it with Jscrambler.

### Configuring Jscrambler

**If you haven't created a [Jscrambler account](https://jscrambler.com/signup?utm_source=dev.to&utm_medium=referral&utm_campaign=protect-react) yet, be sure to do so before moving forward.**

All of Jscrambler's configuration will reside inside a single file: `.jscramblerrc`, which specifies which transformations we wish to use.

The quickest way to get our config file is via the [Jscrambler Web App](https://app.jscrambler.com/dashboard?utm_source=dev.to&utm_medium=referral&utm_campaign=protect-react). Once there, create a new app. Now, in the *Application Modes* tab, select the Language Specifications and application type. Next, select the transformations you want (check the *Templates* and *Fine-Tuning* tabs). In this tutorial, we'll be selecting the *Obfuscation* template. If you need help with these steps, please refer to our [guide](https://blog.jscrambler.com/jscrambler-101-how-to-use-the-cli/).

Now, we simply have to download a **JSON file with all this configuration**, which will be used only for quickly getting the required settings.

<center><img src="https://blog.jscrambler.com/content/images/2018/08/jscrambler-101-first-use-download-json.png" alt="Download Jscrambler JSON"></center>

Now, let's create a new file named `.jscramblerrc` on the React Native project’s root folder. Open the `jscrambler.json` file you just downloaded and copy all its contents to the `.jscramblerrc` file. Your final `.jscramblerrc` file should look like this: 

```json
{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "params": [
   {
     "name": "objectPropertiesSparsing"
   },
   {
     "name": "variableMasking"
   },
   {
     "name": "whitespaceRemoval"
   },
   {
     "name": "dotToBracketNotation"
   },
   {
     "name": "stringConcealing"
   },
   {
     "name": "functionReordering"
   },
   {
     "name": "propertyKeysObfuscation",
     "options": {
       "encoding": [
         "hexadecimal"
       ]
     }
   },
   {
     "name": "regexObfuscation"
   },
   {
     "options": {
       "features": [
         "opaqueSteps"
       ]
     },
     "name": "controlFlowFlattening"
   },
   {
     "name": "booleanToAnything"
   },
   {
     "name": "identifiersRenaming"
   }
 ],
 "areSubscribersOrdered": false,
 "applicationTypes": {
   "webBrowserApp": true,
   "desktopApp": false,
   "serverApp": false,
   "hybridMobileApp": false,
   "javascriptNativeApp": false,
   "html5GameApp": false
 },
 "languageSpecifications": {
   "es5": true,
   "es6": false,
   "es7": false
 },
 "useRecommendedOrder": true
}
```

Because we got this information directly via the Jscrambler Web App, our `accessKey`, `secretKey` and `applicationId` fields are already filled. If you wish to retrieve them manually, refer to our [guide](https://blog.jscrambler.com/jscrambler-101-first-use/).

It's important to note that the `params` section specifies the transformations that will be used to protect your React Native app. **These can be hand-picked by you**, by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations [here](https://docs.jscrambler.com/code-integrity/documentation/transformations?utm_source=dev.to&utm_medium=referral&utm_campaign=protect-react).

## Integrating Jscrambler in the Build Process

**Note:** In case you have used Expo to set up your React Native project, in order to continue with the Jscrambler integration you must first eject it using `expo eject`.

Since React Native uses its own bundler called Metro, Jscrambler’s React Native integration is achieved through a Metro plugin.

To get started, install the [Jscrambler Metro Plugin](https://github.com/jscrambler/jscrambler/tree/master/packages/jscrambler-metro-plugin):

```
npm install jscrambler-metro-plugin --save-dev
```

Next, create a `metro.config.js` file on the project's root folder (in our case, we already have that file). Now, we need to place two lines of code at the top of the file. This code imports the Jscrambler Metro plugin and will enable our app to use it. In the case of our Groceries App, we can simply delete all the existing code in the `metro.config.js` and paste this code:

```
const jscramblerMetroPlugin = require('jscrambler-metro-plugin')();

module.exports = jscramblerMetroPlugin;
```

And that's it! We're ready to build our application! To do so, there are different approaches for Android and iOS.

**For Android**

To generate an APK file and install it on an attached device or emulator, we use:

```
cd android && ./gradlew installDebug
```

To simply generate the APK file without installing it, we run:

```
cd android && ./gradlew assembleDebug
```

**For iOS**

If we are building for iOS, the process is a bit trickier. First, we need to bundle our source files and prepare it before creating our IPA package:

```
react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
```

This will output a `main.jsbundle` file which we then need to use in Xcode to build our IPA. To do so, you can follow [this guide](https://medium.com/@tunvirrahmantusher/create-ipa-and-apk-from-react-native-72fe53c6a8db).

We will find the mobile application package for Android (APK) or iOS (IPA) on `<android|ios>/app/build/outputs/<apk|ipa>/debug`.

## Conclusion

React Native is often the JS framework of choice for building cross-platform mobile apps in the enterprise. Other than Facebook, it’s also used by companies like Bloomberg, Tesla, Uber, Wix, and Discord.

Now more than ever, attackers are actively seeking to exploit the exposed nature of JavaScript to steal or tamper with the JavaScript code that often contains critical business logic. This is why protecting your React Native source code with Jscrambler becomes a key step of the development process.

By using our Metro plugin, you can integrate Jscrambler into the React Native build process in a few minutes. If, however, you encounter any issues during this integration, so be sure to check our [documentation](https://docs.jscrambler.com/code-integrity/frameworks-and-libraries/react-native) or [contact us](mailto:support@jscrambler.com).