React Native Application Integration¶

Collect metrics data from React Native applications and visualize application performance for analysis.

Reading Path¶

First-time access: see Quick Start
Full integration: continue reading this document
Parameter details: see SDK Initialization, RUM Configuration, Log Configuration, Trace Configuration
Custom capabilities: see Custom Tags Usage, Custom Data Collection Rules, Data Collection Masking
Advanced scenarios: see the dedicated pages under the "Advanced Scenarios" group
Troubleshooting: see Troubleshooting

Note

If the RUM Headless service is enabled, the prerequisites are automatically configured and you can directly integrate the application.

Note

The current React Native version only supports Android and iOS platforms.

Navigate to RUM > Create Application > React Native;
Create two applications, one for React Native Android and one for React Native iOS, to receive RUM data from Android and iOS platforms respectively;
Enter the corresponding application name and application ID for each platform;
Select the application integration method:
- Public DataWay: directly receive RUM data without installing the DataKit collector.
- Local environment deployment: receive RUM data after meeting the prerequisites.

Source Code: https://github.com/GuanceCloud/datakit-react-native

Demo: https://github.com/GuanceCloud/datakit-react-native/example

In the project root, run the following command in the terminal:

npm install @cloudcare/react-native-mobile

This will add the following dependency to the package.json file:

"dependencies": {
"@cloudcare/react-native-mobile": "[latest_version]",
"..."
}

Additional Android Integration Configuration:

Configure the Gradle Plugin ft-plugin to collect app startup events, network request data, and Android native related events (page navigation, click events, native network requests, WebView data).
You also need to configure the Guance Android Maven repository URL in Gradle, required for both Plugin and AAR. For details, refer to build.gradle in the example.

For a minimal initialization example, see Quick Start.

For the complete FTMobileConfig parameter description, see SDK Initialization.