Skip to content

React Native Application Integration

Collect metrics data from React Native applications to analyze application performance visually.

Reading Path

Prerequisites

Note

If the RUM Headless service has been activated, the prerequisites are already configured automatically, and you can proceed directly with application integration.

Application Integration

Note

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

  1. Navigate to RUM > Create > React Native.
  2. Create two separate applications for React Native Android and React Native iOS to receive RUM data from the Android and iOS platforms respectively.
  3. Enter the corresponding application name and application ID for each platform's application.

  4. Choose the application integration method:

    • Public Network DataWay: Receives RUM data directly without installing the DataKit collector.
    • Local Environment Deployment: Receives RUM data after meeting the prerequisites.

Installation

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

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

In your project directory, run the following command in the terminal:

npm install @cloudcare/react-native-mobile

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

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

Additional Configuration for Android Integration:

  • 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 TrueWatch Android Maven repository address in Gradle. Both the Plugin and AAR require this. For configuration details, refer to the build.gradle in the example.

Initialization Instructions

For a minimal initialization example, please read Quick Start.

For a complete explanation of FTMobileConfig parameters, please read SDK Initialization.

Detailed Configuration Entries

Advanced Scenarios

Frequently Asked Questions