Adding Jscrambler to my App

This page will help you configure and add Jscrambler to your React Native App.

React Native protection can be achieved by adding Jscrambler's Code Integrity directly to your build pipeline during Metro's build process:

Sidenote

As mentioned before, Jscrambler's Code Integrity is only compatible with builds made with React Native CLI. If you are using Expo CLI, you need to eject your project to be able to use Jscrambler (more information in Expo documentation).

This tutorial follows React Native version 0.62. For versions <= 0.59, please check the instructions in this Github repository

Setting up the plugin

The first step is to install our metro plugin as a dev dependency:

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

You also need to configure our plugin accordingly. If you are using other plugins, you may already have a metro.config.js file created. If not, create one on your app's root folder.

Edit your metro.config.js and add Jscrambler plugin to it. In our example, the file should look like this:

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const jscramblerMetroPlugin = require("jscrambler-metro-plugin")();

module.exports = {
  // if you have other metro configs, add here
  ...jscramblerMetroPlugin
};

This will allow our plugin to add itself to the build process and protect your files. With this setup, whenever you make builds, a request is made to Jscrambler to protect your code after it has been bundled for production.

Sidenote

During the protection phase, our plugin will create a .jscrambler temporary folder on your App's root folder. We use this folder to recreate the protected files and it is only used during the protection phase. You should add it to your .gitignore and remove it in any clean scripts you may have.

Preparing the settings file

The next step is to create a Jscrambler configuration file (.jscramblerrc) that our plugin can read. At this stage, you should already be familiar with this concept and how to create one, if not, please take a look at our Getting Started | Download your transformations and use with API Section.

Create a .jscramblerrc file on your App's root folder

touch .jscramblerrc

and populate it with the JSON Object containing the settings (as shown in the above link). You can choose which transformations you want to have or also use one of our default templates that better matches your security needs.

Android Builds

Generating the release APK

You are now ready to produce a working protected build. Use Gradlew to generate the protected APK/AAB file. On your App's root folder, run:

cd android && ./gradlew bundleRelease

Gradle's bundleRelease will bundle all the JavaScript needed to run your app into the AAB (Android App Bundle). The generated AAB can be found under: android/app/build/outputs/bundle/release/app.aab. Running assembleRelease will build the APK (instead of an AAB) that can be found in android/app/build/outputs/apk/release/app-release.apk.

If you extract any of these files, you will see that the resulting index.android.bundle file is protected with Jscrambler.

Run your protected App in an emulated environment

npx react-native run-android --variant=release

iOS Builds

Generating the iOS Build

You need to generate an iOS-ready bundle with the following command:

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

This will produce a protected bundle that can be found under the ios folder. You can then use XCode to resume your build.

Run your protected App in an emulated environment

npx react-native run-ios --variant=release