Instrument React Native Applications

Follow these steps to get your EUM App Key and instrument your React Native application.

Requirements

• React Native >= 0.60 and <= 0.72.5

• (iOS only): Pod and Xcode deployment targets must be >= 11. Find the pod target version in the Podfile in <your_react_native_app>/ios/.

Get Your Application Key

From the Controller's Getting Started Wizard, create either an iOS or an Android application. You will be given a EUM App Key that you will use to instrument your application. In some cases, multiple mobile applications can share the same key.

If you have completed the Getting Started Wizard, but don't have your EUM App Key, see Get Your Application Key.

Eject Your React Native Application

 If you created your React Native application with one of the commands in the following table, you must eject the application:

If you created your app with create-react-native-app, use npm to eject the app. If you used expo, run the expo command below to eject the app.

From your project directory, run the command appropriate for your use case:

 npm run eject

expo eject

Install the React Native Agent

This module injects the native Cisco AppDynamics agents into your application and offers a JavaScript bridge to the Instrumentation management interface.

1. Install the React Native Agent using any of the following commands:

   npm install --save @appdynamics/react-native-agent
   

   BASH

   yarn add @appdynamics/react-native-agent

   BASH

   
   

   
   

2. Build the configuration to enable the build-time instrumentation of your application:

   node node_modules/@appdynamics/react-native-agent/bin/cli.js install

   BASH
   

   The React Native Agent CLI assumes you've kept the default project structure created with the react-native CLI tools.

If the above commands failed, see manually install the React Native package. Otherwise, proceed to Add Permissions (Android Only).

Manually Install the React Native Package (Optional)

Most users do not have to manually install the package, but the command above may fail if you heavily modified your iOS and Android projects.

Follow these steps to manually install the React Native package:

Add Permissions (Android Only)

Add the following permissions to your app's AndroidManifest.xml (which should be located under android/app/src/main/).

  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.your.application">

    // Add the following:
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    
    // ...
</manifest>

The React Native Agent tries to minimize its network footprint. Without this permission, the agent always assumes poor network conditions and some metrics may not get reported.

Instrument Your Application Code

In the index.js file of your React application:

1. At the top of the file near the other import statements, add the following line of code to import the agent:

    import {Instrumentation} from '@appdynamics/react-native-agent';

   JS

2. 1. n the same file and in the global scope, initialize the instrumentation with the following, making sure to replace <EUM_APP_KEY> with a string containing your EUM App Key.

      Instrumentation.start({
          appKey: <EUM_APP_KEY>,
      }); 

      JS
      

      Whenever possible, we recommend you call  Instrumentation.start in a context that permits awaiting for this async call and even enabling verbose logging for better debugging:

      async function startInstrumentation() {
        await Instrumentation.start({
          appKey: <EUM_APP_KEY>,
          loggingLevel: LoggingLevel.VERBOSE
        });
      }

      JS

3. Verify that your index.js file looks similar to the following:

   import App from './src/App';
   import {AppRegistry} from 'react-native';
   import {name as appName} from './app.json';
   
   import {Instrumentation} from '@appdynamics/react-native-agent';  
   
   Instrumentation.start({
       appKey: 'YOUR-APP-KEY',
   });
   
   AppRegistry.registerComponent(appName, () => App);

   JS

4. (For older React Native setup builds) If you have use_frameworks! defined in your ios/Podfile, we recommend adding the following:

   $ toggleADEUMRNStaticFramework = true

   CODE

   
   

Instrumentation.start({
     appKey: <EUM_APP_KEY>,
     collectorURL: <COLLECTOR_URL>
});