@multiplayer-app/session-recorder-react-native 1.0.1-beta.10 → 1.0.1-beta.12

package/README.md

@@ -55,6 +55,65 @@ npx expo install @react-native-async-storage/async-storage @react-native-communi
 
 If you use Expo Router or a managed workflow, no extra autolinking steps are required beyond installing the packages.
 
+### Expo Autolinking Support
+
+This package includes full Expo autolinking support with the following configuration files:
+
+- ✅ `expo-module.config.json` - Defines supported platforms and module names
+- ✅ `react-native.config.js` - Configures React Native CLI autolinking
+- ✅ Proper TurboModule registration for both iOS and Android
+
+The module will be automatically detected and linked when you install it in your Expo project.
+
+#### Expo Go vs Development Builds
+
+**Important**: This package uses native modules that require custom native code. While autolinking is configured, you may encounter issues with **Expo Go** due to its limitations with custom native modules.
+
+**If autolinking doesn't work with Expo Go**, try using development builds instead:
+
+```bash
+# For iOS
+npx expo run:ios
+
+# For Android
+npx expo run:android
+```
+
+Development builds include your custom native modules and provide the full native functionality needed for session recording.
+
+#### Troubleshooting Expo Autolinking
+
+If you encounter issues with module autolinking in Expo:
+
+1. **Check Expo SDK compatibility**: Ensure you're using a compatible Expo SDK version
+2. **Clear cache**: Run `npx expo start -c` to clear the Expo cache
+3. **Use development builds**: Switch from Expo Go to development builds as shown above
+4. **Verify configuration**: Ensure the autolinking configuration files are present in your `node_modules/@multiplayer-app/session-recorder-react-native/` directory
+
+#### Expo Configuration
+
+For Expo applications, the package automatically detects the Expo environment:
+
+```javascript
+import SessionRecorder from '@multiplayer-app/session-recorder-react-native';
+
+SessionRecorder.init({
+  application: 'my-expo-app',
+  version: '1.0.0',
+  environment: 'production',
+  apiKey: 'YOUR_MULTIPLAYER_API_KEY',
+  recordGestures: true,
+  recordNavigation: true,
+  recordScreen: true,
+});
+```
+
+The package will automatically:
+
+- Detect Expo environment using `expo-constants`
+- Add Expo-specific attributes to traces
+- Optimize performance for Expo runtime
+
 #### Why direct install is required
 
 - Autolinking scans only the app's `package.json`
@@ -809,7 +868,27 @@ SessionRecorder.init(config);
 - Ensure `expo-constants` is installed: `npx expo install expo-constants`
 - Check that you're using the correct Expo SDK version
 
-#### 6. Build Issues
+#### 6. TurboModule Not Found (Expo Go)
+
+If you see this error in Expo Go:
+
+```
+TurboModuleRegistry.getEnforcing(...): 'SessionRecorderNative' could not be found
+```
+
+**Solution**: Switch to development builds instead of Expo Go:
+
+```bash
+# For iOS
+npx expo run:ios
+
+# For Android
+npx expo run:android
+```
+
+Expo Go has limitations with custom native modules. Development builds include your custom native code and will resolve this issue.
+
+#### 7. Build Issues
 
 - **iOS**: Run `cd ios && pod install` after installing dependencies
 - **Android**: Run `cd android && ./gradlew clean`

package/android/src/main/java/com/sessionrecordernative/SessionRecorderNativeModule.kt

@@ -25,7 +25,7 @@ import com.facebook.react.module.annotations.ReactModule
 
 @ReactModule(name = SessionRecorderNativeModule.NAME)
 class SessionRecorderNativeModule(reactContext: ReactApplicationContext) :
