React Native

The React Native plugin allows you to auto-instrument your React Native app with Dynatrace OneAgent for Android and iOS. It provides an API to add manual instrumentation and is compatible with raw, ejected React Native projects. It works with Expo Kit, but not with Expo.

Prerequisites

  • Dynatrace version 1.188+
  • React Native version 0.48 or later
  • Gradle version 5.0 or later
  • React Native instrumentation: ES6 classes or later
  • Android SDK version 15 or later
  • iOS version 6 or later

Set up a React Native mobile app

  1. From the left-hand menu, select Deploy Dynatrace.
  2. Scroll down and click the Set up mobile monitoring button.
  3. Type in a name for your app and click Monitor mobile app.
  4. Select React Native as the platform of your mobile app. The setup wizard guides you through the set-up process.
    react native wizard
  5. Install the plugin by calling react-native install @dynatrace/react-native-plugin.
  6. For React Native version 0.59.0 and earlier, call react-native link @dynatrace/react-native-plugin.
    This will automatically add the dependencies to your native projects.
  7. The version of the React Native determines the right way to register the transformer.
    Note: If you don't know the React Native version, retrieve it by typing react-native --version in the terminal.

In the root folder, either create or extend (>= RN 0.59) metro.config.js / (>= RN 0.57 - 0.59) rn-cli.config.js so that it contains the transformer.babelTransformerPath property:

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
  },

  reporter: require("@dynatrace/react-native-plugin/lib/dynatrace-reporter")
};
  1. If you're upgrading from a previous version of this plugin, copy the old configuration values from dynatrace.config to the new dynatrace.config.js.
  2. Define a mobile app in Dynatrace and open the Mobile app instrumentation settings. Open the dynatrace.config.js in the root directory that was already created by the npm install script and update the applicationId, the beaconUrl for Android, and the DTXApplicationID and DTXBeaconURL for iOS.

Note: You must define the components that you want lifecycle instrumented. Application startup and Touches can already be seen out of the box.

  1. For React Native version 0.59.10 and earlier, execute npm run instrumentDynatrace in the root of your React Native project to configure both Android and iOS projects with the settings from dynatrace.config.js.
  2. Use react-native run-android or react-native run-ios to rebuild and run your app. Specify custom paths via custom arguments.

User action names

Learn more about user action names in Dynatrace.

React views

  • displayName: Checks if React views have a display name set.
  • class name: If the display name is unavailable, the class name is used by taking the name property from the constructor.

Touchables

  • Accessibility label
  • If both are not set, searches for inner text
  • For an image button, searches for the source

Button Title

  • Accessibility label
  • For an image button, searches for the source
  • If nothing is found, searches for inner text

If you minify the React Native code, you can use the keep_classname setting to preserve the class name.