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 automatically configured, 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 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 DataWay: Directly receives RUM data without installing the DataKit collector.
    • Local environment deployment: Receives RUM data after meeting the prerequisites.

Installation

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

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

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

npm install @truewatchtech/react-native-mobile

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

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

Additional Configuration for Android Integration:

  • Configure the Gradle Plugin ft-plugin to collect App launch events, network request data, and Android Native-related events (page navigation, click events, Native network requests, WebView data).

  • Also 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 complete FTMobileConfig parameter explanations, please read SDK Initialization.

Detailed Configuration Entries

Advanced Scenarios

Frequently Asked Questions