Instrument mobile apps with Dynatrace React Native plugin in RUM Classic

From the application settings, select Instrumentation wizard > React Native. The instrumentation wizard guides you through the set-up process.

Install the Dynatrace React Native plugin:

React Native 0.60.0+

From the instrumentation wizard, download the dynatrace.config.js file and place it into the root directory of your project next to app.json. If you're upgrading from a previous version of the Dynatrace React Native plugin, copy the old configuration values from dynatrace.config to the new dynatrace.config.js file.

Add the @dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace babel plugin and the @dynatrace/react-native-plugin JSX runtime to your babel.config.js file:

module.exports = {
  presets: [
    ['module:@react-native/babel-preset'], // or 'module:metro-react-native-babel-preset'
  ],
  plugins: [
    '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
    [
      '@babel/plugin-transform-react-jsx',
      {
        runtime: 'automatic',
        importSource: "@dynatrace/react-native-plugin"
      },
    ],
  ],
};

module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo',
        {
          jsxRuntime: 'automatic',
          jsxImportSource: '@dynatrace/react-native-plugin',
        },
      ],
    ],
    plugins: [
      '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
    ],
  };
};

Enable user opt-in mode: your app should include a privacy notice for users to configure their privacy preferences. You can insert the following API call to enable Dynatrace monitoring:

import { Dynatrace, DataCollectionLevel, UserPrivacyOptions } from '@dynatrace/react-native-plugin';

// Privacy settings configured below are only provided
// to allow a quick start with capturing monitoring data.
// This has to be requested from the user
// (for example, in a privacy settings screen) and the user decision
// has to be applied similar to this example.
const privacyConfig = new UserPrivacyOptions(DataCollectionLevel.UserBehavior, true);
Dynatrace.applyUserPrivacyOptions(privacyConfig);