@multiplayer-app/session-recorder-react-native 1.0.1-beta.2 → 1.0.1-beta.3

package/REACT_NATIVE_SETUP.md

@@ -0,0 +1,91 @@
+# React Native Setup Guide
+
+This package provides native session recording capabilities for React Native applications with automatic masking of sensitive UI elements.
+
+## Installation
+
+### For React Native CLI projects:
+
+```bash
+npm install @multiplayer-app/session-recorder-react-native
+```
+
+### For Expo projects:
+
+```bash
+npx expo install @multiplayer-app/session-recorder-react-native
+```
+
+## Platform-specific Setup
+
+### Android
+
+The Android native module is automatically linked. No additional setup required.
+
+### iOS
+
+The iOS native module uses CocoaPods for dependency management. Run:
+
+```bash
+cd ios && pod install
+```
+
+## Usage
+
+```typescript
+import { SessionRecorder } from '@multiplayer-app/session-recorder-react-native'
+
+// Initialize the session recorder
+const sessionRecorder = new SessionRecorder({
+  // Configuration options
+})
+
+// Start recording
+await sessionRecorder.start()
+
+// Stop recording
+await sessionRecorder.stop()
+```
+
+## Native Module Structure
+
+### Android
+
+- `SessionRecorderNativeModule.kt` - Main native module implementation
+- `SessionRecorderNativePackage.kt` - React Native package registration
+- `SessionRecorderNativeConfig.kt` - Configuration class
+- `ViewUtils.kt` - View utility functions
+- `TargetInfo.kt` - Data model for target information
+
+### iOS
+
+- `SessionRecorderNative.swift` - Main native module implementation
+- `GestureTargetFinder.swift` - Gesture target detection utilities
+- `SessionRecorderNative.m` - Objective-C bridge
+- `SessionRecorderNative.podspec` - CocoaPods specification
+
+## Features
+
+- **Screen Capture**: Capture screenshots with automatic masking
+- **Gesture Recording**: Record user interactions (tap, pan, long press, pinch)
+- **Sensitive Content Masking**: Automatically mask text inputs, images, and other sensitive elements
+- **Cross-platform**: Works on both Android and iOS
+- **Expo Compatible**: Supports Expo managed workflow
+
+## Troubleshooting
+
+### Android Build Issues
+
+- Ensure Android SDK is properly configured
+- Check that the package is properly linked in `MainApplication.java`
+
+### iOS Build Issues
+
+- Run `pod install` in the iOS directory
+- Ensure Xcode is properly configured
+- Check that the podspec is correctly configured
+
+### Expo Issues
+
+- Use `npx expo install` instead of `npm install`
+- Ensure you're using a compatible Expo SDK version

package/android/build.gradle

@@ -94,4 +94,7 @@ dependencies {
   //noinspection GradleDynamicVersion
   implementation "com.facebook.react:react-native:+"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
+
+  // TurboModule support
+  implementation "com.facebook.react:react-native-codegen:+"
 }

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.0.1-beta.2";
+export declare const version = "1.0.1-beta.3";

package/dist/version.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.version=void 0;var version=exports.version="1.0.1-beta.2";
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.version=void 0;var version=exports.version="1.0.1-beta.3";

package/ios/GestureTargetFinder.swift

@@ -0,0 +1,50 @@
+import UIKit
+
+struct GestureTargetInfo {
+    let identifier: String
+    let label: String?
+    let role: String?
+    let testId: String?
+    let text: String?
+}
+
+enum GestureTargetFinder {
+    static func findTargetView(at point: CGPoint, in view: UIView) -> GestureTargetInfo {
+        let targetView = view.hitTest(point, with: nil)
+
+        guard let target = targetView else {
+            return GestureTargetInfo(identifier: "unknown", label: nil, role: nil, testId: nil, text: nil)
+        }
+
+        let identifier = target.accessibilityIdentifier ?? target.accessibilityLabel ?? "view-\(target.hash)"
+        let label = target.accessibilityLabel
+        let role = roleFromAccessibilityTraits(target.accessibilityTraits)
+        let testId = target.accessibilityIdentifier
+
+        var text: String?
+        if let labelView = target as? UILabel {
+            text = labelView.text
+        } else if let button = target as? UIButton {
+            text = button.titleLabel?.text
+        } else if let textField = target as? UITextField {
+            text = textField.text ?? textField.placeholder
+        } else if let textView = target as? UITextView {
+            text = textView.text
+        }
+
+        return GestureTargetInfo(identifier: identifier, label: label, role: role, testId: testId, text: text)
+    }
+
+    static func roleFromAccessibilityTraits(_ traits: UIAccessibilityTraits) -> String? {
+        if traits.contains(.button) { return "button" }
+        if traits.contains(.link) { return "link" }
+        if traits.contains(.image) { return "image" }
+        if traits.contains(.staticText) { return "text" }
+        if traits.contains(.header) { return "header" }
+        if traits.contains(.searchField) { return "search" }
+        if traits.contains(.keyboardKey) { return "key" }
+        if traits.contains(.adjustable) { return "adjustable" }
+        if traits.contains(.tabBar) { return "tabbar" }
+        return nil
+    }
+}

