DatadogProvider on app startup with React Native 0.81.4 and Expo SDK 54 causes createInteropElement TypeError

[keith-wedinger-lark]

Describe the bug

Inside the Expo React Native mobile app I am working on, we are using <DatadogProvider> as follows:

    <DatadogProvider configuration={datadogConfig}>
      <GestureHandlerRootView className={cn(colorScheme === 'dark' ? 'dark' : 'light')}>
        <ThemeProvider value={NAV_THEME[colorScheme ?? 'light']}>
          <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} />
          <Stack>
            <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
            <Stack.Screen name='+not-found' />
            <Stack.Screen name='storybook' options={{ headerShown: false }} />
          </Stack>
          <PortalHost />
        </ThemeProvider>
      </GestureHandlerRootView>
    </DatadogProvider>

When the app starts up, it is reporting this error (from the iOS simulator, Android emulator shows the same error). Removing <DatadogProvider> eliminates the error.

Reproduction steps

The Expo React Native mobile app in question is using the following dependencies. I suspect that a recent dependency update changed the behavior of createInteropElement.

• "expo": "54.0.12"
• "react-native": "0.81.4"
• "react": "19.1.0"

SDK logs

Here is the stack trace when the error occurs:

 ERROR  [Error: Uncaught (in promise, id: 0) TypeError: Cannot assign to property 'createInteropElement' which has only a getter]

