clintplay-react-native 0.1.0

package/ios/ClintplayRN.mm

@@ -0,0 +1,361 @@
+// Implementation of the Clintplay React Native TurboModule on iOS.
+//
+// Walks the UIKit view hierarchy from the active key window and
+// serializes each UIView into an rrweb-shaped wireframe snapshot with
+// coordinate conversion, background colors, extracted text, and
+// privacy auto-masking (clintplay-mask and secure text inputs).
+//
+// Both `RCT_NEW_ARCH_ENABLED` and legacy architecture paths are supported.
+
+#import "ClintplayRN.h"
+#import <React/RCTBridgeModule.h>
+#import <UIKit/UIKit.h>
+
+static UIWindow *FindKeyWindow(void) {
+  if (@available(iOS 13.0, *)) {
+    for (UIScene *scene in [UIApplication sharedApplication].connectedScenes) {
+      if (scene.activationState == UISceneActivationStateForegroundActive &&
+          [scene isKindOfClass:[UIWindowScene class]]) {
+        UIWindowScene *windowScene = (UIWindowScene *)scene;
+        for (UIWindow *window in windowScene.windows) {
+          if (window.isKeyWindow) {
+            return window;
+          }
+        }
+      }
+    }
+    // Fallback: active foreground window scene first window
+    for (UIScene *scene in [UIApplication sharedApplication].connectedScenes) {
+      if (scene.activationState == UISceneActivationStateForegroundActive &&
+          [scene isKindOfClass:[UIWindowScene class]]) {
+        UIWindowScene *windowScene = (UIWindowScene *)scene;
+        if (windowScene.windows.count > 0) {
+          return windowScene.windows.firstObject;
+        }
+      }
+    }
+    // Fallback: any window scene key window
+    for (UIScene *scene in [UIApplication sharedApplication].connectedScenes) {
+      if ([scene isKindOfClass:[UIWindowScene class]]) {
+        UIWindowScene *windowScene = (UIWindowScene *)scene;
+        for (UIWindow *window in windowScene.windows) {
+          if (window.isKeyWindow) {
+            return window;
+          }
+        }
+      }
+    }
+  }
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdeprecated-declarations"
+  UIWindow *keyWindow = [UIApplication sharedApplication].keyWindow;
+  if (keyWindow) {
+    return keyWindow;
+  }
+  NSArray<UIWindow *> *windows = [UIApplication sharedApplication].windows;
+  if (windows.count > 0) {
+    return windows.firstObject;
+  }
+#pragma clang diagnostic pop
+
+  return nil;
+}
+
+static NSString *HexColorStringFromUIColor(UIColor *color) {
+  if (!color) {
+    return nil;
+  }
+
+  CGFloat red = 0.0;
+  CGFloat green = 0.0;
+  CGFloat blue = 0.0;
+  CGFloat alpha = 0.0;
+
+  @try {
+    if ([color getRed:&red green:&green blue:&blue alpha:&alpha]) {
+      int r = (int)round(fmax(0.0, fmin(1.0, red)) * 255.0);
+      int g = (int)round(fmax(0.0, fmin(1.0, green)) * 255.0);
+      int b = (int)round(fmax(0.0, fmin(1.0, blue)) * 255.0);
+      int a = (int)round(fmax(0.0, fmin(1.0, alpha)) * 255.0);
+      return [NSString stringWithFormat:@"#%02x%02x%02x%02x", r, g, b, a];
+    }
+  } @catch (NSException *e) {
+    // Non-RGB colors (e.g. pattern colors or system dynamic colors) throw if getRed:... is invoked.
+  }
+
+  CGFloat white = 0.0;
+  @try {
+    if ([color getWhite:&white alpha:&alpha]) {
+      int w = (int)round(fmax(0.0, fmin(1.0, white)) * 255.0);
+      int a = (int)round(fmax(0.0, fmin(1.0, alpha)) * 255.0);
+      return [NSString stringWithFormat:@"#%02x%02x%02x%02x", w, w, w, a];
+    }
+  } @catch (NSException *e) {
+    // Fall through safely
+  }
+
+  @try {
+    CGColorRef cgColor = color.CGColor;
+    if (cgColor) {
+      size_t numComponents = CGColorGetNumberOfComponents(cgColor);
+      const CGFloat *components = CGColorGetComponents(cgColor);
+      if (components) {
+        if (numComponents >= 4) {
+          int r = (int)round(fmax(0.0, fmin(1.0, components[0])) * 255.0);
+          int g = (int)round(fmax(0.0, fmin(1.0, components[1])) * 255.0);
+          int b = (int)round(fmax(0.0, fmin(1.0, components[2])) * 255.0);
+          int a = (int)round(fmax(0.0, fmin(1.0, components[3])) * 255.0);
+          return [NSString stringWithFormat:@"#%02x%02x%02x%02x", r, g, b, a];
+        } else if (numComponents >= 2) {
+          int w = (int)round(fmax(0.0, fmin(1.0, components[0])) * 255.0);
+          int a = (int)round(fmax(0.0, fmin(1.0, components[1])) * 255.0);
+          return [NSString stringWithFormat:@"#%02x%02x%02x%02x", w, w, w, a];
+        }
+      }
+    }
+  } @catch (NSException *e) {
+    // Non-convertible CGColor spaces fall through safely
+  }
+
+  return nil;
+}
+
+static NSDictionary *SerializeView(UIView *view, NSInteger *nodeCounter, NSInteger depth) {
+  if (depth > 64) {
+    return nil;
+  }
+
+  if (!view || view.isHidden || view.alpha <= 0.001) {
+    return nil;
+  }
+
+  NSInteger nodeId = (*nodeCounter)++;
+  NSMutableDictionary *nodeDict = [NSMutableDictionary dictionary];
+  nodeDict[@"id"] = @(nodeId);
+  nodeDict[@"type"] = NSStringFromClass([view class]);
+  nodeDict[@"className"] = NSStringFromClass([view class]);
+
+  // Frame in window coordinates
+  CGRect frameInWindow = CGRectZero;
+  @try {
+    frameInWindow = [view convertRect:view.bounds toView:nil];
+  } @catch (NSException *exception) {
+    frameInWindow = view.frame;
+  }
+
+  if (isnan(frameInWindow.origin.x) || isinf(frameInWindow.origin.x)) frameInWindow.origin.x = 0;
+  if (isnan(frameInWindow.origin.y) || isinf(frameInWindow.origin.y)) frameInWindow.origin.y = 0;
+  if (isnan(frameInWindow.size.width) || isinf(frameInWindow.size.width)) frameInWindow.size.width = 0;
+  if (isnan(frameInWindow.size.height) || isinf(frameInWindow.size.height)) frameInWindow.size.height = 0;
+
+  double x = round(frameInWindow.origin.x * 100.0) / 100.0;
+  double y = round(frameInWindow.origin.y * 100.0) / 100.0;
+  double w = round(frameInWindow.size.width * 100.0) / 100.0;
+  double h = round(frameInWindow.size.height * 100.0) / 100.0;
+
+  nodeDict[@"x"] = @(x);
+  nodeDict[@"y"] = @(y);
+  nodeDict[@"width"] = @(w);
+  nodeDict[@"height"] = @(h);
+  nodeDict[@"w"] = @(w);
+  nodeDict[@"h"] = @(h);
+
+  if (view.tag != 0) {
+    nodeDict[@"tag"] = @(view.tag);
+  }
+
+  // Background color
+  NSString *bgHex = HexColorStringFromUIColor(view.backgroundColor);
+  if (bgHex) {
+    nodeDict[@"backgroundColor"] = bgHex;
+    nodeDict[@"bg"] = bgHex;
+  }
+
+  // Privacy Auto-Masking
+  BOOL isMasked = NO;
+  NSString *accId = view.accessibilityIdentifier;
+  NSString *accLabel = view.accessibilityLabel;
+  NSString *nativeId = nil;
+  if ([view respondsToSelector:@selector(nativeID)]) {
+    nativeId = [(id)view nativeID];
+  } else if ([view respondsToSelector:@selector(nativeId)]) {
+    nativeId = [(id)view nativeId];
+  }
+  if ((accId && [accId isEqualToString:@"clintplay-mask"]) ||
+      (nativeId && [nativeId isEqualToString:@"clintplay-mask"]) ||
+      (accLabel && [accLabel isEqualToString:@"clintplay-mask"])) {
+    isMasked = YES;
+  }
+
+  if ([view respondsToSelector:@selector(isSecureTextEntry)]) {
+    @try {
+      if (((id<UITextInputTraits>)view).isSecureTextEntry) {
+        isMasked = YES;
+      }
+    } @catch (NSException *e) {
+      // Ignored
+    }
+  }
+
+  if ([view respondsToSelector:@selector(textContentType)]) {
+    @try {
+      UITextContentType type = ((id<UITextInputTraits>)view).textContentType;
+      if (type != nil) {
+        if ([type isEqualToString:UITextContentTypePassword] ||
+            [type isEqualToString:UITextContentTypeNewPassword] ||
+            [type isEqualToString:UITextContentTypeCreditCardNumber] ||
+            [type isEqualToString:UITextContentTypeOneTimeCode]) {
+          isMasked = YES;
+        }
+      }
+    } @catch (NSException *e) {
+      // Ignored
+    }
+  }
+
+  NSString *identifier = accId ?: nativeId;
+  if (identifier.length > 0) {
+    nodeDict[@"accessibilityIdentifier"] = identifier;
+  }
+  if (view.accessibilityLabel.length > 0) {
+    nodeDict[@"accessibilityLabel"] = isMasked ? @"***" : view.accessibilityLabel;
+  }
+
+  // Text extraction from UILabel, UITextField, UITextView, UIButton
+  NSString *extractedText = nil;
+  if ([view isKindOfClass:[UILabel class]]) {
+    UILabel *label = (UILabel *)view;
+    extractedText = label.text ?: (label.attributedText ? label.attributedText.string : nil);
+  } else if ([view isKindOfClass:[UITextField class]]) {
+    UITextField *textField = (UITextField *)view;
+    extractedText = textField.text ?: (textField.attributedText ? textField.attributedText.string : nil);
+  } else if ([view isKindOfClass:[UITextView class]]) {
+    UITextView *textView = (UITextView *)view;
+    extractedText = textView.text ?: (textView.attributedText ? textView.attributedText.string : nil);
+  } else if ([view isKindOfClass:[UIButton class]]) {
+    UIButton *button = (UIButton *)view;
+    if (@available(iOS 15.0, *)) {
+      if ([button respondsToSelector:@selector(configuration)] && button.configuration != nil) {
+        extractedText = button.configuration.title ?: (button.configuration.attributedTitle ? button.configuration.attributedTitle.string : nil);
+      }
+    }
+    if (!extractedText) {
+      extractedText = [button titleForState:UIControlStateNormal] ?: (button.currentTitle ?: (button.currentAttributedTitle ? button.currentAttributedTitle.string : nil));
+    }
+  }
+
+  if (extractedText) {
+    nodeDict[@"text"] = isMasked ? @"***" : extractedText;
+  }
+
+  if (isMasked) {
+    nodeDict[@"masked"] = @(YES);
+    // Masked node replaces children with a single placeholder rect / no subview traversal
+    nodeDict[@"children"] = @[];
+    return nodeDict;
+  }
+
+  nodeDict[@"masked"] = @(NO);
+
+  // Traverse child subviews wrapped in autoreleasepool to control memory footprint
+  NSMutableArray<NSDictionary *> *childList = [NSMutableArray array];
+  for (UIView *subview in view.subviews) {
+    @autoreleasepool {
+      NSDictionary *childDict = SerializeView(subview, nodeCounter, depth + 1);
+      if (childDict) {
+        [childList addObject:childDict];
+      }
+    }
+  }
+  nodeDict[@"children"] = childList;
+
+  return nodeDict;
+}
+
+@implementation ClintplayRN
+
+RCT_EXPORT_MODULE(ClintplayRN)
+
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getVersion) {
+  return @"0.1.0";
+}
+
+- (NSDictionary *)extractHierarchyDictionaryOnMainThread {
+  @autoreleasepool {
+    UIWindow *window = FindKeyWindow();
+    if (!window) {
+      return nil;
+    }
+
+    NSInteger nodeCounter = 1;
+    NSDictionary *rootNode = SerializeView(window, &nodeCounter, 0);
+    if (!rootNode) {
+      return nil;
+    }
+
+    long long timestampMs = (long long)([[NSDate date] timeIntervalSince1970] * 1000.0);
+    return @{
+      @"version": @(1),
+      @"ts": @(timestampMs),
+      @"timestamp": @(timestampMs),
+      @"nodes": @[ rootNode ]
+    };
+  }
+}
+
+- (NSString *)serializePayloadToJSON:(NSDictionary *)payload {
+  if (!payload) {
+    return @"{\"version\":1,\"nodes\":[]}";
+  }
+
+  @try {
+    if (![NSJSONSerialization isValidJSONObject:payload]) {
+      return @"{\"version\":1,\"nodes\":[]}";
+    }
+    NSError *error = nil;
+    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:payload options:0 error:&error];
+    if (error || !jsonData) {
+      return @"{\"version\":1,\"nodes\":[]}";
+    }
+    NSString *jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
+    return jsonString ?: @"{\"version\":1,\"nodes\":[]}";
+  } @catch (NSException *exception) {
+    return @"{\"version\":1,\"nodes\":[]}";
+  }
+}
+
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(captureViewHierarchy) {
+  if ([NSThread isMainThread]) {
+    NSDictionary *payload = [self extractHierarchyDictionaryOnMainThread];
+    return [self serializePayloadToJSON:payload];
+  }
+
+  __block NSDictionary *dict = nil;
+  dispatch_semaphore_t sema = dispatch_semaphore_create(0);
+
+  dispatch_async(dispatch_get_main_queue(), ^{
+    @autoreleasepool {
+      dict = [self extractHierarchyDictionaryOnMainThread];
+    }
+    dispatch_semaphore_signal(sema);
+  });
+
+  dispatch_time_t timeout = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(250 * NSEC_PER_MSEC));
+  long timedOut = dispatch_semaphore_wait(sema, timeout);
+  if (timedOut != 0) {
+    // 250ms timeout expired waiting for main thread: return fallback empty hierarchy
+    return @"{\"version\":1,\"nodes\":[]}";
+  }
+
+  return [self serializePayloadToJSON:dict];
+}
+
+#ifdef RCT_NEW_ARCH_ENABLED
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params {
+  return std::make_shared<facebook::react::NativeClintplayRNSpecJSI>(params);
+}
+#endif
+
+@end

