Skip to main content

React Native packaging

Your React Native applications must meet specific compilation requirements before you can submit them for scanning.

See Supported languages and platforms for instructions for other platforms.

Automated packaging​

Auto-packaging automates the packaging process for React Native projects.

Required files​

Veracode recommends that you submit your React Native application as an archive containing the source code. You can also submit your application as a compiled iOS archive (IPA) or a compiled Android package (APK).

Supported React Native versions​

TechnologyPlatformVersion
JavaScript/React NativeAndroid, iOS0.50–0.7x

Packaging guidance​

Veracode Static Analysis supports three ways of packaging your React Native application. Please select only one to prevent duplicate flaws.

Option 1: (Preferred) Package as source code​

When you upload a ZIP archive of the source code to Veracode, follow the packaging guidelines for JavaScript. Do not submit files that you built using webpack or other packaging mechanisms. Include the packaging information for NPM, Yarn, or Bower, but do not include the node_modules directory. The source files must be UTF-8 encoded.

Option 2: Package as iOS IPA: Modification of the project.pbxproj file​

note

This packaging option requires React Native version 0.50—0.7x.

  1. Open project.pbxproj file in any editor. This file is typically located in PROJECT_ROOT/ios/PROJECT_NAME.xcodeproj/

  2. Locate section with Bundle React Native code and images description. Under shellScript variable, you see the prepared react-native-xcode.sh execution.

  3. Add export SOURCEMAP_FILE=main.jsbundle.map to the shellScript variable, right before react-native-xcode.sh execution:

    Before modification:

    shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";

    After modification:

    shellScript = "set -e\n\nexport NODE_BINARY=node\nexport SOURCEMAP_FILE=main.jsbundle.map\n../node_modules/react-native/scripts/react-native-xcode.sh\n";

  4. Build an archive in either xcode or at the command line.

  5. Verify that main.jsbundle is in the archive and that the main.jsbundle.map is either in the React Native project root or in the archive.

  6. If the main.jsbundle.map is not present in the xcarchive, copy it from project root to the same directory inside the xcarchive, where main.jsbundle is located.

  7. Build the IPA file out of the archive. Then, verify that both main.jsbundle and main.jsbundle.map files are present in the IPA file.

  8. Submit a scan of the IPA file.

Option 3: Package as Android APK​

  1. Disable hermes by setting hermesEnabled=false in android/gradle.properties.
  2. Open PROJECT_ROOT/android/app/build.gradle and, in the react section, add the following:
    • debuggableVariants = []
    • bundleAssetName = "index.jsbundle"
  3. Run ./gradlew assembleDebug in the PROJECT_ROOT/android directory.
  4. Use any suitable archiver available on your platform to add the bundle and the map into the APK archive. The APK_FILE_ROOT/assets directory should now include index.jsbundle and index.jsbundle.map. Locate those files by, for example, running find . -type f -name "index.jsbundle" and find . -type f -name "index.jsbundle.map" in the PROJECT_ROOT directory. By default, those files reside in:
    • PROJECT_ROOT/android/app/build/generated/assets/createBundleDebugJsAndAssets/index.jsbundle
    • PROJECT_ROOT/android/app/build/generated/sourcemaps/react/debug/index.jsbundle.map

Option 4: Legacy - Package as Android APK for React Native version before 0.72.0​

You must modify two components to produce a package for analysis, in this sequence:

  1. Modify the Gradle configuration file build.gradle to define the bundle name:

     project.ext.react = [
          bundleAssetName: "main.jsbundle",
    ]

  2. Edit the Android packager script ./node_modules/react-native/react.gradle to add these modifications to the build script:

    def jsBundleMapFile = "${jsBundleFile}.map"
          "--sourcemap-output", jsBundleMapFile

After you make these modifications to the build scripts, use Gradle to create an APK file. Then, upload that file to Veracode for analysis.

Last updated on