Call Stack
  startTracking (node_modules/@datadog/mobile-react-native/lib/module/rum/instrumentation/interactionTracking/DdRumUserInteractionTracking.js:60:5)
  enableFeatures (node_modules/@datadog/mobile-react-native/lib/module/DdSdkReactNative.js:234:49)
  _initializeFromDatadogProvider (node_modules/@datadog/mobile-react-native/lib/module/DdSdkReactNative.js:70:36)
  next (<native>)
  asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
  _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:27)
  Promise$argument_0 (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:12)
  tryCallTwo (address at (InternalBytecode.js:1:1222)
  doResolve (address at (InternalBytecode.js:1:2541)
  Promise (address at (InternalBytecode.js:1:1318)
  <anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:23)
  apply (<native>)
  DdSdkReactNative (node_modules/@datadog/mobile-react-native/lib/module/DdSdkReactNative.js:94:4)
  initializeDatadog (node_modules/@datadog/mobile-react-native/lib/module/sdk/DatadogProvider/DatadogProvider.js:25:56)
  next (<native>)
  asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:17)
  _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:17:27)
  Promise$argument_0 (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:12)
  tryCallTwo (address at (InternalBytecode.js:1:1222)
  doResolve (address at (InternalBytecode.js:1:2541)
  Promise (address at (InternalBytecode.js:1:1318)
  <anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:14:23)
  apply (<native>)
  <global> (node_modules/@datadog/mobile-react-native/lib/module/sdk/DatadogProvider/DatadogProvider.js:24:24)
  DatadogProvider (node_modules/@datadog/mobile-react-native/lib/module/sdk/DatadogProvider/DatadogProvider.js:52:24)
  callComponent.reactStackBottomFrame (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:15887:29)
  renderWithHooks (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:3857:40)
  updateFunctionComponent (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:7289:34)
  beginWork (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:8541:41)
  runWithFiberInDEV (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:683:21)
  performUnitOfWork (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:12220:39)
  workLoopSync (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:12044:58)
  renderRootSync (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:12024:23)
  performWorkOnRoot (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:11551:27)
  performWorkOnRootViaSchedulerTask (node_modules/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js:3073:24)

Expected behavior

On app startup, <DatadogProvider> should not throw an error when used with the dependencies I list above.

Affected SDK versions

2.12.2

Latest working SDK version

N/A

Did you confirm if the latest SDK version fixes the bug?

Yes

Integration Methods

NPM

React Native Version

0.81.4

Package.json Contents

  "dependencies": {
    "@aws-amplify/react-native": "^1.2.0",
    "@datadog/mobile-react-native": "^2.12.2",
    "@expo-google-fonts/fira-mono": "^0.4.1",
    "@expo-google-fonts/fira-sans": "^0.4.1",
    "@expo-google-fonts/fira-sans-condensed": "^0.4.1",
    "@expo/metro-runtime": "~6.1.2",
    "@expo/vector-icons": "^15.0.2",
    "@gorhom/bottom-sheet": "^5.2.6",
    "@react-native-async-storage/async-storage": "2.2.0",
    "@react-native-community/datetimepicker": "8.4.4",
    "@react-native-community/netinfo": "^11.4.1",
    "@react-native-community/slider": "5.0.1",
    "@react-navigation/bottom-tabs": "^7.3.10",
    "@react-navigation/elements": "^2.6.4",
    "@react-navigation/native": "^7.1.6",
    "@rn-primitives/accordion": "^1.2.0",
    "@rn-primitives/alert-dialog": "^1.2.0",
    "@rn-primitives/aspect-ratio": "^1.2.0",
    "@rn-primitives/avatar": "^1.2.0",
    "@rn-primitives/checkbox": "^1.2.0",
    "@rn-primitives/collapsible": "^1.2.0",
    "@rn-primitives/context-menu": "^1.2.0",
    "@rn-primitives/dialog": "^1.2.0",
    "@rn-primitives/dropdown-menu": "^1.2.0",
    "@rn-primitives/hover-card": "^1.2.0",
    "@rn-primitives/label": "^1.2.0",
    "@rn-primitives/menubar": "^1.2.0",
    "@rn-primitives/popover": "^1.2.0",
    "@rn-primitives/portal": "^1.3.0",
    "@rn-primitives/progress": "^1.2.0",
    "@rn-primitives/radio-group": "^1.2.0",
    "@rn-primitives/select": "^1.2.0",
    "@rn-primitives/separator": "^1.2.0",
    "@rn-primitives/slot": "^1.2.0",
    "@rn-primitives/switch": "^1.2.0",
    "@rn-primitives/tabs": "^1.2.0",
    "@rn-primitives/toggle": "^1.2.0",
    "@rn-primitives/toggle-group": "^1.2.0",
    "@rn-primitives/tooltip": "^1.2.0",
    "aws-amplify": "^6.15.7",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "expo": "54.0.12",
    "expo-application": "~7.0.7",
    "expo-blur": "~15.0.7",
    "expo-constants": "~18.0.8",
    "expo-datadog": "^54.0.0",
    "expo-dev-client": "~6.0.13",
    "expo-device": "~8.0.9",
    "expo-font": "~14.0.8",
    "expo-haptics": "~15.0.7",
    "expo-image": "~3.0.9",
    "expo-insights": "~0.10.7",
    "expo-linking": "~8.0.8",
    "expo-localization": "~17.0.7",
    "expo-router": "~6.0.10",
    "expo-splash-screen": "~31.0.10",
    "expo-status-bar": "~3.0.8",
    "expo-symbols": "~1.0.7",
    "expo-system-ui": "~6.0.7",
    "expo-updates": "~29.0.12",
    "expo-web-browser": "~15.0.8",
    "i18next": "^25.5.2",
    "lucide-react-native": "^0.544.0",
    "nativewind": "^4.2.1",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-i18next": "^15.7.3",
    "react-native": "0.81.4",
    "react-native-css-interop": "^0.2.1",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-reanimated": "~4.1.2",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0",
    "react-native-svg": "15.12.1",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-web": "^0.21.0",
    "react-native-worklets": "0.5.1",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@aws-sdk/client-translate": "^3.896.0",
    "@babel/core": "^7.28.4",
    "@datadog/datadog-ci": "^3.21.4",
    "@dev-plugins/react-navigation": "^0.3.1",
    "@eslint-community/eslint-plugin-eslint-comments": "4.5.0",
    "@eslint/compat": "1.3.2",
    "@eslint/js": "^9.36.0",
    "@storybook/addon-ondevice-actions": "^9.1.3",
    "@storybook/addon-ondevice-controls": "^9.1.3",
    "@storybook/react": "^9.1.8",
    "@storybook/react-native": "^9.1.3",
    "@storybook/react-native-ui": "^9.1.3",
    "@storybook/react-native-ui-lite": "^9.1.3",
    "@testing-library/react-native": "^13.3.3",
    "@types/jest": "30.0.0",
    "@types/jest-image-snapshot": "6.4.0",
    "@types/react": "~19.1.10",
    "babel-loader": "^10.0.0",
    "eslint": "^9.36.0",
    "eslint-config-expo": "~10.0.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-typescript": "4.4.4",
    "eslint-plugin-i18next": "6.1.3",
    "eslint-plugin-prettier": "5.5.4",
    "eslint-plugin-react": "7.37.5",
    "eslint-plugin-react-compiler": "19.1.0-rc.2",
    "eslint-plugin-react-hooks": "5.2.0",
    "eslint-plugin-react-native": "5.0.0",
    "eslint-plugin-react-native-a11y": "3.5.1",
    "eslint-plugin-simple-import-sort": "12.1.1",
    "eslint-plugin-storybook": "^9.1.7",
    "husky": "9.1.7",
    "identity-obj-proxy": "^3.0.0",
    "jest": "~29.7.0",
    "jest-expo": "~54.0.12",
    "jest-image-snapshot": "^6.5.1",
    "lint-staged": "^16.1.6",
    "prettier": "3.6.2",
    "prettier-plugin-tailwindcss": "^0.6.14",
    "react-test-renderer": "^19.1.0",
    "storybook": "^9.1.8",
    "tailwindcss": "3.4.17",
    "typescript": "~5.9.2",
    "typescript-eslint": "^8.44.0"
  },

iOS Setup

No response

Android Setup

No response

Device Information

No response

Other relevant information

No response

[keith-wedinger-lark]

Turning off trackUserInteractions inside our DatadogProviderConfiguration allows me to work around this issue.

[cdn34dd]

Hey @keith-wedinger-lark, could you try and update the version of @datadog/mobile-react-native to 2.12.2 and see if the issue persists ?

[keith-wedinger-lark]

@cdn34dd I updated the description above to reference 2.12.2 because the issue is present in that version.

[cdn34dd]

@keith-wedinger-lark Could you share a bit more of the code (configuration, imports, and so on) or share a sample app where the issue is happening. I tried reproducing this issue but unfortunately couldn't.

[cdn34dd]

@keith-wedinger-lark I believe the issue may be due to the nativewind package you're using that's conflicting with the interactionTracking in the @datadog/mobile-react-native package. InteractionTracking through the @datadog/mobile-react-native while not currently deprecated, will be in the near future, with the recommended approach being through the usage our babel plugin package: https://www.npmjs.com/package/@datadog/mobile-react-native-babel-plugin

[keith-wedinger-lark]

@cdn34dd I think your explanation makes sense. Should we go ahead and migrate to https://www.npmjs.com/package/@datadog/mobile-react-native-babel-plugin? When we do, should we set trackUserInteractions to false inside DatadogProviderConfiguration?

[cdn34dd]

@keith-wedinger-lark Yes, you should definitely migrate. You should get a better experience that way and you can also customize it through plugin options.

You should still have trackInteractions set to true, as that is still what tells the SDK whether to track them for you or not (independently of using the plugin or not).