[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7BWBSPVTK3XFS833MPN06SE":3,"skill-same:01M7BWBSPVTK3XFS833MPN06SE":61},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":30,"ownerDescription":31,"updatedAt":32,"install":33,"resources":46},"01M7BWBSPVTK3XFS833MPN06SE","dt-setup-react-native",null,"Integrate the Dynatrace React Native Plugin into a React Native or Expo project — dependency setup, dynatrace.config.js, Babel registration, npx instrumentation, navigation tracking, user privacy options, and verification. Handles both bare React Native and Expo (babel-preset-expo) Babel configuration automatically. Trigger: \"add Dynatrace to React Native\", \"React Native plugin setup\", \"instrument React Native app\", \"integrate Dynatrace RN\", \"mobile observability React Native\", \"react-native-plugin\", \"dynatrace react native\", \"add Dynatrace to Expo\", \"instrument Expo app\", \"Dynatrace Expo setup\". Do NOT use for: querying RN RUM data (use dt-obs-frontends), non-React Native mobile setups, or Dynatrace server-side configuration.","CognitionAI\u002Fdevin-marketplace","CognitionAI","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F163493330?v=4","01M7BVSRD98NC4FG8T3EZS6V5M","Cognition","01M7BVSRDX111C2XPWJ0E6MY26",29,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fdynatrace\u002Fskills\u002Fdt-setup-react-native\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: dt-setup-react-native\nlicense: Apache-2.0\ndescription: >-\n  Integrate the Dynatrace React Native Plugin into a React Native or Expo project —\n  dependency setup, dynatrace.config.js, Babel registration, npx instrumentation,\n  navigation tracking, user privacy options, and verification. Handles both bare React Native\n  and Expo (babel-preset-expo) Babel configuration automatically.\n  Trigger: \"add Dynatrace to React Native\", \"React Native plugin setup\", \"instrument React Native app\",\n  \"integrate Dynatrace RN\", \"mobile observability React Native\", \"react-native-plugin\",\n  \"dynatrace react native\", \"add Dynatrace to Expo\", \"instrument Expo app\", \"Dynatrace Expo setup\".\n  Do NOT use for: querying RN RUM data (use dt-obs-frontends), non-React Native mobile setups,\n  or Dynatrace server-side configuration.\n---\n\n# Dynatrace React Native Plugin Integration Skill\n\n## Prerequisites\n\n- Node.js 16.0+ and npm available on `PATH`\n- An existing React Native project (v0.68+) or Expo project (v45+) with a `package.json` at the project root\n- `android\u002F` and `ios\u002F` platform folders present (Expo managed workflow requires `npx expo prebuild` first)\n- A Dynatrace environment with access to Experience Vitals (to obtain `applicationId` and `beaconUrl`, or to download `dynatrace.config.js`)\n- Console access to Experience Vitals → Mobile to configure app settings (Data Privacy, Enablement and Cost Control)\n- macOS with CocoaPods for iOS builds\n\nWork through the steps below in order, interacting with the user at each decision point. Read actual project files before suggesting changes — do not assume the current state.\n\n## Step 1 — Check for existing `dynatrace.config.js`\n\nBefore asking the user anything, check whether `dynatrace.config.js` exists at the project root.\n\n- **File exists:** Read it, show the `applicationId` and `beaconUrl`, and confirm they match the target environment. If correct, run the `userOptIn` check below and skip to Step 3 (config is already present — Step 2 is not needed).\n- **File does not exist:** Proceed to Step 2.\n\n**`userOptIn` check:**\n\nInspect the file for `userOptIn` (Android block) and `DTXUserOptIn` (iOS block).\n\n- **Present on both platforms:** Trust the value as-is. If `true`, flag Step 9. If `false`, skip Step 9.\n- **Absent from either platform:** Ask the user: **\"Do you have User Opt-In mode enabled or disabled?\"** (If unsure: Experience Vitals → Mobile → [Your App] → Settings → Data Privacy.) Add the missing value to the relevant platform(s), then flag Step 9 if the final value is `true`.\n\n## Step 2 — Obtain `dynatrace.config.js` (only if Step 1 found no file)\n\nAsk the user which approach they prefer:\n\n**Option A — Download from console (recommended):**\n\n1. Open their Dynatrace environment\n1. Navigate to: Experience Vitals → New Frontend → Mobile\n1. Enter app name and choose **React Native** as the platform\n1. On the **Select capability and settings** screen, configure monitoring features (crash reporting, user action monitoring, etc.)\n1. Download `dynatrace.config.js` and place it at the project root (same level as `package.json`)\n\nOnce the file is in place, apply the `userOptIn` check from Step 1 and flag Step 9 if needed.\n\n**Option B — Provide credentials manually:**\nRead `references\u002Fconfig-js.md` for the full template and conditional blocks. Collect all required values from the user before creating any files, then apply the `userOptIn` check and flag Step 9 if needed.\n\n## Step 3 — Install the plugin\n\nRead `package.json` first.\n\n- **Not present:** Run:\n  ```bash\n  npm install @dynatrace\u002Freact-native-plugin\n  ```\n- **Already under `dependencies`:** No change needed.\n- **Under `devDependencies`:** Remove it and run `npm install @dynatrace\u002Freact-native-plugin`. The plugin is required at runtime including in release builds.\n\nNote: `npm install` alphabetically sorts the `dependencies` object in `package.json`. Existing entries may appear reordered after this step — this is expected npm behavior, not an error.\n\n## Step 4 — Install iOS pods (macOS only)\n\nIf on macOS and targeting iOS, run:\n\n```bash\ncd ios && pod install && cd ..\n```\n\nConfirm success before continuing. CocoaPods must be installed (`gem install cocoapods` if missing).\n\n## Step 5 — Register Babel plugin in `babel.config.js`\n\nRead `babel.config.js`. Append `BabelPluginDynatrace` to the `plugins` array, **just before** `react-native-reanimated\u002Fplugin` if that plugin is present (reanimated must always be last):\n\n```js\nmodule.exports = {\n  presets: ['module:@react-native\u002Fbabel-preset'],\n  plugins: [\n    \u002F\u002F ... existing plugins ...\n    '@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace',\n    \u002F\u002F react-native-reanimated\u002Fplugin goes here if present — must stay last\n  ],\n};\n```\n\n- If the plugins array already contains `'@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace'`: skip this step.\n- If `useLegacyJscodeshift: true` is set in `dynatrace.config.js`: the Babel plugin is already applied internally — skip this step.\n- If the project already configures `metro.config.js` with `babelTransformerPath: '@dynatrace\u002Freact-native-plugin\u002Flib\u002Fdynatrace-transformer'`: that is the legacy Metro transformer approach — auto-instrumentation is already handled; skip this step and Step 6.\n\nCommon mistakes to flag and correct:\n\n- Placing the plugin in `presets` instead of `plugins`\n- Placing `BabelPluginDynatrace` after `react-native-reanimated\u002Fplugin` — reanimated must always be the absolute last plugin\n\n## Step 6 — Register JSX runtime in `babel.config.js`\n\nRead `babel.config.js` and determine which preset the project uses — this controls how the JSX runtime is registered.\n\n### Expo (`babel-preset-expo`)\n\nIf `babel-preset-expo` appears in `presets`, set `jsxImportSource` **on the preset itself**. Do not add a separate `@babel\u002Fplugin-transform-react-jsx` plugin — Expo's preset already owns the JSX transform, and stacking a second JSX plugin over it breaks the instrumentation.\n\n```js\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: [\n      ['babel-preset-expo', {\n        jsxRuntime: 'automatic',\n        jsxImportSource: '@dynatrace\u002Freact-native-plugin',\n      }],\n    ],\n    plugins: [\n      '@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace',\n      'react-native-reanimated\u002Fplugin',  \u002F\u002F stays last\n    ],\n  };\n};\n```\n\n- If `babel-preset-expo` already has `jsxImportSource: '@dynatrace\u002Freact-native-plugin'`: no change needed.\n- If a different `jsxImportSource` is already set: replace it with `'@dynatrace\u002Freact-native-plugin'`.\n- Remove any existing `@babel\u002Fplugin-transform-react-jsx` plugin entry — it must not coexist with the preset-level `jsxImportSource` on `babel-preset-expo`.\n\n### Bare React Native (`@react-native\u002Fbabel-preset` or `metro-react-native-babel-preset`)\n\nFor metro 0.72.0+ (React Native 0.71+), add `@babel\u002Fplugin-transform-react-jsx` with the Dynatrace `importSource` **before** `BabelPluginDynatrace` in the plugins array:\n\n```js\nmodule.exports = {\n  presets: [\n    ['module:@react-native\u002Fbabel-preset', { unstable_transformProfile: 'hermes-stable' }],\n  ],\n  plugins: [\n    ['@babel\u002Fplugin-transform-react-jsx', {\n      runtime: 'automatic',\n      importSource: '@dynatrace\u002Freact-native-plugin',\n    }],\n    '@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace',\n    'react-native-reanimated\u002Fplugin',  \u002F\u002F stays last\n  ],\n};\n```\n\nThe required plugin order is:\n\n1. `@babel\u002Fplugin-transform-react-jsx` (JSX runtime — first)\n1. `BabelPluginDynatrace` (auto-instrumentation — before reanimated)\n1. `react-native-reanimated\u002Fplugin` (must be absolutely last)\n\n- If the project already has `@babel\u002Fplugin-transform-react-jsx` with `importSource: '@dynatrace\u002Freact-native-plugin'`: no change needed.\n- If a different `importSource` is set: replace it with `'@dynatrace\u002Freact-native-plugin'`.\n\nAfter any Babel change, reset Metro cache on next build:\n\n```bash\nnpx react-native start --reset-cache\n```\n\n## Step 7 — Run `npx instrumentDynatrace`\n\n```bash\nnpx instrumentDynatrace\n```\n\nThis reads `dynatrace.config.js` and automatically configures Android `build.gradle` and iOS `Info.plist`. **Must be re-run whenever `dynatrace.config.js` changes.**\n\nCommon mistakes to flag and correct:\n\n- Skipping this step after changing `dynatrace.config.js`\n- Using `react-native instrument-dynatrace` — same effect but deprecated for RN 0.70+\n- Manual edits to `build.gradle` or `Info.plist` — not needed, the script handles it\n\nIf `android\u002F` and `ios\u002F` folders exist but automatic plist discovery fails, pass explicit paths:\n\n```bash\nnpx instrumentDynatrace plist=ios\u002FYourApp\u002FInfo.plist\n```\n\n**Expo only:** If `android\u002F` and `ios\u002F` folders do not yet exist, run `npx expo prebuild` first, then re-run `npx instrumentDynatrace`.\n\n## Step 7a — Manual SDK startup (only if `autoStart: false`)\n\n**Skip this step if `autoStart` is `true` or absent in `dynatrace.config.js` — the SDK starts automatically.**\n\nCheck `dynatrace.config.js` for `autoStart: false` in the `react` block. If present, the SDK will not start on its own and no data will be collected until `Dynatrace.start()` is called explicitly.\n\nAdd the startup call at the top level of the app entry file (for example `App.tsx` or `index.js`). Any logic that depends on the SDK being ready goes after the `await`:\n\n```ts\nimport { Dynatrace, ConfigurationBuilder } from '@dynatrace\u002Freact-native-plugin';\n\nawait Dynatrace.start(\n  new ConfigurationBuilder('\u003CBEACON_URL>', '\u003CAPPLICATION_ID>').buildConfiguration()\n);\n\u002F\u002F SDK is initialized — place any SDK-dependent logic here\n```\n\nReplace `\u003CBEACON_URL>` and `\u003CAPPLICATION_ID>` with **the exact same values** from `dynatrace.config.js` — they must match or the SDK will report to the wrong environment.\n\n**Important:** Even with `autoStart: false`, the `beaconUrl` and `applicationId` must still be present in `dynatrace.config.js` (used by `npx instrumentDynatrace` to configure the native files). The values passed to `ConfigurationBuilder` at runtime take effect — values in the config file are ignored when manual startup is used.\n\n**Tradeoff:** Manual startup causes the SDK to miss the native application start event and any interactions that happen before `start()` is called. Use `autoStart: true` (the default) unless runtime credential injection is a hard requirement.\n\n## Step 8 — Enable navigation tracking\n\nCheck `dynatrace.config.js` for the `react.navigation` block and check `package.json` for `@react-navigation\u002Fnative`.\n\nIf `@react-navigation\u002Fnative` is present and `navigation.enabled` is not set to `true`, add it:\n\n```js\nmodule.exports = {\n  react: {\n    navigation: {\n      enabled: true,  \u002F\u002F requires @react-navigation\u002Fnative v5–v7\n    },\n    \u002F\u002F ...\n  },\n  \u002F\u002F ...\n};\n```\n\nThen re-run `npx instrumentDynatrace`.\n\n**What this does:** When enabled, the plugin hooks into React Navigation's `NavigationContainer` and detects route changes automatically. Each navigation event is reported to Dynatrace as a view change, with the current route represented as a URL-style path (e.g., `\u002FHome`, `\u002FHome\u002FDetails`). This populates the screen timeline in Dynatrace user sessions and associates all events with the currently active screen. This setting is enabled by default in the plugin's own config template.\n\nIf `@react-navigation\u002Fnative` is **not** present: inform the user that automatic view tracking requires `@react-navigation\u002Fnative`. They can use `Dynatrace.startView(\"ScreenName\")` for manual view tracking instead.\n\n## Step 9 — Privacy options call (only if `userOptIn: true`)\n\n**Skip this step if `userOptIn` was not set to `true` during Steps 1 or 2.**\n\nRead `references\u002Fuser-opt-in.md` for the full guidance on `DataCollectionLevel`, `crashReportingOptedIn`, and placement options. Ask the user the questions defined there, then apply the call to the relevant file.\n\n## Step 10 — Post-setup summary\n\nConfirm to the user what is active:\n\n**Enabled by default** (when `userOptIn` is `false` or absent):\n\n- ✅ Crash reporting\n- ✅ User action tracking (Touchables, Buttons, Pressable, Switch)\n- ✅ Network monitoring\n- ✅ Error handler\n- ✅ Auto-start\n\n> When `userOptIn: true`, all data collection — including crash reporting — is gated on the `applyUserPrivacyOptions(...)` call.\n\n**Configured during this setup:**\n\n- Privacy mode: [userOptIn: true — consent call added \u002F opt-out (SDK default)]\n- Navigation tracking: [react.navigation.enabled: true \u002F manual via Dynatrace.startView()]\n\n## Step 11 — Verification\n\nRead `references\u002Fverification.md` and show the user the verification checklist. If no data appears after 5 minutes, work through the troubleshooting steps in that file.\n\n## Reference Files\n\n- `references\u002Fconfig-js.md` — Full `dynatrace.config.js` template with Grail and userOptIn conditional blocks\n- `references\u002Fuser-opt-in.md` — `applyUserPrivacyOptions` guidance, `DataCollectionLevel` options, placement options\n- `references\u002Fverification.md` — Post-setup verification checklist and troubleshooting\n\n## External References\n\n- [@dynatrace\u002Freact-native-plugin on npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@dynatrace\u002Freact-native-plugin) — package changelog, API docs, and latest version\n- [Dynatrace React Native Installation Docs](https:\u002F\u002Fdocs.dynatrace.com\u002Fdocs\u002Fobserve\u002Fdigital-experience\u002Fnew-rum-experience\u002Fmobile-frontends\u002Freact-native) — official setup guide\n","# Dynatrace React Native Plugin Integration Skill\n\n## Prerequisites\n\n- Node.js 16.0+ and npm available on `PATH`\n- An existing React Native project (v0.68+) or Expo project (v45+) with a `package.json` at the project root\n- `android\u002F` and `ios\u002F` platform folders present (Expo managed workflow requires `npx expo prebuild` first)\n- A Dynatrace environment with access to Experience Vitals (to obtain `applicationId` and `beaconUrl`, or to download `dynatrace.config.js`)\n- Console access to Experience Vitals → Mobile to configure app settings (Data Privacy, Enablement and Cost Control)\n- macOS with CocoaPods for iOS builds\n\nWork through the steps below in order, interacting with the user at each decision point. Read actual project files before suggesting changes — do not assume the current state.\n\n## Step 1 — Check for existing `dynatrace.config.js`\n\nBefore asking the user anything, check whether `dynatrace.config.js` exists at the project root.\n\n- **File exists:** Read it, show the `applicationId` and `beaconUrl`, and confirm they match the target environment. If correct, run the `userOptIn` check below and skip to Step 3 (config is already present — Step 2 is not needed).\n- **File does not exist:** Proceed to Step 2.\n\n**`userOptIn` check:**\n\nInspect the file for `userOptIn` (Android block) and `DTXUserOptIn` (iOS block).\n\n- **Present on both platforms:** Trust the value as-is. If `true`, flag Step 9. If `false`, skip Step 9.\n- **Absent from either platform:** Ask the user: **\"Do you have User Opt-In mode enabled or disabled?\"** (If unsure: Experience Vitals → Mobile → [Your App] → Settings → Data Privacy.) Add the missing value to the relevant platform(s), then flag Step 9 if the final value is `true`.\n\n## Step 2 — Obtain `dynatrace.config.js` (only if Step 1 found no file)\n\nAsk the user which approach they prefer:\n\n**Option A — Download from console (recommended):**\n\n1. Open their Dynatrace environment\n1. Navigate to: Experience Vitals → New Frontend → Mobile\n1. Enter app name and choose **React Native** as the platform\n1. On the **Select capability and settings** screen, configure monitoring features (crash reporting, user action monitoring, etc.)\n1. Download `dynatrace.config.js` and place it at the project root (same level as `package.json`)\n\nOnce the file is in place, apply the `userOptIn` check from Step 1 and flag Step 9 if needed.\n\n**Option B — Provide credentials manually:**\nRead `references\u002Fconfig-js.md` for the full template and conditional blocks. Collect all required values from the user before creating any files, then apply the `userOptIn` check and flag Step 9 if needed.\n\n## Step 3 — Install the plugin\n\nRead `package.json` first.\n\n- **Not present:** Run:\n  ```bash\n  npm install @dynatrace\u002Freact-native-plugin\n  ```\n- **Already under `dependencies`:** No change needed.\n- **Under `devDependencies`:** Remove it and run `npm install @dynatrace\u002Freact-native-plugin`. The plugin is required at runtime including in release builds.\n\nNote: `npm install` alphabetically sorts the `dependencies` object in `package.json`. Existing entries may appear reordered after this step — this is expected npm behavior, not an error.\n\n## Step 4 — Install iOS pods (macOS only)\n\nIf on macOS and targeting iOS, run:\n\n```bash\ncd ios && pod install && cd ..\n```\n\nConfirm success before continuing. CocoaPods must be installed (`gem install cocoapods` if missing).\n\n## Step 5 — Register Babel plugin in `babel.config.js`\n\nRead `babel.config.js`. Append `BabelPluginDynatrace` to the `plugins` array, **just before** `react-native-reanimated\u002Fplugin` if that plugin is present (reanimated must always be last):\n\n```js\nmodule.exports = {\n  presets: ['module:@react-native\u002Fbabel-preset'],\n  plugins: [\n    \u002F\u002F ... existing plugins ...\n    '@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace',\n    \u002F\u002F react-native-reanimated\u002Fplugin goes here if present — must stay last\n  ],\n};\n```\n\n- If the plugins array already contains `'@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace'`: skip this step.\n- If `useLegacyJscodeshift: true` is set in `dynatrace.config.js`: the Babel plugin is already applied internally — skip this step.\n- If the project already configures `metro.config.js` with `babelTransformerPath: '@dynatrace\u002Freact-native-plugin\u002Flib\u002Fdynatrace-transformer'`: that is the legacy Metro transformer approach — auto-instrumentation is already handled; skip this step and Step 6.\n\nCommon mistakes to flag and correct:\n\n- Placing the plugin in `presets` instead of `plugins`\n- Placing `BabelPluginDynatrace` after `react-native-reanimated\u002Fplugin` — reanimated must always be the absolute last plugin\n\n## Step 6 — Register JSX runtime in `babel.config.js`\n\nRead `babel.config.js` and determine which preset the project uses — this controls how the JSX runtime is registered.\n\n### Expo (`babel-preset-expo`)\n\nIf `babel-preset-expo` appears in `presets`, set `jsxImportSource` **on the preset itself**. Do not add a separate `@babel\u002Fplugin-transform-react-jsx` plugin — Expo's preset already owns the JSX transform, and stacking a second JSX plugin over it breaks the instrumentation.\n\n```js\nmodule.exports = function (api) {\n  api.cache(true);\n  return {\n    presets: [\n      ['babel-preset-expo', {\n        jsxRuntime: 'automatic',\n        jsxImportSource: '@dynatrace\u002Freact-native-plugin',\n      }],\n    ],\n    plugins: [\n      '@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace',\n      'react-native-reanimated\u002Fplugin',  \u002F\u002F stays last\n    ],\n  };\n};\n```\n\n- If `babel-preset-expo` already has `jsxImportSource: '@dynatrace\u002Freact-native-plugin'`: no change needed.\n- If a different `jsxImportSource` is already set: replace it with `'@dynatrace\u002Freact-native-plugin'`.\n- Remove any existing `@babel\u002Fplugin-transform-react-jsx` plugin entry — it must not coexist with the preset-level `jsxImportSource` on `babel-preset-expo`.\n\n### Bare React Native (`@react-native\u002Fbabel-preset` or `metro-react-native-babel-preset`)\n\nFor metro 0.72.0+ (React Native 0.71+), add `@babel\u002Fplugin-transform-react-jsx` with the Dynatrace `importSource` **before** `BabelPluginDynatrace` in the plugins array:\n\n```js\nmodule.exports = {\n  presets: [\n    ['module:@react-native\u002Fbabel-preset', { unstable_transformProfile: 'hermes-stable' }],\n  ],\n  plugins: [\n    ['@babel\u002Fplugin-transform-react-jsx', {\n      runtime: 'automatic',\n      importSource: '@dynatrace\u002Freact-native-plugin',\n    }],\n    '@dynatrace\u002Freact-native-plugin\u002Finstrumentation\u002FBabelPluginDynatrace',\n    'react-native-reanimated\u002Fplugin',  \u002F\u002F stays last\n  ],\n};\n```\n\nThe required plugin order is:\n\n1. `@babel\u002Fplugin-transform-react-jsx` (JSX runtime — first)\n1. `BabelPluginDynatrace` (auto-instrumentation — before reanimated)\n1. `react-native-reanimated\u002Fplugin` (must be absolutely last)\n\n- If the project already has `@babel\u002Fplugin-transform-react-jsx` with `importSource: '@dynatrace\u002Freact-native-plugin'`: no change needed.\n- If a different `importSource` is set: replace it with `'@dynatrace\u002Freact-native-plugin'`.\n\nAfter any Babel change, reset Metro cache on next build:\n\n```bash\nnpx react-native start --reset-cache\n```\n\n## Step 7 — Run `npx instrumentDynatrace`\n\n```bash\nnpx instrumentDynatrace\n```\n\nThis reads `dynatrace.config.js` and automatically configures Android `build.gradle` and iOS `Info.plist`. **Must be re-run whenever `dynatrace.config.js` changes.**\n\nCommon mistakes to flag and correct:\n\n- Skipping this step after changing `dynatrace.config.js`\n- Using `react-native instrument-dynatrace` — same effect but deprecated for RN 0.70+\n- Manual edits to `build.gradle` or `Info.plist` — not needed, the script handles it\n\nIf `android\u002F` and `ios\u002F` folders exist but automatic plist discovery fails, pass explicit paths:\n\n```bash\nnpx instrumentDynatrace plist=ios\u002FYourApp\u002FInfo.plist\n```\n\n**Expo only:** If `android\u002F` and `ios\u002F` folders do not yet exist, run `npx expo prebuild` first, then re-run `npx instrumentDynatrace`.\n\n## Step 7a — Manual SDK startup (only if `autoStart: false`)\n\n**Skip this step if `autoStart` is `true` or absent in `dynatrace.config.js` — the SDK starts automatically.**\n\nCheck `dynatrace.config.js` for `autoStart: false` in the `react` block. If present, the SDK will not start on its own and no data will be collected until `Dynatrace.start()` is called explicitly.\n\nAdd the startup call at the top level of the app entry file (for example `App.tsx` or `index.js`). Any logic that depends on the SDK being ready goes after the `await`:\n\n```ts\nimport { Dynatrace, ConfigurationBuilder } from '@dynatrace\u002Freact-native-plugin';\n\nawait Dynatrace.start(\n  new ConfigurationBuilder('\u003CBEACON_URL>', '\u003CAPPLICATION_ID>').buildConfiguration()\n);\n\u002F\u002F SDK is initialized — place any SDK-dependent logic here\n```\n\nReplace `\u003CBEACON_URL>` and `\u003CAPPLICATION_ID>` with **the exact same values** from `dynatrace.config.js` — they must match or the SDK will report to the wrong environment.\n\n**Important:** Even with `autoStart: false`, the `beaconUrl` and `applicationId` must still be present in `dynatrace.config.js` (used by `npx instrumentDynatrace` to configure the native files). The values passed to `ConfigurationBuilder` at runtime take effect — values in the config file are ignored when manual startup is used.\n\n**Tradeoff:** Manual startup causes the SDK to miss the native application start event and any interactions that happen before `start()` is called. Use `autoStart: true` (the default) unless runtime credential injection is a hard requirement.\n\n## Step 8 — Enable navigation tracking\n\nCheck `dynatrace.config.js` for the `react.navigation` block and check `package.json` for `@react-navigation\u002Fnative`.\n\nIf `@react-navigation\u002Fnative` is present and `navigation.enabled` is not set to `true`, add it:\n\n```js\nmodule.exports = {\n  react: {\n    navigation: {\n      enabled: true,  \u002F\u002F requires @react-navigation\u002Fnative v5–v7\n    },\n    \u002F\u002F ...\n  },\n  \u002F\u002F ...\n};\n```\n\nThen re-run `npx instrumentDynatrace`.\n\n**What this does:** When enabled, the plugin hooks into React Navigation's `NavigationContainer` and detects route changes automatically. Each navigation event is reported to Dynatrace as a view change, with the current route represented as a URL-style path (e.g., `\u002FHome`, `\u002FHome\u002FDetails`). This populates the screen timeline in Dynatrace user sessions and associates all events with the currently active screen. This setting is enabled by default in the plugin's own config template.\n\nIf `@react-navigation\u002Fnative` is **not** present: inform the user that automatic view tracking requires `@react-navigation\u002Fnative`. They can use `Dynatrace.startView(\"ScreenName\")` for manual view tracking instead.\n\n## Step 9 — Privacy options call (only if `userOptIn: true`)\n\n**Skip this step if `userOptIn` was not set to `true` during Steps 1 or 2.**\n\nRead `references\u002Fuser-opt-in.md` for the full guidance on `DataCollectionLevel`, `crashReportingOptedIn`, and placement options. Ask the user the questions defined there, then apply the call to the relevant file.\n\n## Step 10 — Post-setup summary\n\nConfirm to the user what is active:\n\n**Enabled by default** (when `userOptIn` is `false` or absent):\n\n- ✅ Crash reporting\n- ✅ User action tracking (Touchables, Buttons, Pressable, Switch)\n- ✅ Network monitoring\n- ✅ Error handler\n- ✅ Auto-start\n\n> When `userOptIn: true`, all data collection — including crash reporting — is gated on the `applyUserPrivacyOptions(...)` call.\n\n**Configured during this setup:**\n\n- Privacy mode: [userOptIn: true — consent call added \u002F opt-out (SDK default)]\n- Navigation tracking: [react.navigation.enabled: true \u002F manual via Dynatrace.startView()]\n\n## Step 11 — Verification\n\nRead `references\u002Fverification.md` and show the user the verification checklist. If no data appears after 5 minutes, work through the troubleshooting steps in that file.\n\n## Reference Files\n\n- `references\u002Fconfig-js.md` — Full `dynatrace.config.js` template with Grail and userOptIn conditional blocks\n- `references\u002Fuser-opt-in.md` — `applyUserPrivacyOptions` guidance, `DataCollectionLevel` options, placement options\n- `references\u002Fverification.md` — Post-setup verification checklist and troubleshooting\n\n## External References\n\n- [@dynatrace\u002Freact-native-plugin on npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@dynatrace\u002Freact-native-plugin) — package changelog, API docs, and latest version\n- [Dynatrace React Native Installation Docs](https:\u002F\u002Fdocs.dynatrace.com\u002Fdocs\u002Fobserve\u002Fdigital-experience\u002Fnew-rum-experience\u002Fmobile-frontends\u002Freact-native) — official setup guide\n",{"name":5,"license":15,"description":7},"main","9836d94e88404aabb682086405c2aa9cba7657ac","plugins\u002Fdynatrace\u002Fskills\u002Fdt-setup-react-native",156,"https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace","https:\u002F\u002Fgithub.com\u002FCognitionAI","https:\u002F\u002Fcognition.ai\u002F","Makers of Devin, the AI software engineer.","2026-11-13 07:08:23",{"source":8,"skillName":5,"commands":34,"prompt":44,"zipAvailable":45},[35,38,41],{"tool":36,"command":37},"npx","npx skills add CognitionAI\u002Fdevin-marketplace --skill dt-setup-react-native",{"tool":39,"command":40},"bunx","bunx skills add CognitionAI\u002Fdevin-marketplace --skill dt-setup-react-native",{"tool":42,"command":43},"pnpm","pnpm dlx skills add CognitionAI\u002Fdevin-marketplace --skill dt-setup-react-native","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fdynatrace\u002Fskills\u002Fdt-setup-react-native\u002FSKILL.md",true,[47,53,57],{"path":48,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":51,"sourceHtmlUrl":52},"references\u002Fconfig-js.md","REFERENCE","参考文档",3385,"https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fdynatrace\u002Fskills\u002Fdt-setup-react-native\u002Freferences\u002Fconfig-js.md",{"path":54,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":55,"sourceHtmlUrl":56},"references\u002Fuser-opt-in.md",3029,"https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fdynatrace\u002Fskills\u002Fdt-setup-react-native\u002Freferences\u002Fuser-opt-in.md",{"path":58,"resourceType":49,"resourceTypeDesc":50,"sizeBytes":59,"sourceHtmlUrl":60},"references\u002Fverification.md",3962,"https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fdynatrace\u002Fskills\u002Fdt-setup-react-native\u002Freferences\u002Fverification.md",[62,69,76,82,89,96],{"skillNo":63,"name":64,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M7BYC4AJGM98P2G9JH7QS24Z","business-data","MIT","https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fwindsor-ai\u002Fskills\u002Fbusiness-data\u002FSKILL.md",[],[],{"skillNo":70,"name":71,"nameZh":6,"description":72,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":19},"01M7BYBZ0CD4CBCPZHRZ551BNK","workflow","Creates durable, resumable workflows using Vercel's Workflow SDK. Use when building workflows that need to survive restarts, pause for external events, retry on failure, or coordinate multi-step operations over time. Triggers on mentions of \"workflow\", \"durable functions\", \"resumable\", \"workflow sdk\", \"queue\", \"event\", \"push\", \"subscribe\", or step-based orchestration.","https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fworkflow\u002Fupstream\u002FSKILL.md",[],[],{"skillNo":77,"name":71,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":19},"01M7BYB1XSZHKHD8JZTQJ62JN0","Vercel Workflow SDK expert guidance. Use when building durable workflows, long-running tasks, API routes or agents that need pause\u002Fresume, retries, step-based execution, or crash-safe orchestration with Vercel Workflow.","https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fworkflow\u002FSKILL.md",[],[],{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":88,"publishedAt":19},"01M7BYASGMK935J33E21N5WTW0","verification","Full-story verification — infers what the user is building, then verifies the complete flow end-to-end: browser → API → data → response. Triggers on dev server start and 'why isn't this working' signals.","https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fverification\u002FSKILL.md",[],[],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":19},"01M7BY9WJERKSKEH9HK6E71GW2","vercel-storage","Vercel storage expert guidance — Blob, Global Config (formerly Edge Config), and Marketplace storage (Neon Postgres, Upstash Redis). Use when choosing, configuring, or using data storage with Vercel applications.","https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-storage\u002FSKILL.md",[],[],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":102,"publishedAt":19},"01M7BY9N034894YV2J9DCRZHYS","vercel-services","Configure and troubleshoot Vercel Services for multiple frontends and backends in one project. Use when composing a polyglot or multi-service application on one Vercel deployment; defining the `services` key, service-targeted rewrites, or service bindings in `vercel.json`; or running all services with `vercel dev`.","https:\u002F\u002Fgithub.com\u002FCognitionAI\u002Fdevin-marketplace\u002Fblob\u002Fmain\u002Fplugins\u002Fvercel\u002Fskills\u002Fvercel-services\u002FSKILL.md",[],[]]