Initial setup for React Native frontends

Latest Dynatrace
How-to guide
1-min read
Published Jan 12, 2025

On this page, you will learn how to perform initial setup for React Native frontends.

Prerequisites

Before you begin, ensure your environment meets the following requirements:

Requirement

Minimum Version

React

16.8

React Native

0.60

Node.js

16.0.0

Android SDK version

iOS SDK

Gradle

7.0

Android Gradle Plugin

7.0

Java

Kotlin

2.0.21

Jetpack Compose

1.4 - 1.9

Enable the New RUM Experience for a mobile frontend

Go to Experience Vitals > Overview.
Select Mobile to view all mobile frontends.
Select the frontend you want to configure.
Navigate to the Settings tab.
Under Enablement and cost control, turn on New Real User Monitoring Experience.

Enable the New RUM Experience at the environment level

To enable the New RUM Experience for web frontends at the environment level:

Go to Settings > Collect and capture > Real User Monitoring > Mobile frontends > Traffic and cost control.
Turn on Enable New Real User Monitoring Experience.

Set up the plugin

1. Create a Dynatrace mobile application

Go to Experience Vitals.
Select Add Frontend in the upper-right corner.
Follow the steps in the Frontend creation wizard.
Select React Native as your platform.
Complete the wizard to generate your dynatrace.config.js file and save it into your project root.

2. Install the plugin

Install the Dynatrace React Native plugin:

npm install @dynatrace/react-native-plugin

For iOS projects using CocoaPods, navigate to your ios directory and run pod install to install the Dynatrace dependency.

3. Register Dynatrace transformer and reporter

The transformer adds modifications to your code during build. The reporter notifies the plugin when you clear the metro bundler cache.

Create or extend metro.config.js in your project root with the following configuration:

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
const defaultConfig = getDefaultConfig(__dirname);

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve(
      '@dynatrace/react-native-plugin/lib/dynatrace-transformer',
    ),
  },
  reporter: require('@dynatrace/react-native-plugin/lib/dynatrace-reporter'),
};

module.exports = mergeConfig(defaultConfig, config);

const {getDefaultConfig} = require('expo/metro-config');
const config = getDefaultConfig(__dirname);

config.transformer.babelTransformerPath = require.resolve(
  '@dynatrace/react-native-plugin/lib/dynatrace-transformer',
);

config.reporter = require('@dynatrace/react-native-plugin/lib/dynatrace-reporter');

module.exports = config;

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

If you already have a babel transformer (babelTransformerPath) in place, use the upstreamTransformer property in dynatrace.config.js to chain transformers.

4. Configure the Dynatrace settings

Copy the dynatrace.config.js file you generated in the Dynatrace web UI to your project root.

The configuration file contains your beaconUrl, applicationId, and instrumentation settings. Configure the components you want to monitor for lifecycle instrumentation.

By default, you'll only see application startup and touch events. Define the components you want lifecycle-instrumented in the configuration file to capture additional events.

If you need to create a default configuration file, run:

npx configDynatrace

5. Update Babel configuration

Update your babel.config.js file if you're using:

Metro 0.72.0 or newer
Expo 44.0.0 or newer, or babel-preset-expo 9.0.0 or newer

Add the automatic JSX runtime configuration:

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

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

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

NativeWind users

If you're using NativeWind, use 'nativewind' as the importSource for the JSX runtime in babel.config.js. The plugin internally calls the Dynatrace JSX runtime after NativeWind's runtime.

6. Build and run your app

For Expo projects, ensure your project contains android and/or ios folders by running:
```
npx expo prebuild
```
Run the instrumentation command to configure both Android and iOS projects:
```
npx instrumentDynatrace
```
This command modifies your application's *.plist and build.gradle files, enabling auto-instrumentation on Android and writing the configuration for both platforms.

Build and run your application:

react-native run-android
# or
react-native run-ios

When you change your configuration in dynatrace.config.js, reset the metro cache using:

react-native start --reset-cache

Metro caches all files, and configuration changes might lead to inconsistent behavior without resetting the cache.

React Native 0.70 or newer

The automated script that runs before every start, run-android, or run-ios command no longer works with React Native 0.70+ or @react-native-community/cli 9.x+. When your dynatrace.config.js changes, manually execute npx instrumentDynatrace beforehand.

Verify your installation

After installing and configuring OneAgent, verify that data is being collected:

Open your app and perform several actions (navigate between screens, tap buttons, and make network requests).

Go to Experience Vitals > Overview.
Select Mobile to view all mobile frontends.
Select the frontend you want to configure.
Verify that sessions and user actions appear in the data.

This data can also be analyzed directly in Grail using DQL.

It may take a few minutes for data to appear in Dynatrace after the first app launch.

Next steps

After completing the initial setup, consider exploring the following topics to enhance your monitoring capabilities:

Advanced configuration