package/ios/PrivacyInfo.xcprivacy

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>NSPrivacyTracking</key>
+	<false/>
+	<key>NSPrivacyTrackingDomains</key>
+	<array/>
+	<key>NSPrivacyCollectedDataTypes</key>
+	<array>
+		<dict>
+			<key>NSPrivacyCollectedDataType</key>
+			<string>NSPrivacyCollectedDataTypeProductInteraction</string>
+			<key>NSPrivacyCollectedDataTypeLinked</key>
+			<false/>
+			<key>NSPrivacyCollectedDataTypeTracking</key>
+			<false/>
+			<key>NSPrivacyCollectedDataTypePurposes</key>
+			<array>
+				<string>NSPrivacyCollectedDataTypePurposeAnalytics</string>
+				<string>NSPrivacyCollectedDataTypePurposeAppFunctionality</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyCollectedDataType</key>
+			<string>NSPrivacyCollectedDataTypePerformanceData</string>
+			<key>NSPrivacyCollectedDataTypeLinked</key>
+			<false/>
+			<key>NSPrivacyCollectedDataTypeTracking</key>
+			<false/>
+			<key>NSPrivacyCollectedDataTypePurposes</key>
+			<array>
+				<string>NSPrivacyCollectedDataTypePurposeAppFunctionality</string>
+			</array>
+		</dict>
+		<dict>
+			<key>NSPrivacyCollectedDataType</key>
+			<string>NSPrivacyCollectedDataTypeOtherDiagnosticData</string>
+			<key>NSPrivacyCollectedDataTypeLinked</key>
+			<false/>
+			<key>NSPrivacyCollectedDataTypeTracking</key>
+			<false/>
+			<key>NSPrivacyCollectedDataTypePurposes</key>
+			<array>
+				<string>NSPrivacyCollectedDataTypePurposeAppFunctionality</string>
+			</array>
+		</dict>
+	</array>
+	<key>NSPrivacyAccessedAPITypes</key>
+	<array/>
+</dict>
+</plist>

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "clintplay-react-native",
+  "version": "0.1.0",
+  "description": "Clintplay React Native SDK — session capture for iOS and Android apps. Companion to clintplay-sdk (web).",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "app.plugin.js",
+    "ios",
+    "android",
+    "src/spec",
+    "clintplay-react-native.podspec",
+    "react-native.config.js"
+  ],
+  "codegenConfig": {
+    "name": "ClintplayRNSpec",
+    "type": "modules",
+    "jsSrcsDir": "src/spec",
+    "android": {
+      "javaPackageName": "digital.clint.clintplay"
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/clintdigital/clintplay",
+    "directory": "packages/sdk-react-native"
+  },
+  "author": "ThreadCode",
+  "homepage": "https://github.com/clintdigital/clintplay#readme",
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "session-replay",
+    "react-native",
+    "expo",
+    "monitoring",
+    "clintplay"
+  ],
+  "license": "MIT",
+  "packageManager": "pnpm@10.30.0",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.74"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0",
+    "react-native": "^0.81.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.3"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,22 @@
+// React Native autolink config. RN's CLI reads this file when the
+// consumer app runs `pod install` (iOS) or builds the Android side,
+// and wires our `.podspec` / `android/build.gradle` into the host
+// project without any manual `link` step.
+//
+// `dependency.platforms.ios.podspecPath` is omitted because RN's
+// autolink finds the `.podspec` by name at the package root — we
+// just need to confirm the iOS dependency is enabled. On Android,
+// `packageImportPath` is what gets dropped into MainApplication.kt
+// so it can register `ClintplayRNPackage()`.
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: {},
+      android: {
+        packageImportPath:
+          'import digital.clint.clintplay.ClintplayRNPackage;',
+        packageInstance: 'new ClintplayRNPackage()',
+      },
+    },
+  },
+};

package/src/spec/NativeClintplayRN.ts

@@ -0,0 +1,25 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+// TurboModule contract. RN codegen reads this file at build time to
+// emit the C++ glue that bridges to the iOS / Android implementations
+// in `ios/` and `android/`. Method signatures here MUST match the
+// native impls exactly — any drift causes a runtime "method not found"
+// when the consumer invokes them.
+//
+// MVP surface:
+//   - getVersion(): native side reports its package version so the JS
+//     layer can detect a version mismatch.
+//   - captureViewHierarchy(): returns a JSON-stringified rrweb-shaped
+//     wireframe of the current view tree. Stubbed in PR 1 (returns
+//     "") and implemented in a follow-up that adds the real iOS UIView
+//     / Android View traversal.
+export interface Spec extends TurboModule {
+  getVersion(): string;
+  captureViewHierarchy(): string;
+}
+
+// `getEnforcing` throws if the module isn't autolinked. The graceful
+// runtime fallback lives in `src/native.ts` — that's what the SDK
+// internals call. This default export exists so codegen can find it.
+export default TurboModuleRegistry.getEnforcing<Spec>('ClintplayRN');