-        ReactContextBaseJavaModule(reactContext) {
+  NativeSessionRecorderNativeSpec(reactContext) {
 
     override fun getName(): String {
         return NAME

package/android/src/main/java/com/sessionrecordernative/SessionRecorderNativePackage.kt

@@ -10,7 +10,7 @@ import java.util.HashMap
 class SessionRecorderNativePackage : BaseReactPackage() {
   override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
     return if (name == SessionRecorderNativeModule.NAME) {
-      SessionRecorderNativeModule(reactContext) as NativeModule
+      SessionRecorderNativeModule(reactContext)
     } else {
       null
     }
@@ -25,7 +25,7 @@ class SessionRecorderNativePackage : BaseReactPackage() {
         false,  // canOverrideExistingModule
         false,  // needsEagerInit
         false,  // isCxxModule
-        false // isTurboModule
+        true // isTurboModule
       )
       moduleInfos
     }

package/lib/module/SessionRecorderNativeSpec.js

@@ -1,5 +1,5 @@
 "use strict";
 
-import { NativeModules } from 'react-native';
-export default NativeModules.SessionRecorderNative;
+import { TurboModuleRegistry } from 'react-native';
+export default TurboModuleRegistry.getEnforcing('SessionRecorderNative');
 //# sourceMappingURL=SessionRecorderNativeSpec.js.map

package/lib/module/SessionRecorderNativeSpec.js.map

@@ -1 +1 @@
-{"version":3,"names":["NativeModules","SessionRecorderNative"],"sourceRoot":"../../src","sources":["SessionRecorderNativeSpec.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,cAAc;AAmD5C,eAAeA,aAAa,CAACC,qBAAqB","ignoreList":[]}
+{"version":3,"names":["TurboModuleRegistry","getEnforcing"],"sourceRoot":"../../src","sources":["SessionRecorderNativeSpec.ts"],"mappings":";;AACA,SAASA,mBAAmB,QAAQ,cAAc;AA+BlD,eAAeA,mBAAmB,CAACC,YAAY,CAAO,uBAAuB,CAAC","ignoreList":[]}

package/lib/typescript/src/SessionRecorderNativeSpec.d.ts

@@ -1,14 +1,6 @@
-export interface Spec {
-    /**
-     * Capture the current screen and apply masking to sensitive elements
-     * @returns Promise that resolves to base64 encoded image
-     */
+import type { TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
     captureAndMask(): Promise<string>;
-    /**
-     * Capture the current screen and apply masking with custom options
-     * @param options Custom masking options
-     * @returns Promise that resolves to base64 encoded image
-     */
     captureAndMaskWithOptions(options: MaskingOptions): Promise<string>;
     startGestureRecording(): Promise<void>;
     stopGestureRecording(): Promise<void>;
@@ -19,22 +11,14 @@ export interface Spec {
     removeListeners(count: number): void;
 }
 export interface MaskingOptions {
-    /** Quality of the captured image (0.1 to 1.0, default: 0.3 for smaller file size) */
-    quality?: number;
-    /** Scale of the captured image (0.1 to 1.0, default: 1.0) */
-    scale?: number;
-    /** Whether to mask text inputs (UITextField, UITextView, React Native text components) */
     maskTextInputs?: boolean;
-    /** Whether to mask images (UIImageView, React Native Image components) */
     maskImages?: boolean;
-    /** Whether to mask buttons (UIButton) */
     maskButtons?: boolean;
-    /** Whether to mask labels (UILabel) */
     maskLabels?: boolean;
-    /** Whether to mask web views (WKWebView) */
     maskWebViews?: boolean;
-    /** Whether to mask sandboxed views (system views that don't belong to current process) */
     maskSandboxedViews?: boolean;
+    quality?: number;
+    scale?: number;
 }
 declare const _default: Spec;
 export default _default;

package/lib/typescript/src/SessionRecorderNativeSpec.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SessionRecorderNativeSpec.d.ts","sourceRoot":"","sources":["../../../src/SessionRecorderNativeSpec.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,IAAI;IACnB;;;OAGG;IACH,cAAc,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAElC;;;;OAIG;IACH,yBAAyB,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IAGpE,qBAAqB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,wBAAwB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7C,kBAAkB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI,CAAC;IACzD,aAAa,CACX,WAAW,EAAE,MAAM,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,CAAC,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,GAAG,GACb,IAAI,CAAC;IACR,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,cAAc;IAC7B,qFAAqF;IACrF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0FAA0F;IAC1F,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;wBAEqD,IAAI;AAA1D,wBAA2D"}
+{"version":3,"file":"SessionRecorderNativeSpec.d.ts","sourceRoot":"","sources":["../../../src/SessionRecorderNativeSpec.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGhD,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC,cAAc,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAClC,yBAAyB,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;IACpE,qBAAqB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,oBAAoB,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,wBAAwB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7C,kBAAkB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI,CAAC;IACzD,aAAa,CACX,WAAW,EAAE,MAAM,EACnB,CAAC,EAAE,MAAM,EACT,CAAC,EAAE,MAAM,EACT,MAAM,CAAC,EAAE,MAAM,EACf,QAAQ,CAAC,EAAE,GAAG,GACb,IAAI,CAAC;IACR,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtC;AAED,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;;AAED,wBAA+E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "1.0.1-beta.10",
+  "version": "1.0.1-beta.12",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",

package/src/SessionRecorderNativeSpec.ts

@@ -1,20 +1,9 @@
-import { NativeModules } from 'react-native';
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
 
-export interface Spec {
-  /**
-   * Capture the current screen and apply masking to sensitive elements
-   * @returns Promise that resolves to base64 encoded image
-   */
+export interface Spec extends TurboModule {
   captureAndMask(): Promise<string>;
-
-  /**
-   * Capture the current screen and apply masking with custom options
-   * @param options Custom masking options
-   * @returns Promise that resolves to base64 encoded image
-   */
   captureAndMaskWithOptions(options: MaskingOptions): Promise<string>;
-
-  // Gesture recording APIs
   startGestureRecording(): Promise<void>;
   stopGestureRecording(): Promise<void>;
   isGestureRecordingActive(): Promise<boolean>;
@@ -24,29 +13,21 @@ export interface Spec {
     x: number,
     y: number,
     target?: string,
-    metadata?: any
+    metadata?: any,
   ): void;
   addListener(eventName: string): void;
   removeListeners(count: number): void;
 }
 
 export interface MaskingOptions {
-  /** Quality of the captured image (0.1 to 1.0, default: 0.3 for smaller file size) */
-  quality?: number;
-  /** Scale of the captured image (0.1 to 1.0, default: 1.0) */
-  scale?: number;
-  /** Whether to mask text inputs (UITextField, UITextView, React Native text components) */
   maskTextInputs?: boolean;
-  /** Whether to mask images (UIImageView, React Native Image components) */
   maskImages?: boolean;
-  /** Whether to mask buttons (UIButton) */
   maskButtons?: boolean;
-  /** Whether to mask labels (UILabel) */
   maskLabels?: boolean;
-  /** Whether to mask web views (WKWebView) */
   maskWebViews?: boolean;
-  /** Whether to mask sandboxed views (system views that don't belong to current process) */
   maskSandboxedViews?: boolean;
+  quality?: number;
+  scale?: number;
 }
 
-export default NativeModules.SessionRecorderNative as Spec;
+export default TurboModuleRegistry.getEnforcing<Spec>('SessionRecorderNative');

package/android/src/main/java/com/sessionrecordernative/SessionRecorderNativeSpec.kt

@@ -1,79 +0,0 @@
-package com.multiplayer.sessionrecordernative
-
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.bridge.ReactContextBaseJavaModule
-import com.facebook.react.bridge.ReactMethod
-import com.facebook.react.bridge.Promise
-import com.facebook.react.bridge.Callback
-import com.facebook.react.bridge.ReadableMap
-import com.facebook.react.bridge.Arguments
-import com.facebook.react.bridge.WritableMap
-
-/**
- * Spec class for SessionRecorderNative TurboModule
- * This class defines the interface that React Native expects for TurboModules
- */
-class SessionRecorderNativeSpec(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
-
-    override fun getName(): String {
-        return NAME
-    }
-
-    companion object {
-        const val NAME = "SessionRecorderNative"
-    }
-
-    // Delegate to the actual implementation
-    private val implementation = SessionRecorderNativeModule(reactContext)
-
-    @ReactMethod
-    fun captureAndMask(promise: Promise) {
-        implementation.captureAndMask(promise)
-    }
-
-    @ReactMethod
-    fun captureAndMaskWithOptions(options: ReadableMap, promise: Promise) {
-        implementation.captureAndMaskWithOptions(options, promise)
-    }
-
-    @ReactMethod
-    fun startGestureRecording(promise: Promise) {
-        implementation.startGestureRecording(promise)
-    }
-
-    @ReactMethod
-    fun stopGestureRecording(promise: Promise) {
-        implementation.stopGestureRecording(promise)
-    }
-
-    @ReactMethod
-    fun isGestureRecordingActive(promise: Promise) {
-        implementation.isGestureRecordingActive(promise)
-    }
-
-    @ReactMethod
-    fun setGestureCallback(callback: Callback) {
-        implementation.setGestureCallback(callback)
-    }
-
-    @ReactMethod
-    fun recordGesture(
-        gestureType: String,
-        x: Double,
-        y: Double,
-        target: String?,
-        metadata: ReadableMap?
-    ) {
-        implementation.recordGesture(gestureType, x, y, target, metadata)
-    }
-
-    @ReactMethod
-    fun addListener(eventName: String) {
-        implementation.addListener(eventName)
-    }
-
-    @ReactMethod
-    fun removeListeners(count: Int) {
-        implementation.removeListeners(count)
-    }
-}