Try it free

Initial setup for React Native frontends

  • Latest Dynatrace
  • How-to guide
  • 1-min read

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:

RequirementMinimum Version

React

16.8

React Native

0.60

Node.js

16.0.0

Android SDK version

21

iOS SDK

12

Gradle

7.0

Android Gradle Plugin

7.0

Java

11

Kotlin

2.0.21

Jetpack Compose

1.4 - 1.10

Enable RUM for a mobile frontend

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

Enable RUM at the environment level

To enable RUM for mobile frontends at the environment level:

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

Set up the plugin

1. Create a Dynatrace mobile application

  1. Go to Experience Vitals Experience Vitals.
  2. Select Add Frontend in the upper-right corner.
  3. Follow the steps in the Frontend creation wizard.
  4. Select React Native as your platform.
  5. Complete the Setup step to generate your dynatrace.config.js file and save it into your project root.
  6. Optional To set up health alerts for this frontend, under Alerts, select an actor (service user recommended) and the metrics to monitor. Alerts are activated with default detection parameters, which you can customize in the frontend settings after setup is complete. For details, see Health alerts for frontends.

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. 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

4. Update Babel configuration

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 = function (api) {
  api.cache(true);
  return {
    presets: [
      ['babel-preset-expo',
        {
          jsxRuntime: 'automatic',
          jsxImportSource: '@dynatrace/react-native-plugin',
        },
      ],
    ],
    plugins: [
      '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace',
    ],
  };
};
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"
      },
    ],
  ],
};
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.

5. 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
// (e.g. in a privacy settings screen) and the user decision
// has to be applied similar to this example.
let privacyConfig = new UserPrivacyOptions(DataCollectionLevel.UserBehavior, true);
Dynatrace.applyUserPrivacyOptions(privacyConfig);

6. Build and run your app

  1. For Expo projects, ensure your project contains android and/or ios folders by running:

    npx expo prebuild

  2. 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.

  3. 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).

  1. Go to Experience Vitals Experience Vitals > Overview.
  2. Select Mobile to view all mobile frontends.
  3. Select the frontend you want to configure.
  4. 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
Related tags
Digital Experience