package/ios/SessionRecorderNative.swift

@@ -3,7 +3,7 @@ import React
 import WebKit
 
 @objc(SessionRecorderNative)
-class SessionRecorderNative: RCTEventEmitter {
+class SessionRecorderNative: RCTEventEmitter, UIGestureRecognizerDelegate {
 
   // Configuration options
   private var maskTextInputs: Bool = true
@@ -755,6 +755,15 @@ class SessionRecorderNative: RCTEventEmitter {
     self.sendEvent(withName: "onGestureDetected", body: gestureEvent)
     if let cb = gestureCallback { cb([gestureEvent]) }
   }
+
+  // MARK: - UIGestureRecognizerDelegate
+  func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
+    return true
+  }
+
+  func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
+    return true
+  }
 }
 
 private enum MaskingType {

package/ios/SessionRecorderNativeSpec.swift

@@ -0,0 +1,55 @@
+import Foundation
+import React
+
+@objc(SessionRecorderNativeSpec)
+class SessionRecorderNativeSpec: NSObject, RCTBridgeModule {
+
+  static func moduleName() -> String! {
+    return "SessionRecorderNative"
+  }
+
+  static func requiresMainQueueSetup() -> Bool {
+    return true
+  }
+
+  @objc func captureAndMask(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    // Implementation will be provided by the actual module
+    reject("NOT_IMPLEMENTED", "Method not implemented", nil)
+  }
+
+  @objc func captureAndMaskWithOptions(_ options: NSDictionary, resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    // Implementation will be provided by the actual module
+    reject("NOT_IMPLEMENTED", "Method not implemented", nil)
+  }
+
+  @objc func startGestureRecording(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    // Implementation will be provided by the actual module
+    reject("NOT_IMPLEMENTED", "Method not implemented", nil)
+  }
+
+  @objc func stopGestureRecording(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    // Implementation will be provided by the actual module
+    reject("NOT_IMPLEMENTED", "Method not implemented", nil)
+  }
+
+  @objc func isGestureRecordingActive(_ resolve: @escaping RCTPromiseResolveBlock, reject: @escaping RCTPromiseRejectBlock) {
+    // Implementation will be provided by the actual module
+    reject("NOT_IMPLEMENTED", "Method not implemented", nil)
+  }
+
+  @objc func setGestureCallback(_ callback: @escaping RCTResponseSenderBlock) {
+    // Implementation will be provided by the actual module
+  }
+
+  @objc func recordGesture(_ gestureType: String, x: NSNumber, y: NSNumber, target: String?, metadata: NSDictionary?) {
+    // Implementation will be provided by the actual module
+  }
+
+  @objc func addListener(_ eventName: String) {
+    // Required for RN event emitter contracts
+  }
+
+  @objc func removeListeners(_ count: Int) {
+    // Required for RN event emitter contracts
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "1.0.1-beta.2",
+  "version": "1.0.1-beta.3",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -35,7 +35,10 @@
     "otlp",
     "fullstack session recorder",
     "react-native",
-    "expo"
+    "expo",
+    "native-module",
+    "screen-capture",
+    "gesture-recording"
   ],
   "scripts": {
     "clean": "rimraf dist",
@@ -93,5 +96,14 @@
     "expo-constants": {
       "optional": true
     }
+  },
+  "react-native": {
+    "android": {
+      "sourceDir": "./android",
+      "packageImportPath": "import com.multiplayer.sessionrecordernative.SessionRecorderNativePackage;"
+    },
+    "ios": {
+      "project": "./ios/SessionRecorderNative.xcodeproj"
+    }
   }
 }

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        sourceDir: '../android',
+        packageImportPath: 'import com.multiplayer.sessionrecordernative.SessionRecorderNativePackage;'
+      },
+      ios: {
+        project: './ios/SessionRecorderNative.xcodeproj'
+      }
+    }
+  }
+}