Instrument mobile apps with Dynatrace React Native plugin

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:

Register the Dynatrace transformer: in the project's root, either create or extend metro.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")
};

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.

Update the Babel configuration in the babel.config.js file if you're using the following versions of Metro or Expo:

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

module.exports = {
  presets: [
    ['babel-preset-expo',
      {
        jsxRuntime: 'automatic',
        jsxImportSource: '@dynatrace/react-native-plugin',
      },
    ],
  ],
};