@dynatrace/react-native-plugin 2.333.1 → 2.337.1

package/README.md

@@ -10,9 +10,10 @@ If you want to start using this plugin and are not a Dynatrace customer yet, hea
   * Web requests
   * Crashes
 * React-native Auto-instrumentation
-  * User actions for onPress and onLongPress (Touchables, Buttons, Pickers, RefreshControl, Pressable)
+  * User actions for onPress and onLongPress (Touchables, Buttons, Pressable, Switch, RefreshControl, Picker)
   * User actions for class and functional components (lifecycle events such as render(), didMount() and didUpdate())
   * Reporting React Native errors
+  * Tracking navigation via `react.navigation.enabled`
   * UI Interaction feature toggle via `react.userInteraction` (enable/disable user interaction capturing at runtime)
 * Manual instrumentation
   * Typescript bindings to add manual instrumentation
@@ -32,18 +33,18 @@ If you want to start using this plugin and are not a Dynatrace customer yet, hea
 * NodeJS 16.0.0+ since our dependencies require NodeJS 16.0.0
 
 ## Agent Versions
-This agent versions are configured in this plugin:
+These agent versions are configured in this plugin:
 
-* Android Agent: 8.333.1.1006
-* iOS Agent: 8.333.1.1005
+* Android Agent: 8.337.2.1010
+* iOS Agent: 8.337.1.1003
 
 ## Quick Setup
 
 1. [Install plugin](#1-install-the-plugin)
-2. [Register Dynatrace transformer and reporter](#2-register-the-dynatrace-transformer-and-reporter)
-3. [Setup configuration](#3-setup-dynatraceconfigjs)
-4. [Update Babel Configuration](#4-update-babel-configuration)
-5. [Build and run your app](#4-build-and-run-your-app)
+2. [Setup configuration](#2-setup-dynatraceconfigjs)
+3. [Register babel plugin](#3-register-our-babel-plugin-in-babelconfigjs)
+4. [Register jsx-runtime](#4-register-our-jsx-runtime-in-babelconfigjs)
+5. [Build and run your app](#5-build-and-run-your-app)
 
 ## Advanced topics
 * [Manual OneAgent Startup](#manual-oneagent-startup)
@@ -72,7 +73,6 @@ This agent versions are configured in this plugin:
   * [Send Exception Event](#send-exception-event)
   * [Send HTTP Request Event](#send-http-request-event)
   * [View Monitoring](#view-monitoring)
-  * [User Interaction](#user-interaction-1)
   * [React Native Symbolication](#react-native-symbolication)
 * [NPX Commands](#npx-commands)
   * [npx instrumentDynatrace](#npx-instrumentdynatrace)
@@ -92,7 +92,9 @@ This agent versions are configured in this plugin:
     * [Bundle Name and Version](#bundle-name-and-version)
     * [Navigation](#navigation)
     * [Source Map](#source-map)
-    * [User Interaction](#user-interaction-1)
+    * [User Interaction Configuration](#user-interaction-configuration)
+    * [Debugging our auto-instrumentation](#debugging-our-auto-instrumentation)
+    * [Using our legacy jscodeshift auto-instrumentation](#using-our-legacy-jscodeshift-auto-instrumentation)
   * [Android block](#android-block)
   * [iOS block](#ios-block)
   * [Lifecycle modes](#lifecycle)
@@ -125,9 +127,7 @@ This agent versions are configured in this plugin:
 > **Note**: If you are upgrading to React Native v0.70 (or newer) or using the @react-native-community/cli 9.x+ version, be aware that our automated script running before every start/run-android/run-ios command is no longer working. When your *dynatrace.config.js* changed be sure to execute `npx instrumentDynatrace` beforehand. 
 
 ## 1. Install the plugin
-1. Install the plugin by calling:
-    -  React Native v0.60 or newer : `npm install @dynatrace/react-native-plugin` 
-    -  React Native v0.59.x : `react-native install @dynatrace/react-native-plugin`. 
+1. Install the plugin by calling `npm install @dynatrace/react-native-plugin` 
 2. **iOS only :** If you use pods, you need to go into your `ios` directory and execute `pod install` to install the new Dynatrace dependency to your xCode project. 
   
 ### Troubleshooting
@@ -135,81 +135,36 @@ This agent versions are configured in this plugin:
 - Standalone Project: If you are using React Native standalone and embed it in your native project have a look [here](#configuration-of-standalone-react-native-project).
 - If for some reason (e.g. seperate native projects) `react-native link` doesn't work as expected, [manually add the iOS agent to your project](#manually-adding-ios-oneagent-to-a-project).
 
-## 2. Register the Dynatrace transformer and reporter
+## 2. Setup dynatrace.config.js
 
-The transformer will add modifications to your code during build. The reporter will notify us if you clear the cache of the metro bundler.
-
-Depending on your React Native version, you will need to use a different way to register the transformer. If you don't know the version, enter `react-native --version` in your terminal.
-
-The following configuration must be added. If you already have a babel transformer (babelTransformerPath) in place, you need to [use the upstreamTransformer property in dynatrace.config.js](#using-a-second-transformer-besides-the-dynatrace-transformer) to use a transformer besides our dynatrace transformer. 
-
-In your project's root directory, create or extend `metro.config.js` so that it contains the following configuration properties `transformer.babelTransformerPath` and `reporter`:
-
-#### For React Native v0.72.1 or newer
-
-```js
-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);
-```
-
-#### For Expo
+> **Note**: If you are upgrading from a previous version of this plugin, you'll notice that the file format has changed. Your old configuration is still available in `dynatrace.config` and you have to copy your values to the new `dynatrace.config.js`.
 
-```js
-const {getDefaultConfig} = require('expo/metro-config');
-const config = getDefaultConfig(__dirname);
+Define a mobile app in Dynatrace and open the Mobile app instrumentation settings. In the settings you will see a `dynatrace.config.js` file which can be downloaded for React Native. Download and copy this file into the root folder of your application. If you are not sure you can always use `npx configDynatrace` to create a default configuration file. 
 
-config.transformer.babelTransformerPath = require.resolve(
-  '@dynatrace/react-native-plugin/lib/dynatrace-transformer',
-);
+> **Note**: Define the components that you want to see lifecycle instrumented ([example](#lifecycle)). This is important as you will only see Application startup and Touches out of the box.
 
-config.reporter = require('@dynatrace/react-native-plugin/lib/dynatrace-reporter');
+For more details about the configuration, see [Advanced topics](#structure-of-the-dynatracejs-file).
 
-module.exports = config;
-```
+## 3. Register our babel plugin in babel.config.js
 
-#### For React Native v0.59 or newer
+Add the Dynatrace babel plugin to your `babel.config.js`:
 
 ```js
 module.exports = {
-    transformer: {
-      babelTransformerPath: require.resolve(
-        '@dynatrace/react-native-plugin/lib/dynatrace-transformer'
-      )
-    },
-    reporter: require('@dynatrace/react-native-plugin/lib/dynatrace-reporter'),
+  ...
+  plugins: [..., '@dynatrace/react-native-plugin/instrumentation/BabelPluginDynatrace'],
 };
 ```
 
-## 3. Setup dynatrace.config.js
+This plugin handles the auto-instrumentation of your React Native code at build time.
 
-> **Note**: If you are upgrading from a previous version of this plugin, you'll notice that the file format has changed. Your old configuration is still available in `dynatrace.config` and you have to copy your values to the new `dynatrace.config.js`.
+> **Note**: We recently moved our auto-instrumentation from a custom Metro transformer to a babel plugin for much faster bundling, independence of Metro and correct sourcemaps. The code shown above is the new and recommended way to add our auto-instrumentation to your project by adding the babel plugin directly. However, our plugin is backwards compatible in a sense that we keep supporting auto-instrumentation via the Dynatrace Metro transformer and reporter. In short, no configuration change is needed. If you continue using the Dynatrace Metro transformer and reporter, we reroute the instrumentation logic to the babel plugin internally.
 
-Define a mobile app in Dynatrace and open the Mobile app instrumentation settings. In the settings you will see a `dynatrace.config.js` file which can be downloaded for React Native. Download and copy this file into the root folder of your application. If you are not sure you can always use `npx configDynatrace` to create a default configuration file. 
+> **Note**: Bypassing Metro by adding the Babel plugin directly allows for the use of alternative bundlers. However, please be aware that we only regularly test with the default Metro bundler; other bundlers are not explicitly supported or documented.
 
-> **Note**: Define the components that you want to see lifecycle instrumented ([example](#lifecycle)). This is important as you will only see Application startup and Touches out of the box.
-
-For more details about the configuration, see [Advanced topics](#structure-of-the-dynatracejs-file).
+## 4. Register our jsx-runtime in babel.config.js
 
-## 4. Update Babel Configuration
-
-Depending on your version of Metro or Expo (if used), your babel configuration `babel.config.js` will need to be updated.
+Depending on your version of Metro or Expo (if used), you additionally need to add our jsx-runtime to your babel configuration `babel.config.js`.
 
 The changes have to be done in the following cases:
 
@@ -303,7 +258,9 @@ configurationBuilder.withCrashReporting(true)
   .withLogLevel(LogLevel.Info)
   .withLifecycleUpdate(false)
   .withUserOptIn(false)
-  .withActionNamePrivacy(false);
+  .withActionNamePrivacy(false)
+  .withActionNamePreference('any')
+  .withActionNameAlgorithm('depth-first');
   
 await Dynatrace.start(configurationBuilder.buildConfiguration());
 ```
@@ -320,7 +277,9 @@ await Dynatrace.start(configurationBuilder.buildConfiguration());
 |logLevel                 |LogLevel|LogLevel.Info|Allows you to choose between `LogLevel.Info` and `LogLevel.Debug`. Debug returns more logs. This is especially important when something is not functioning correctly.|
 |lifecycleUpdate          |boolean |false        |Decide if you want to see update cycles on lifecycle actions as well. This is per default false as it creates a lot more actions.|
 |userOptIn                |boolean |false        |Activates the privacy mode when set to `true`. User consent must be queried and set. The privacy settings for [data collection](#user-privacy-options) and [crash reporting](#crash-reporting) can be changed via  OneAgent SDK for Mobile as described under Data privacy. The default value is `false`.|
-|actionNamePrivacy        |boolean |false        |Activates a privacy mode especially for Touchables and Buttons. Setting this option to true means that a name for the control will no longer be shown, e.g. "Touch on Button". When setting a dtActionName onto the component this setting will be ignored. 
+|actionNamePrivacy        |boolean |false        |Activates a privacy mode especially for `onPress`. Setting this option to true means that a name for the control will no longer be shown, e.g. "Touch on Button". When setting a dtActionName onto the component this setting will be ignored. 
+|actionNamePreference     |string  |'any'        |Controls which type of child element is preferred when searching the component tree for the name of an `onPress` action. `'text'` prefers text and falls back to any match. `'icon'` prefers `ReactNative.Image` and custom Icons and falls back to any match. `'any'` accepts the first match regardless of type (text, image, or custom icon).
+|actionNameAlgorithm      |string  |'depth-first'        |Controls the traversal algorithm used when searching the component tree for the name of an `onPress` action. `'depth-first'` follows the first child branch fully before trying siblings. `'breadth-first'` visits all siblings at a level before going deeper, returning the shallowest match first.|
 |bundleName               |string  |undefined    |Should be used only if you have a multiple bundle setup where you load several .bundle files within your React Native application. Enter the name of your bundle. This should be unique in comparison to your other bundle names. This will ensure that actions coming from different bundles will not interfere with each other.
 
 **Attention:** 
@@ -699,7 +658,7 @@ myAction.leaveAction();
 
 With `sendBizEvent`, you can report business events. These events are standalone events, as OneAgent sends them detached from user actions or user sessions.
 
-For more information on business events, see [dynatrace documentation](https://www.dynatrace.com/support/help/how-to-use-dynatrace/business-analytics/ba-events-capturing#expand--example-configuration-files-for-rum--2).
+For more information on business events, see [dynatrace documentation](https://docs.dynatrace.com/docs/observe/business-observability/explore-business-events).
 
 ```ts
 import { Dynatrace } from '@dynatrace/react-native-plugin';
@@ -1020,7 +979,53 @@ Dynatrace.startView("UserProfileDetailed");
 
 User Interaction is an automatic instrumentation feature that captures touch and press events in your React Native application without requiring any manual API calls. When enabled, the plugin instruments your UI components at build time and sends structured interaction events to Dynatrace at runtime.
 
-To enable this feature, see the [User Interaction configuration](#user-interaction-1) section.
+The following is an example of how this feature can be configured in your `dynatrace.config.js` file. Note that this feature is disabled by default.
+
+```js
+react: {
+  userInteraction: true
+}
+```
+
+When enabled, UI Interaction can be controlled by two layers:
+
+1. **Build/config layer (`dynatrace.config.js`)**
+  - `react.userInteraction: true|false` controls whether the UI Interaction instrumentation feature is applied.
+
+2. **Runtime remote layer (`RuntimeConfigurationObserver`)**
+  - Runtime emission checks the remote flag `touch_interaction_enabled`.
+  - If remote flag is present, it is used as the source of truth.
+  - If remote flag is temporarily unavailable, the plugin falls back to the last known good remote value.
+  - If no remote value was received yet, runtime defaults to enabled behavior.
+
+#### Masking sensitive UI labels
+
+UI Interaction also supports masking sensitive labels before events are sent.
+
+Masking is applied when:
+
+* the touched element or one of its parents is marked with `dtMask`
+* the runtime masking rules classify the detected text as sensitive
+* the runtime masking rules classify the element `testID` as sensitive
+
+When masking is active:
+
+* the interaction path and component information are still reported
+* the detected UI label is replaced with the configured replacement string (default: `***`)
+* `ui_element.name_origin` is reported as `masked`
+
+Example using `dtMask`:
+
+```tsx
+<View dtMask>
+  <Pressable onPress={onPress}>
+    <Text>john.doe@example.com</Text>
+  </Pressable>
+</View>
+```
+
+This allows you to preserve interaction analytics while avoiding exposure of sensitive text in the emitted UI Interaction event.
+
 
 #### Produced data
 
@@ -1034,6 +1039,8 @@ Each captured interaction produces an event describing what the user touched and
 
 In some cases, a **responder** is also included. The responder is the component that ultimately handled the user's touch — for example, a `Pressable` that received the press event. It carries the same name, component type, and path information as the touched element, and can differ when a touch is visually on a child element but handled by a parent.
 
+If masking is active for an interaction, the event still contains the same structural information, but the detected name is replaced and the name origin changes to `masked`.
+
 #### Example event
 
 ```json
@@ -1071,13 +1078,6 @@ To generate a sourcemap:
 * Then run `npx react-native run-ios --mode Release`, or
 * Build for release in Xcode
 
-#### Accounting for Auto-Instrumentation
-
-Since the plugin auto-instruments your code, sourcemap line numbers may be slightly offset. To ensure accurate symbolication:
-
-* **Android**: Automatic patching is **enabled by default** and patches sourcemaps automatically at the end of every release build (see [Source Map](#source-map) configuration)
-* **iOS**: There is currently **no automation** available. You **must** execute [`npx lineOffsetDynatrace`](#npx-lineoffsetdynatrace) to patch your sourcemap files before uploading them to Dynatrace. Without this step, line numbers will be slightly off depending on instrumentation in iOS
-
 #### Uploading Sourcemaps
 
 Once generated and patched, upload your sourcemaps to Dynatrace. For detailed instructions, see the [symbol file management documentation](https://docs.dynatrace.com/docs/observe/digital-experience/mobile-applications/analyze-and-use/upload-and-manage-symbol-files).
@@ -1100,27 +1100,20 @@ npx instrumentDynatrace [optional: config=... gradle=... plist=...]
 * `plist=C:\MyReactIOSProject\projectName\info.plist`: Tell the script where your info.plist file is. The plist file is used for updating the configuration for the agent. 
 * `config=C:\SpecialFolderForDynatrace\dynatrace.config.js`: If you have not got your config file in the root folder of the React Native project but somewhere else.
 
-### npx configDynatrace
+If `plist=...` is not provided, the plugin tries to resolve `Info.plist` automatically in this order:
 
-```
-npx configDynatrace [optional: config=...]
-```
-
-* `config=C:\SpecialFolderForDynatrace\dynatrace.config.js`: If you have not got your config file in the root folder of the React Native project but somewhere else.
+1. Resolve app name from Expo config files in the app root (`app.json`, `app.config.js`, `app.config.ts`) and check common iOS plist locations.
+2. Fallback to scanning the `ios/` folder for `Info.plist`.
 
-## npx lineOffsetDynatrace
+For monorepos or multi-target iOS setups, automatic discovery can be ambiguous. In those cases, pass `plist=...` explicitly to select the exact file.
 
-Our auto-instrumentation modifies your source code during the build process, which causes line numbers in your sourcemaps to become slightly offset from the original source. This can result in incorrect line numbers when viewing crash reports or stack traces in Dynatrace.
-
-The `npx lineOffsetDynatrace` command patches your sourcemap file with offset information, allowing Dynatrace to accurately map instrumented line numbers back to the original source code. The patching process adds Dynatrace-specific metadata alongside the original sourcemap content without modifying any existing fields, ensuring your sourcemap continues to work as expected with all standard tooling.
-
-**Usage:**
+### npx configDynatrace
 
 ```
-npx lineOffsetDynatrace sourcemapPath=/path/to/your/sourcemap.map
+npx configDynatrace [optional: config=...]
 ```
 
-* `sourcemapPath=/path/to/your/sourcemap.map`: **(Required)** The path to the sourcemap file that should be patched.
+* `config=C:\SpecialFolderForDynatrace\dynatrace.config.js`: If you have not got your config file in the root folder of the React Native project but somewhere else.
 
 ## Customizing paths for configuration
 
@@ -1149,6 +1142,32 @@ npx react-native run-android --port=2000
 
 > **Note:** that custom arguments must not be prefixed with -- !
 
+### pnpm Monorepo Setup
+
+In a pnpm monorepo where React Native apps share a single native project (e.g. `packages/shared/android` and `packages/shared/ios`), the native platform folders are not located inside each app directory. To use shared native projects, you must provide the paths explicitly via `config=`, `gradle=`, and `plist=` arguments.
+
+Add a dedicated `instrument` script for each app in the **root** `package.json` of your monorepo:
+
+```json
+"scripts": {
+  "instrument:my-app": "pnpm --filter my-app exec instrumentDynatrace config=$PWD/apps/my-app/dynatrace.config.js gradle=$PWD/packages/shared/android/build.gradle plist=$PWD/packages/shared/ios/MyApp/Info.plist",
+  "instrument:another-app": "pnpm --filter another-app exec instrumentDynatrace config=$PWD/apps/another-app/dynatrace.config.js gradle=$PWD/packages/shared/android/build.gradle plist=$PWD/packages/shared/ios/AnotherApp/Info.plist"
+}
+```
+
+Then run the instrumentation for each app from the monorepo root:
+
+```
+pnpm instrument:my-app
+pnpm instrument:another-app
+```
+
+**Key points:**
+* `$PWD` expands to the monorepo root at the time the script runs, so all paths are absolute and unambiguous regardless of the calling directory.
+* `--filter <app-name>` scopes `pnpm exec` to the correct app workspace so `instrumentDynatrace` is resolved from that app's `node_modules`.
+* The `gradle=` argument accepts either a `build.gradle` / `build.gradle.kts` file path or a folder path. When a file is given, the plugin derives the `app/build.gradle(.kts)` path from the same directory automatically.
+* If your project uses Kotlin DSL, point `gradle=` to `build.gradle.kts` instead.
+
 ## Manually adding iOS OneAgent to a project
 
 Adding the iOS agent manually depends on the availability of support for CocoaPods. 
@@ -1180,9 +1199,6 @@ Before installing the plugin, add the following to your `package.json`:
 
 ```
 "overrides": {
-	"@react-native-picker/picker": {
-		"react-native": "<insert-version-here>"
-	},
 	"@dynatrace/react-native-plugin": {
 		"react-native": "<insert-version-here>"
 	}
@@ -1193,9 +1209,6 @@ If you are using the following `"react-native": "npm:react-native-tvos@0.69.8-2"
 
 ```
 "overrides": {
-	"@react-native-picker/picker": {
-		"react-native": "0.69.8-2"
-	},
 	"@dynatrace/react-native-plugin": {
 		"react-native": "0.69.8-2"
 	}
@@ -1259,6 +1272,8 @@ Here is a list of all the counterparts for the options that can be used with a m
 |lifecycleUpdate|false| - | - | lifecycle.includeUpdate |
 |userOptIn|false|userOptIn|DTXUserOptIn| - |
 |actionNamePrivacy|false|-|-|input.actionNamePrivacy
+|actionNamePreference|'any'|-|-|input.actionNamePreference
+|actionNameAlgorithm|'depth-first'|-|-|input.actionNameAlgorithm
 |bundleName|undefined|-|-|bundleName
 
 ### React block
@@ -1269,13 +1284,14 @@ The `react` configuration block contains all settings regarding the react instru
 
 ```js
 react : {
- 
   input : {
     instrument(filename) => {
       return true;
     },
 
     actionNamePrivacy: false,
+    actionNamePreference: 'any',
+    actionNameAlgorithm: 'depth-first',
   }
 }
 ```
@@ -1311,7 +1327,7 @@ react: {
 This activates the debug mode. You will get more console output during instrumentation and at runtime.
 
 
-### User Interaction
+#### User Interaction Configuration
 
 ```js
 react: {
@@ -1319,37 +1335,7 @@ react: {
 }
 ```
 
-Enables or disables the UI interaction (user interaction) feature.
-Set to false to disable capturing of user interactions (e.g., touch/click actions) produced by the React Native UI interaction instrumentation.
-
-#### What customers will observe after enabling UI Interaction
-
-After setting `react.userInteraction: true` and rebuilding with instrumentation, the expected flow is:
-
-1. Build-time instrumentation wraps supported UI elements and app root entrypoints.
-2. At runtime, touch/press interactions are captured and converted into UI interaction events.
-3. Events are processed by the plugin event pipeline and sent to Dynatrace.
-4. In Dynatrace, customers can analyze captured user interactions (for example, touch-driven behavior and related UI element context).
-
-Notes:
-
-- No extra UI needs to be added in customer screens for standard automatic capture.
-- If `react.debug` is enabled, additional debug output can appear during instrumentation/runtime.
-
-#### Runtime switching (config + remote configuration observer)
-
-UI Interaction can be controlled by two layers:
-
-1. **Build/config layer (`dynatrace.config.js`)**
-  - `react.userInteraction: true|false` controls whether the UI Interaction instrumentation feature is applied.
-
-2. **Runtime remote layer (`RuntimeConfigurationObserver`)**
-  - Runtime emission checks the remote flag `touch_interaction_enabled`.
-  - If remote flag is present, it is used as the source of truth.
-  - If remote flag is temporarily unavailable, the plugin falls back to the last known good remote value.
-  - If no remote value was received yet, runtime defaults to enabled behavior.
-
-In short: local config enables the feature path, while remote configuration can dynamically allow/deny event emission at runtime.
+Enables or disables the UI interaction (user interaction) feature. Set to `false` to disable capturing of user interactions (for example, touch/click actions) produced by the React Native UI interaction instrumentation. See the [User Interaction](#user-interaction) section for behavior, produced data, and runtime control details.
 
 #### Error Handler
 
@@ -1420,33 +1406,32 @@ react: {
 }
 ```
 
-#### Source Map
-
-This feature is enabled by default and patches sourcemap files so that any modifications made through Dynatrace will result in correct line numbers. If this feature is not enabled, line numbers of symbolicated stacktraces in Dynatrace might not match with your original source.
+#### Debugging our auto-instrumentation
 
-The following is an example of how this feature can be configured in your `dynatrace.config.js` file:
+You can see the changes our auto-instrumentation is making to your code with this flag:
 
 ```js
 react: {
-  sourceMap: { 
-    enabled: true
-  }
+  debugBabelPlugin: true
 }
 ```
 
-> **Note:** This automatic patching only works for Android. For iOS, you need to manually call [lineOffsetDynatrace](#npx-lineoffsetdynatrace) after the creation of the sourcemap is finished or before uploading it to Dynatrace.
+The changes our auto-instrumentation is making now get dumped into the `node_modules/@dynatrace/react-native-plugin/build` folder when building the Javascript bundle. The `*.dtx` files show what your code looks like after only our auto-instrumentation was applied to your code. The `*.dtx.downstream` files show what your code looks like after both our auto-instrumentation and all other babel plugins were applied to your code.
+
+> **Note:** This feature increases the time it takes to build the Javascript bundle. Only use it for debugging purposes. Deactivate it otherwise, especially when fast build times are important.
+
+#### Using our legacy jscodeshift auto-instrumentation
 
-The automatic patching for Android can be customized using the `androidSourcemapLocation` property to specify a custom path to your sourcemap file, resolving from the `android/` directory since that is where the automation gets executed:
+We recently moved our auto-instrumentation to a babel plugin. In case you need to, you can still switch to the old jscodeshift auto-instrumentation with this flag:
 
 ```js
 react: {
-  sourceMap: { 
-    enabled: true,
-    androidSourcemapLocation: 'sourcemap.map'
-  }
+  useLegacyJscodeshift: true
 }
 ```
 
+> **Note:** When we moved our auto-instrumentation to a babel plugin, we removed documentation that was only relevant for the jscodeshift auto-instrumentation. Most notably, we removed documentation concerning registering a custom metro transformer and patching sourcemaps. If you use the `useLegacyJscodeshift` flag, please refer to the [legacy documentation (v2.333.1)](https://www.npmjs.com/package/@dynatrace/react-native-plugin/v/2.333.1) for details on custom metro transformers and sourcemap patching.
+
 ### Android block
 
 The Android block is a wrapper for the Android configuration you find in the WebUI (in the Mobile Application Settings). Copy the content into the following block:
@@ -1614,20 +1599,38 @@ ios: {
   * displayName: Use the displayName property to check if React views have a display name set
   * instrumentation string: Auto instrumentation or manual instrumentation is passing a string. This will be used if available.
   * class name: If the display name is not available, the class name is used by taking the property name from the constructor
-* Touchables
-  * dtActionName: Use a custom property called dtActionName 
-  * If [actionNamePrivacy](#plugin-startup) is activated anything below will not be detected
-  * accessibilityLabel property
-  * If both are not set, it will search for an inner text
-  * If it is an Image Button, it will search for a source
-* Buttons
+* Touchables, Buttons, Pressable
   * dtActionName: Use a custom property called dtActionName
-  * If [actionNamePrivacy](#plugin-startup) is activated any below will not be detected
-  * Button title property
+  * If [actionNamePrivacy](#plugin-startup) is activated anything below will not be detected
+  * title property
   * accessibilityLabel property
-  * If it is an Image Button, it will search for a source
-  * If it finds nothing, it will search for an inner text
-* Switch, RefreshControl or Picker
+  * If none of the above exist, we recursively traverse `children` to find a name. We consider text, the source property of any `ReactNative.Image` and the name property of any functional component called `Icon`.
+  * You can use `actionNamePreference` to specify which of these 3 you prefer. Consider the following example:
+    ```tsx
+    <TouchableOpacity onPress={onPress}>
+      <View>
+        <Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }} />
+        <Text>Some Text</Text>
+      </View>
+    </TouchableOpacity>
+    ```
+    - `'text'`: Resulting name: `Some Text`. Prefers text and falls back to any match.
+    - `'icon'`: Resulting name: `Image Button: https://reactnative.dev/img/tiny_logo.png`. Prefers `ReactNative.Image` and custom Icons and falls back to any match.
+    - `'any'`: Resulting name: `Image Button: https://reactnative.dev/img/tiny_logo.png`. Accepts the first match regardless of type (text, image, or custom icon).
+  * You can use `actionNameAlgorithm` to specify with what algorithm `children` are traversed recursively, which in turn decides which name will be found first and used. Consider the following example:
+    ```tsx
+    <TouchableOpacity onPress={onPress}>
+      <View>
+        <View>
+          <Text>Deep Text</Text>
+        </View>
+        <Text>Shallow Text</Text>
+      </View>
+    </TouchableOpacity>
+    ```
+    - `'depth-first'`: Resulting name: `Deep Text`. Follows the first child branch fully before trying siblings.
+    - `'breadth-first'`: Resulting name: `Shallow Text`. Visits all siblings at a level before going deeper, returning the shallowest match first.
+* Switch, RefreshControl, Picker
   * dtActionName: Use a custom property called dtActionName
   * accessibilityLabel property
 
@@ -1745,75 +1748,6 @@ module.exports = {
 };
 ```
 
-## Using a second transformer besides the dynatrace transformer
-
-If you want to register the Dynatrace transformer in your configuration and you already have a transformer in place, change the upstreaming transformer for the Dynatrace transformer.
-
-This can be done via a configuration value in the `dynatrace.config.js`. The following example shows how the configuration might look like for the popular `react-native-svg-transformer`. Be aware that the following example is targeting *React Native v0.72.1* or newer. Be aware if you are using a different second transformer, you need to change `react-native-svg-transformer/react-native` accordingly.
-
-#### dynatrace.config.js
-
-```js
-// The `...` only indicates that there are other values as well, but we've omitted them in this example.
-module.exports = {
-    react : {
-        upstreamTransformer: require.resolve('react-native-svg-transformer/react-native'),
-        // ...
-    },
-    // ...       
-};
-```
-
-#### metro.config.js for React Native v0.72.1 or newer
-```js
-const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');
-const defaultConfig = getDefaultConfig(__dirname);
-const {assetExts, sourceExts} = defaultConfig.resolver;
-
-/**
- * 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'),
-  resolver: {
-    assetExts: assetExts.filter((ext) => ext !== 'svg'),
-    sourceExts: [...sourceExts, 'cjs', 'svg'],
-  },
-};
-
-module.exports = mergeConfig(defaultConfig, config);
-```
-
-#### metro.config.js for React Native v0.59 or newer
-
-```js
-const { getDefaultConfig } = require("metro-config");
-
-module.exports = (async () => {
-  const {
-    resolver: { sourceExts, assetExts }
-  } = await getDefaultConfig();
-  return {
-    transformer: {
-      babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
-    },
-    reporter: require('@dynatrace/react-native-plugin/lib/dynatrace-reporter'),
-    resolver: {
-      assetExts: assetExts.filter((ext) => ext !== "svg"),
-      sourceExts: [...sourceExts, "cjs", "svg"]
-    }
-  };
-})();
-```
-
 ## Maven Central in top-level gradle file
 
 Because the Dynatrace Android agent now requires the MavenCentral repository, if either `jcenter()` or `mavenCentral()` is not added inside of **ALL** the repositories blocks via the [top-level build.gradle](https://dt-url.net/jm610pso), the build will fail. 
@@ -2054,12 +1988,27 @@ If you are struggling with a problem, submit a support ticket to Dynatrace (supp
 <br/><br/>
 ## Changelog
 
-Latest
+2.337.1
+* Updated Android (8.337.2.1010) & iOS Agent (8.337.1.1003)
+* Fixed gradle path derivation for custom `--gradle` arguments: the plugin now correctly probes the filesystem to auto-detect `app/build.gradle(.kts)` with proper Kotlin DSL support, and validates that only `build.gradle` or `build.gradle.kts` files are accepted (not `settings.gradle`).
+* Enables [pnpm monorepo instrumentation](#pnpm-monorexpo-setup) by allowing explicit `config=`, `gradle=`, and `plist=` arguments in root `package.json` scripts, supporting shared native project layouts where `android/` and `ios/` are not co-located with each app.
+* Added [actionNamePreference](#plugin-startup) and [actionNameAlgorithm](#plugin-startup) configuration flags.
+
+2.335.1
+* Updated Android (8.335.1.1001) & iOS Agent (8.335.1.1009)
+* Dynatrace Android configuration (`dynatrace.gradle`) is now written directly next to the `build.gradle` file instead of inside `node_modules`. Existing projects with the old path are migrated automatically.
+* Updated Android Gradle plugin configuration for Gradle 9 compatibility in `plugin-runtime.gradle`.
+* Moved auto-instrumentation from jscodeshift to a Babel plugin, improvements include:
+  * Significantly faster JS bundle builds
+  * Sourcemaps now natively account for our auto-instrumentation - no patching needed
+* Added instrumentation for `BorderlessButton` and `BaseButton` from `react-native-gesture-handler`.
+* Improved iOS `Info.plist` auto-discovery for `npx instrumentDynatrace` by resolving names from `app.json`, `app.config.js`, and `app.config.ts`, plus `INFOPLIST_FILE` values from Xcode project settings.
+* Added safer fallback scanning for `Info.plist` in `ios/`, with explicit ambiguity errors for multi-target/monorepo layouts and guidance to pass `plist=...` when needed.
 
 2.333.1
 * Jetpack Compose support range extended to 1.4 - 1.10 see [Compose Compatibility Note](#compose-compatibility-note)
 * Updated Android (8.333.1.1006) & iOS Agent (8.333.1.1005)
-* Added Configuration flag to enable/disable the [User Interaction feature](#user-interaction-1).
+* Added configuration flag to enable/disable the [User Interaction feature](#user-interaction-configuration).
 * Added [User Interaction feature](#user-interaction) to collect UI interaction data such as touches, providing insights into user behavior
 
 2.331.1

package/android/build.gradle

@@ -72,7 +72,7 @@ repositories {
 }
 
 dependencies {
-	implementation 'com.dynatrace.agent:agent-android:8.333.1.1006'
+	implementation 'com.dynatrace.agent:agent-android:8.337.2.1010'
     implementation "com.facebook.react:react-native:${safeExtGet('reactNative', '+')}"
 }