@datadog/mobile-react-native-session-replay 2.6.1 → 2.6.3

package/ios/Sources/DdSessionReplay.mm

@@ -38,12 +38,12 @@ RCT_REMAP_METHOD(enable, withEnableReplaySampleRate:(double)replaySampleRate
 
 RCT_EXPORT_METHOD(startRecording:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject)
 {
-    [self startRecordingWithResolver:resolve reject:reject];
+    [self startRecording:resolve reject:reject];
 }
 
 RCT_EXPORT_METHOD(stopRecording:(RCTPromiseResolveBlock)resolve withRejecter:(RCTPromiseRejectBlock)reject)
 {
-    [self stopRecordingWithResolver:resolve reject:reject];
+    [self stopRecording:resolve reject:reject];
 }
 
 // Thanks to this guard, we won't compile this code when we build for the old architecture.
@@ -85,11 +85,11 @@ RCT_EXPORT_METHOD(stopRecording:(RCTPromiseResolveBlock)resolve withRejecter:(RC
                                                             reject:reject];
 }
 
-- (void)startRecordingWithResolver:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
+- (void)startRecording:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
     [self.ddSessionReplayImplementation startRecordingWithResolve:resolve reject:reject];
 }
 
-- (void)stopRecordingWithResolver:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
+- (void)stopRecording:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {
     [self.ddSessionReplayImplementation stopRecordingWithResolve:resolve reject:reject];
 }
 

package/ios/Sources/DdSessionReplayImplementation.swift

