Obfuscate entire React Native app including JavaScript code

As your React Native JavaScript code is built upon native code for Android and iOS, an entire obfuscation process would consider all three codebases:

Obfuscate Java code for Android

Fortunately your project already includes the Proguard obfuscator, which can be enabled as following:

1. Update your release configuration in the build.gradle file located in android/app/ folder:

   def enableProguardInReleaseBuilds = trueandroid {    // other config omitted for brevity    buildTypes {        release {            debuggable false            shrinkResources enableProguardInReleaseBuilds            zipAlignEnabled enableProguardInReleaseBuilds            minifyEnabled enableProguardInReleaseBuilds            useProguard enableProguardInReleaseBuilds            setProguardFiles([getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'])        }    }}

2. Enable ProGuard obfuscation and edit rules accordingly in proguard-rules.pro file located in android/app/ folder.

   The following line of code needs to be commented out (add # at beginning of line):

   #-dontobfuscate

   At this stage building the release version of your Android app should contain obfuscated Java code. Check it by analysing your APK, where you should find function calls such as a, b instead of the their actual names.

Code above referenced from Maria Korlotian's Medium post. Check also latest default React Native ProGuard configuration from GitHub repository.

From Android 3.3 beta onwards, a more optimised obfuscator called R8 can be used.

Obfuscate Objective-C code for iOS

There is no built-in library in the iOS project that will obfuscate your code, therefore an external package has to be used. PPiOS-Rename and ObjC-Obfuscator are two options here. The detailed documentation can be found in their GitHub repositories.

Obfuscate JavaScript code

This would be the most important part of the obfuscation as the our actual code is written in JavaScript. The react-native-obfuscating-transformer npm package can be used here:

1. Add the package to your project

   npm install react-native-obfuscating-transformer

2. Add / update the CLI configuration in rn-cli.config.js at the root of your project, where android and ios folders reside.

   module.exports = { getTransformModulePath() {   return require.resolve("./transformer") },}

   Create this file if it does not exist yet.

3. Create the transformer.js file also at the root and specify configuration options as appropriate:

   const obfuscatingTransformer = require("react-native-obfuscating-transformer");module.exports = obfuscatingTransformer({    /* Insert here any required configuration */});

   Pay attention especially to the scope of the obfuscation process, which by default targets only files in src/ folder (node_modules is excluded by default).

Having all the above stated, obfuscating your app will not make it inherently secured – although security and obscurity can be better than only the former, there are many other security enhancements (if not requirements) that can be implemented in a React Native app. This includes storing sensitive information in secure storage (Keystore in Android / Keychain in iOS), implementing certificate pinning if appropriate, and others.

Other useful links:

• Secure Storage in React Native by Randy Coulman

• Strengthen TLS in React Native through Certificate Pinning by Skip Hovsmith

The above answer by @Siavas covered most of the things however the metro plugin react-native-obfuscating-transformer doesn't seems to be obfuscating the index.android.bundle, you can try obfuscator-io-metro-plugin this seems to be working fine. it is also based on javascript-obfuscator.

you need to include the following config in metro.config.js

const jsoMetroPlugin = require("obfuscator-io-metro-plugin")(  {    // these option are obfuscation options from javascript-obfuscator    compact: false,    sourceMap: true,    controlFlowFlattening: true,    controlFlowFlatteningThreshold: 1,    numbersToExpressions: true,    simplify: true,    shuffleStringArray: true,    splitStrings: true,    stringArrayThreshold: 1,  },  {    runInDev: false /* optional */,    logObfuscatedFiles: true /* optional generated files will be located at ./.jso */,  }); module.exports = {  transformer: {    getTransformOptions: async () => ({      transform: {        experimentalImportSupport: false,        inlineRequires: false,      },    }),  },  ...jsoMetroPlugin,};