Skip to content

Commit 8f01b30

Browse files
committed
Add README.md to babel plugin project & update CONTRIBUTING.md
1 parent 588c663 commit 8f01b30

2 files changed

Lines changed: 62 additions & 0 deletions

File tree

CONTRIBUTING.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ This repository contains 2 main projects:
2323
* `codepush`: an integration for the [react-native-code-push](https://github.com/microsoft/react-native-code-push) library.
2424
* `core`: the core React Native SDK allowing tracking of logs, spans and RUM events.
2525
* `react-native-apollo-client`: an integration for the [Apollo Client](https://www.apollographql.com/docs/react/integrations/react-native/) library.
26+
* `react-native-babel-plugin`: a Babel plugin that enriches React Native components with contextual metadata.
2627
* `react-native-navigation`: an integration for the [react-native-navigation](https://github.com/wix/react-native-navigation) library.
28+
* `react-native-session-replay`: client-side React Native module to enable session replay with Datadog.
2729
* `react-native-webview`: an integration for the [`react-native-webview`](https://github.com/react-native-webview/react-native-webview) library.
2830
* `react-navigation`: an integration for the [react-navigation](https://github.com/react-navigation/react-navigation) library.
2931
* Sample app project (in the `example` folder)
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
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

Comments
 (0)