|
| 1 | +# Babel Plugin for React Native |
| 2 | + |
| 3 | +The `@datadog/mobile-react-native-babel-plugin` enhances the Datadog React Native SDK by automatically enriching React components with contextual metadata. It helps improve the accuracy of features such as RUM event correlation, Session Replay, and UI tracking. |
| 4 | + |
| 5 | +## Setup |
| 6 | + |
| 7 | +**Note**: Make sure you’ve already integrated the [Datadog React Native SDK][1]. |
| 8 | + |
| 9 | +To install with NPM, run: |
| 10 | + |
| 11 | +```sh |
| 12 | +npm install @datadog/mobile-react-native-babel-plugin |
| 13 | +``` |
| 14 | + |
| 15 | +To install with Yarn, run: |
| 16 | + |
| 17 | +```sh |
| 18 | +npm install @datadog/mobile-react-native-babel-plugin |
| 19 | +``` |
| 20 | + |
| 21 | +## Configure Babel |
| 22 | + |
| 23 | +Add the plugin to your Babel configuration. Depending on your setup, you might be using a `babel.config.js`, `.babelrc`, or similar. |
| 24 | + |
| 25 | +Example configuration: |
| 26 | + |
| 27 | +```js |
| 28 | +module.exports = { |
| 29 | + presets: ['module:metro-react-native-babel-preset'], |
| 30 | + plugins: ['@datadog/mobile-react-native-babel-plugin'] // <-- Add here |
| 31 | +}; |
| 32 | +``` |
| 33 | +For more recent React Native versions this should be all that is needed. However, if you're on an older version and using Typescript in your project, you may need to install the preset `@babel/preset-typescript`. |
| 34 | + |
| 35 | + |
| 36 | +To install with NPM, run: |
| 37 | + |
| 38 | +```sh |
| 39 | +npm install @babel/preset-typescript |
| 40 | +``` |
| 41 | + |
| 42 | +To install with Yarn, run: |
| 43 | + |
| 44 | +```sh |
| 45 | +yarn add @babel/preset-typescript |
| 46 | +``` |
| 47 | + |
| 48 | +Then update your Babel configuration file like using the following example: |
| 49 | + |
| 50 | +```js |
| 51 | +module.exports = { |
| 52 | + presets: [ |
| 53 | + 'module:metro-react-native-babel-preset', |
| 54 | + '@babel/preset-typescript' // <-- Add here |
| 55 | + ], |
| 56 | + plugins: ['@datadog/mobile-react-native-babel-plugin'] |
| 57 | +}; |
| 58 | +``` |
| 59 | + |
| 60 | +[1]: https://www.npmjs.com/package/@datadog/mobile-react-native |
0 commit comments