@@ -15,17 +15,24 @@ public class DdSessionReplayImplementation: NSObject {
     private lazy var sessionReplay: SessionReplayProtocol = sessionReplayProvider()
     private let sessionReplayProvider: () -> SessionReplayProtocol
     private let uiManager: RCTUIManager
+    private let fabricWrapper: RCTFabricWrapper
     
-    internal init(sessionReplayProvider: @escaping () -> SessionReplayProtocol, uiManager: RCTUIManager) {
+    internal init(
+        sessionReplayProvider: @escaping () -> SessionReplayProtocol,
+        uiManager: RCTUIManager,
+        fabricWrapper: RCTFabricWrapper
+    ) {
         self.sessionReplayProvider = sessionReplayProvider
         self.uiManager = uiManager
+        self.fabricWrapper = fabricWrapper
     }
 
     @objc
     public convenience init(bridge: RCTBridge) {
         self.init(
             sessionReplayProvider: { NativeSessionReplay() },
-            uiManager: bridge.uiManager
+            uiManager: bridge.uiManager,
+            fabricWrapper: RCTFabricWrapper()
         )
     }
 
@@ -44,6 +51,7 @@ public class DdSessionReplayImplementation: NSObject {
         if (customEndpoint != "") {
             customEndpointURL = URL(string: "\(customEndpoint)/api/v2/replay" as String)
         }
+
         var sessionReplayConfiguration = SessionReplay.Configuration(
             replaySampleRate: Float(replaySampleRate),
             textAndInputPrivacyLevel: convertTextAndInputPrivacy(textAndInputPrivacyLevel),
@@ -53,7 +61,9 @@ public class DdSessionReplayImplementation: NSObject {
             customEndpoint: customEndpointURL
         )
                     
-        sessionReplayConfiguration.setAdditionalNodeRecorders([RCTTextViewRecorder(uiManager: self.uiManager)])
+        sessionReplayConfiguration.setAdditionalNodeRecorders([
+            RCTTextViewRecorder(uiManager: uiManager, fabricWrapper: fabricWrapper)
+        ])
 
         if let core = DatadogSDKWrapper.shared.getCoreInstance() {
             sessionReplay.enable(

package/ios/Sources/RCTFabricWrapper.h

@@ -0,0 +1,13 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+#import <Foundation/Foundation.h>
+#import "RCTTextPropertiesWrapper.h"
+
+@interface RCTFabricWrapper : NSObject
+
+- (nullable RCTTextPropertiesWrapper*)tryToExtractTextPropertiesFromView:(UIView* _Nonnull)view;
+
+@end

package/ios/Sources/RCTFabricWrapper.mm

@@ -0,0 +1,120 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+#import "RCTFabricWrapper.h"
+
+#if RCT_NEW_ARCH_ENABLED
+#import "RCTVersion.h"
+
+#import <React-RCTFabric/React/RCTParagraphComponentView.h>
+#import <React-RCTFabric/React/RCTConversions.h>
+
+#if RCT_VERSION_MINOR > 74
+#import <React-FabricComponents/react/renderer/components/text/ParagraphProps.h>
+#else
+#import <React-Fabric/react/renderer/components/text/ParagraphProps.h>
+#endif
+
+
+namespace rct = facebook::react;
+#endif
+
+@implementation RCTFabricWrapper
+/**
+ * Extracts the text properties from the given UIView when the view is of type RCTParagraphComponentView, returns nil otherwise.
+ */
+- (nullable RCTTextPropertiesWrapper*)tryToExtractTextPropertiesFromView:(UIView *)view {
+    #if RCT_NEW_ARCH_ENABLED
+    if (![view isKindOfClass:[RCTParagraphComponentView class]]) {
+        return nil;
+    }
+
+    // Cast view to RCTParagraphComponentView
+    RCTParagraphComponentView* paragraphComponentView = (RCTParagraphComponentView *)view;
+    if (paragraphComponentView == nil) {
+        return nil;
+    }
+
+    // Retrieve ParagraphProps from shared pointer
+    const rct::ParagraphProps* props = (rct::ParagraphProps*)paragraphComponentView.props.get();
+    if (props == nil) {
+        return nil;
+    }
+
+    // Extract Attributes
+    RCTTextPropertiesWrapper* textPropertiesWrapper = [[RCTTextPropertiesWrapper alloc] init];
+    textPropertiesWrapper.text = [RCTFabricWrapper getTextFromView:paragraphComponentView];
+    textPropertiesWrapper.contentRect = paragraphComponentView.bounds;
+
+    rct::TextAttributes textAttributes = props->textAttributes;
+    textPropertiesWrapper.alignment = [RCTFabricWrapper getAlignmentFromAttributes:textAttributes];
+    textPropertiesWrapper.foregroundColor = [RCTFabricWrapper getForegroundColorFromAttributes:textAttributes];
+    textPropertiesWrapper.fontSize = [RCTFabricWrapper getFontSizeFromAttributes:textAttributes];
+
+    return textPropertiesWrapper;
+    #else
+    return nil;
+    #endif
+}
+
+#if RCT_NEW_ARCH_ENABLED
++ (NSString* _Nonnull)getTextFromView:(RCTParagraphComponentView*)view {
+    if (view == nil || view.attributedText == nil) {
+        return RCTTextPropertiesDefaultText;
+    }
+
+    return view.attributedText.string;
+}
+
++ (NSTextAlignment)getAlignmentFromAttributes:(rct::TextAttributes)textAttributes {
+    const rct::TextAlignment alignment = textAttributes.alignment.has_value() ?
+        textAttributes.alignment.value() :
+        rct::TextAlignment::Natural;
+
+    switch (alignment) {
+        case rct::TextAlignment::Natural:
+            return NSTextAlignmentNatural;
+
+        case rct::TextAlignment::Left:
+            return NSTextAlignmentLeft;
+
+        case rct::TextAlignment::Center:
+            return NSTextAlignmentCenter;
+
+        case rct::TextAlignment::Right:
+            return NSTextAlignmentRight;
+
+        case rct::TextAlignment::Justified:
+            return NSTextAlignmentJustified;
+
+        default:
+            return RCTTextPropertiesDefaultAlignment;
+    }
+}
+
++ (UIColor* _Nonnull)getForegroundColorFromAttributes:(rct::TextAttributes)textAttributes {
+    @try {
+#if RCT_VERSION_MINOR > 73
+        rct::Color color = *textAttributes.foregroundColor;
+        UIColor* uiColor = (__bridge UIColor*)color.getUIColor().get();
+        if (uiColor != nil) {
+            return uiColor;
+        }
+#else
+        return RCTUIColorFromSharedColor(textAttributes.foregroundColor);
+#endif
+    } @catch (NSException *exception) {}
+
+    return RCTTextPropertiesDefaultForegroundColor;
+}
+
++ (CGFloat)getFontSizeFromAttributes:(rct::TextAttributes)textAttributes {
+    // Float is just an alias for CGFloat, but this could change in the future.
+    _Static_assert(sizeof(rct::Float) == sizeof(CGFloat), "Float and CGFloat are expected to have the same size.");
+    return isnan(textAttributes.fontSize) ? RCTTextPropertiesDefaultFontSize : (CGFloat)textAttributes.fontSize;
+}
+#endif
+@end

package/ios/Sources/RCTTextPropertiesWrapper.h

@@ -0,0 +1,23 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+@interface RCTTextPropertiesWrapper : NSObject
+
+extern NSString* const RCTTextPropertiesDefaultText;
+extern NSTextAlignment const RCTTextPropertiesDefaultAlignment;
+extern UIColor* const RCTTextPropertiesDefaultForegroundColor;
+extern CGFloat const RCTTextPropertiesDefaultFontSize;
+extern CGRect const RCTTextPropertiesDefaultContentRect;
+
+@property (nonatomic, strong, nonnull) NSString* text;
+@property (nonatomic, assign) NSTextAlignment alignment;
+@property (nonatomic, strong, nonnull) UIColor* foregroundColor;
+@property (nonatomic, assign) CGFloat fontSize;
+@property (nonatomic, assign) CGRect contentRect;
+
+- (instancetype _Nonnull) init;
+
+@end

package/ios/Sources/RCTTextPropertiesWrapper.mm

@@ -0,0 +1,28 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+#import "RCTTextPropertiesWrapper.h"
+
+@implementation RCTTextPropertiesWrapper
+
+NSString* const RCTTextPropertiesDefaultText = @"";
+NSTextAlignment const RCTTextPropertiesDefaultAlignment = NSTextAlignmentNatural;
+UIColor* const RCTTextPropertiesDefaultForegroundColor = [UIColor blackColor];
+CGFloat const RCTTextPropertiesDefaultFontSize = 14.0;
+CGRect const RCTTextPropertiesDefaultContentRect = CGRectZero;
+
+- (instancetype)init {
+    self = [super init];
+    if (self) {
+        _text = RCTTextPropertiesDefaultText;
+        _alignment = RCTTextPropertiesDefaultAlignment;
+        _foregroundColor = RCTTextPropertiesDefaultForegroundColor;
+        _fontSize = RCTTextPropertiesDefaultFontSize;
+        _contentRect = RCTTextPropertiesDefaultContentRect;
+    }
+    return self;
+}
+
+@end

package/ios/Sources/RCTTextViewRecorder.swift

@@ -17,27 +17,11 @@ internal class RCTTextViewRecorder: SessionReplayNodeRecorder {
     internal var identifier = UUID()
 
     internal let uiManager: RCTUIManager
+    internal let fabricWrapper: RCTFabricWrapper
 
-    internal init(uiManager: RCTUIManager) {
+    internal init(uiManager: RCTUIManager, fabricWrapper: RCTFabricWrapper) {
         self.uiManager = uiManager
-    }
-
-    internal func extractTextFromSubViews(
-        subviews: [RCTShadowView]?
-    ) -> String? {
-        if let subviews = subviews {
-            return subviews.compactMap { subview in
-                if let sub = subview as? RCTRawTextShadowView {
-                    return sub.text
-                }
-                if let sub = subview as? RCTVirtualTextShadowView {
-                    // We recursively get all subviews for nested Text components
-                    return extractTextFromSubViews(subviews: sub.reactSubviews())
-                }
-                return nil
-            }.joined()
-        }
-        return nil
+        self.fabricWrapper = fabricWrapper
     }
 
     public func semantics(
@@ -45,6 +29,48 @@ internal class RCTTextViewRecorder: SessionReplayNodeRecorder {
         with attributes: SessionReplayViewAttributes,
         in context: SessionReplayViewTreeRecordingContext
     ) -> SessionReplayNodeSemantics? {
+        guard
+            let textProperties = fabricWrapper.tryToExtractTextProperties(from: view) ?? tryToExtractTextProperties(view: view)
+        else {
+            return view is RCTTextView ? SessionReplayInvisibleElement.constant : nil
+        }
+
+        let builder = RCTTextViewWireframesBuilder(
+            wireframeID: context.ids.nodeID(view: view, nodeRecorder: self),
+            attributes: attributes,
+            text: textProperties.text,
+            textAlignment: textProperties.alignment,
+            textColor: textProperties.foregroundColor,
+            textObfuscator: textObfuscator(context),
+            fontSize: textProperties.fontSize,
+            contentRect: textProperties.contentRect
+        )
+
+        return SessionReplaySpecificElement(subtreeStrategy: .ignore, nodes: [
+            SessionReplayNode(viewAttributes: attributes, wireframesBuilder: builder)
+        ])
+    }
+
+    internal func tryToExtractTextFromSubViews(
+        subviews: [RCTShadowView]?
+    ) -> String? {
+        guard let subviews = subviews else {
+            return nil
+        }
+
+        return subviews.compactMap { subview in
+            if let sub = subview as? RCTRawTextShadowView {
+                return sub.text
+            }
+            if let sub = subview as? RCTVirtualTextShadowView {
+                // We recursively get all subviews for nested Text components
+                return tryToExtractTextFromSubViews(subviews: sub.reactSubviews())
+            }
+            return nil
+        }.joined()
+    }
+
+    private func tryToExtractTextProperties(view: UIView) -> RCTTextPropertiesWrapper? {
         guard let textView = view as? RCTTextView else {
             return nil
         }
@@ -56,41 +82,35 @@ internal class RCTTextViewRecorder: SessionReplayNodeRecorder {
             shadowView = uiManager.shadowView(forReactTag: tag) as? RCTTextShadowView
         }
 
-        if let shadow = shadowView {
-            // TODO: RUM-2173 check performance is ok
-            let text = extractTextFromSubViews(
-                subviews: shadow.reactSubviews()
-            )
+        guard let shadow = shadowView else {
+            return nil
+        }
 
-            let builder = RCTTextViewWireframesBuilder(
-                wireframeID: context.ids.nodeID(view: textView, nodeRecorder: self),
-                attributes: attributes,
-                text: text,
-                textAlignment: shadow.textAttributes.alignment,
-                textColor: shadow.textAttributes.foregroundColor?.cgColor,
-                textObfuscator: textObfuscator(context),
-                fontSize: shadow.textAttributes.fontSize,
-                contentRect: shadow.contentFrame
-            )
-            let node = SessionReplayNode(viewAttributes: attributes, wireframesBuilder: builder)
-            return SessionReplaySpecificElement(subtreeStrategy: .ignore, nodes: [node])
+        let textProperties = RCTTextPropertiesWrapper()
+
+        // TODO: RUM-2173 check performance is ok
+        if let text = tryToExtractTextFromSubViews(subviews: shadow.reactSubviews()) {
+            textProperties.text = text
         }
-        return SessionReplayInvisibleElement.constant
-    }
-}
 
-// Black color. This is the default for RN: https://github.com/facebook/react-native/blob/a5ee029cd02a636136058d82919480eeeb700067/packages/react-native/Libraries/Text/RCTTextAttributes.mm#L250
-let DEFAULT_COLOR = UIColor.black.cgColor
+        if let foregroundColor = shadow.textAttributes.foregroundColor {
+            textProperties.foregroundColor = foregroundColor
+        }
 
-// Default font size for RN: https://github.com/facebook/react-native/blob/16dff523b0a16d7fa9b651062c386885c2f48a6b/packages/react-native/React/Views/RCTFont.mm#L396
-let DEFAULT_FONT_SIZE = CGFloat(14)
+        textProperties.alignment = shadow.textAttributes.alignment
+        textProperties.fontSize = shadow.textAttributes.fontSize
+        textProperties.contentRect = shadow.contentFrame
+
+        return textProperties
+    }
+}
 
 internal struct RCTTextViewWireframesBuilder: SessionReplayNodeWireframesBuilder {
     let wireframeID: WireframeID
     let attributes: SessionReplayViewAttributes
-    let text: String?
+    let text: String
     var textAlignment: NSTextAlignment
-    let textColor: CGColor?
+    let textColor: UIColor
     let textObfuscator: SessionReplayTextObfuscating
     let fontSize: CGFloat
     let contentRect: CGRect
@@ -140,12 +160,12 @@ internal struct RCTTextViewWireframesBuilder: SessionReplayNodeWireframesBuilder
                 id: wireframeID,
                 frame: relativeIntersectedRect,
                 clip: attributes.clip,
-                text: textObfuscator.mask(text: text ?? ""),
+                text: textObfuscator.mask(text: text),
                 textFrame: textFrame,
-                // Text alignment is top for all RCTTextView components.
+                // Text alignment is top for all RCTTextView and RCTParagraphComponentView components.
                 textAlignment: .init(systemTextAlignment: textAlignment, vertical: .top),
-                textColor: textColor ?? DEFAULT_COLOR,
-                fontOverride: SessionReplayWireframesBuilder.FontOverride(size: fontSize.isNaN ? DEFAULT_FONT_SIZE : fontSize),
+                textColor: textColor.cgColor,
+                fontOverride: SessionReplayWireframesBuilder.FontOverride(size: fontSize.isNaN ? RCTTextPropertiesDefaultFontSize : fontSize),
                 borderColor: attributes.layerBorderColor,
                 borderWidth: attributes.layerBorderWidth,
                 backgroundColor: attributes.backgroundColor,

package/ios/Sources/RCTVersion.h

@@ -0,0 +1,8 @@
+#ifndef RCTVersion_h
+#define RCTVersion_h
+
+#define RCT_VERSION_MAJOR 0
+#define RCT_VERSION_MINOR 73
+#define RCT_VERSION_PATCH 9
+
+#endif /* RCTVersion_h */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datadog/mobile-react-native-session-replay",
-    "version": "2.6.1",
+    "version": "2.6.3",
     "description": "A client-side React Native module to enable session replay with Datadog",
     "keywords": [
         "datadog",
@@ -19,6 +19,7 @@
     "files": [
         "src/**",
         "lib/**",
+        "scripts/**",
         "android/build.gradle",
         "android/detekt.yml",
         "android/gradle.properties",
@@ -40,7 +41,8 @@
     "scripts": {
         "test": "jest",
         "lint": "eslint .",
-        "prepare": "rm -rf lib && yarn bob build"
+        "prepare": "rm -rf lib && yarn bob build",
+        "postinstall": "node scripts/set-ios-rn-version.js"
     },
     "peerDependencies": {
         "react": ">=16.13.1",
@@ -88,5 +90,5 @@
             "javaPackageName": "com.datadog.reactnative.sessionreplay"
         }
     },
-    "gitHead": "4ef34c61e03e30d00bb86f7cd3fa255fdc6eed41"
+    "gitHead": "1870ee0f82b7773c107dce3b16766526401e7a56"
 }

package/scripts/set-ios-rn-version.js

@@ -0,0 +1,47 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+
+function getReactNativeVersion() {
+    try {
+        // eslint-disable-next-line global-require
+        return require('react-native/package.json').version;
+    } catch (error) {
+        throw new Error(
+            'Failed to find React Native. Ensure it is installed in your project.'
+        );
+    }
+}
+
+const rnVersion = getReactNativeVersion();
+
+const outputDir = path.resolve(__dirname, '../ios/Sources');
+const outputFile = path.join(outputDir, 'RCTVersion.h');
+
+if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+}
+
+const [major, minor, patch] = rnVersion.split('.').map(Number);
+
+const headerContent = `#ifndef RCTVersion_h
+#define RCTVersion_h
+
+#define RCT_VERSION_MAJOR ${major || 0}
+#define RCT_VERSION_MINOR ${minor || 0}
+#define RCT_VERSION_PATCH ${patch || 0}
+
+#endif /* RCTVersion_h */
+`;
+
+try {
+    fs.writeFileSync(outputFile, headerContent, 'utf8');
+} catch (error) {
+    console.error(`Failed to write RCTVersion.h: ${error.message}`);
+    process.exit(1);
+}

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/NoopTextPropertiesResolver.kt

@@ -1,22 +0,0 @@
-/*
- *
- *  * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
- *  * This product includes software developed at Datadog (https://www.datadoghq.com/).
- *  * Copyright 2016-Present Datadog, Inc.
- *
- */
-
-package com.datadog.reactnative.sessionreplay
-
-import android.widget.TextView
-import com.datadog.android.sessionreplay.model.MobileSegment
-
-internal class NoopTextPropertiesResolver: TextPropertiesResolver {
-    override fun addReactNativeProperties(
-        originalWireframe: MobileSegment.Wireframe.TextWireframe,
-        view: TextView,
-        pixelDensity: Float
-    ): MobileSegment.Wireframe.TextWireframe {
-        return originalWireframe
-    }
-}

package/android/src/main/kotlin/com/datadog/reactnative/sessionreplay/utils/TextViewUtils.kt

@@ -1,40 +0,0 @@
-/*
- *
- *  * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
- *  * This product includes software developed at Datadog (https://www.datadoghq.com/).
- *  * Copyright 2016-Present Datadog, Inc.
- *
- */
-
-package com.datadog.reactnative.sessionreplay.utils
-
-import android.widget.TextView
-import com.datadog.android.sessionreplay.model.MobileSegment
-import com.datadog.android.sessionreplay.recorder.MappingContext
-import com.datadog.reactnative.sessionreplay.TextPropertiesResolver
-
-internal class TextViewUtils {
-    internal fun mapTextViewToWireframes(
-        wireframes: List<MobileSegment.Wireframe>,
-        view: TextView,
-        mappingContext: MappingContext,
-        reactTextPropertiesResolver: TextPropertiesResolver
-    ): List<MobileSegment.Wireframe> {
-        val result = mutableListOf<MobileSegment.Wireframe>()
-        val pixelDensity = mappingContext.systemInformation.screenDensity
-
-        for (originalWireframe in wireframes) {
-            if (originalWireframe !is MobileSegment.Wireframe.TextWireframe) {
-                result.add(originalWireframe)
-            } else {
-                result.add(reactTextPropertiesResolver.addReactNativeProperties(
-                    originalWireframe = originalWireframe,
-                    view = view,
-                    pixelDensity = pixelDensity,
-                ))
-            }
-        }
-
-        return result
-    }
-}