Hybrid Development with Native and React Native¶

If your project is natively developed, with some pages or business processes implemented using React Native, you can refer to the following solutions for SDK installation and initial configuration.

Installation¶

After the RN SDK installation is successful, there is no need to separately install the Android or iOS SDK on the native side. If already installed, to prevent version conflicts, it is recommended to handle it using the following methods.

Android¶

Add the following dependency settings in the android/app/build.gradle file:

// The version is set by the TrueWatch RN SDK
implementation 'com.cloudcare.ft.mobile.sdk.tracker.agent:ft-sdk'
implementation 'com.cloudcare.ft.mobile.sdk.tracker.agent:ft-native'

You can also view the corresponding native SDK version information via node_modules/@cloudcare/react-native-mobile/android/build.gradle.

iOS¶

In the iOS environment, React Native manages dependencies via cocoapods. For iOS SDK installation, also use cocoapods. Add the following settings in the ios/Podfile file:

# The version is set by the TrueWatch RN SDK
pod 'FTMobileSDK'

You can also view the corresponding native SDK version information via node_modules/@cloudcare/react-native-mobile/FTMobileReactNativeSDK.podspec.

Initialization¶

Please refer to iOS SDK Initialization Configuration and Android SDK Initialization Configuration to perform the initialization configuration within the native project.

React Native Side Configuration¶

Supported from RN SDK 0.3.11

No re-initialization is required on the React Native side. If automatic collection of React Native Error and React Native Action is needed, use the following method:

import { FTRumActionTracking, FTRumErrorTracking } from '@cloudcare/react-native-mobile';

FTRumActionTracking.startTracking();
FTRumErrorTracking.startTracking();

Native Project Configuration¶

Supported from RN SDK 0.3.11

When enabling automatic RUM Resource collection, it is necessary to filter out React Native symbolic call requests and Expo log call requests that only occur in the development environment.

iOS¶

#import <FTMobileReactNativeSDK/FTReactNativeUtils.h>
#import <FTMobileSDK/FTMobileAgent.h>

FTRumConfig *rumConfig = [[FTRumConfig alloc]initWithAppid:rumAppId];
rumConfig.enableTraceUserResource = YES;
#if DEBUG
  rumConfig.resourceUrlHandler = ^BOOL(NSURL * _Nonnull url) {
    return [FTReactNativeUtils filterBlackResource:url];
  };
#endif

import FTMobileReactNativeSDK
import FTMobileSDK

let rumConfig = FTRumConfig(appId: rumAppId)
rumConfig.enableTraceUserResource = true
#if DEBUG
rumConfig.resourceUrlHandler = { (url: URL) -> Bool in
  return FTReactNativeUtils.filterBlackResource(url)
}
#endif

Android¶

import com.ft.sdk.reactnative.utils.ReactNativeUtils;
import com.ft.sdk.FTRUMConfig;

FTRUMConfig rumConfig = new FTRUMConfig().setRumAppId(rumAppId);
rumConfig.setEnableTraceUserResource(true);
if (BuildConfig.DEBUG) {
  rumConfig.setResourceUrlHandler(new FTInTakeUrlHandler() {
    @Override
    public boolean isInTakeUrl(String url) {
      return ReactNativeUtils.isReactNativeDevUrl(url);
    }
  });
}

import com.ft.sdk.reactnative.utils.ReactNativeUtils
import com.ft.sdk.FTRUMConfig

val rumConfig = FTRUMConfig().setRumAppId(rumAppId)
rumConfig.isEnableTraceUserResource = true
if (BuildConfig.DEBUG) {
  rumConfig.setResourceUrlHandler { url ->
    return@setResourceUrlHandler ReactNativeUtils.isReactNativeDevUrl(url)
  }
}

For specific usage examples, you can refer to example.