@multiplayer-app/session-recorder-react-native 0.0.1-beta.7 → 0.0.1-beta.8

package/docs/NATIVE_MODULE_SETUP.md

@@ -0,0 +1,175 @@
+# Native Module Setup Guide
+
+This guide explains how to properly set up the Session Recorder React Native library with native modules in both React Native and Expo projects.
+
+## Issues Fixed
+
+### 1. Missing iOS Native Files in NPM Package
+
+**Problem**: The iOS native implementation files (`SessionRecorderNative.m` and `SessionRecorderNative.swift`) were not being included in the published npm package.
+
+**Solution**: Updated `.npmignore` to exclude source files but include the compiled native modules.
+
+### 2. Auto-linking Configuration
+
+**Problem**: The library wasn't properly configured for auto-linking in Expo projects.
+
+**Solution**:
+
+- Added `expo` configuration section to `package.json`
+- Created an Expo plugin for automatic Podfile configuration
+- Updated podspec with proper Expo compatibility settings
+
+### 3. Podspec Configuration
+
+**Problem**: The podspec wasn't optimized for Expo compatibility.
+
+**Solution**: Added proper header search paths and Expo-specific configurations.
+
+## Setup Instructions
+
+### For Expo Projects
+
+1. **Install the package**:
+
+   ```bash
+   npm install @multiplayer-app/session-recorder-react-native
+   ```
+
+2. **Add to app.json/app.config.js**:
+
+   ```json
+   {
+     "expo": {
+       "plugins": ["@multiplayer-app/session-recorder-react-native"]
+     }
+   }
+   ```
+
+3. **Run prebuild** (if using development build):
+
+   ```bash
+   npx expo prebuild --clean
+   ```
+
+4. **Install iOS dependencies**:
+   ```bash
+   cd ios && pod install && cd ..
+   ```
+
+### For React Native CLI Projects
+
+1. **Install the package**:
+
+   ```bash
+   npm install @multiplayer-app/session-recorder-react-native
+   ```
+
+2. **iOS Setup**:
+
+   ```bash
+   cd ios && pod install && cd ..
+   ```
+
+3. **Android Setup**: No additional steps required (auto-linking handles it)
+
+## Troubleshooting
+
+### "Pod SessionRecorderNative files are missing"
+
+This error occurs when the iOS native files aren't properly included in the package or auto-linking fails.
+
+**Solutions**:
+
+1. **Check package installation**:
+
+   ```bash
+   ls node_modules/@multiplayer-app/session-recorder-react-native/ios/
+   ```
+
+   Should show: `SessionRecorderNative.m`, `SessionRecorderNative.podspec`, `SessionRecorderNative.swift`
+
+2. **Clear and reinstall**:
+
+   ```bash
+   rm -rf node_modules
+   npm install
+   cd ios && pod install --repo-update && cd ..
+   ```
+
+3. **For Expo projects, ensure plugin is configured**:
+   ```json
+   {
+     "expo": {
+       "plugins": ["@multiplayer-app/session-recorder-react-native"]
+     }
+   }
+   ```
+
+### Auto-linking Issues
+
+If auto-linking doesn't work:
+
+1. **Check react-native.config.js** (should be automatically created):
+
+   ```javascript
+   module.exports = {
+     dependencies: {
+       '@multiplayer-app/session-recorder-react-native': {
+         platforms: {
+           android: {
+             sourceDir: '../android',
+             packageImportPath: 'import com.multiplayer.sessionrecorder.SessionRecorderPackage;'
+           },
+           ios: {
+             podspecPath: '../ios/SessionRecorderNative.podspec'
+           }
+         }
+       }
+     }
+   }
+   ```
+
+2. **Manual linking** (if auto-linking fails):
+   - iOS: Add to Podfile manually
+   - Android: Add to MainApplication.java manually
+
+## File Structure
+
+The package includes these native files:
+
+```
+ios/
+├── SessionRecorderNative.m          # Objective-C bridge
+├── SessionRecorderNative.podspec    # CocoaPods specification
+└── SessionRecorderNative.swift      # Swift implementation
+
+android/
+├── build.gradle                     # Android build configuration
+└── src/main/java/com/multiplayer/sessionrecorder/
+    ├── SessionRecorderModule.kt      # Main Android module
+    ├── SessionRecorderPackage.kt    # Package registration
+    ├── ScreenMaskingModule.kt        # Screen masking module
+    └── ScreenMaskingPackage.kt      # Screen masking package
+```
+
+## Verification
+
+To verify the setup is working:
+
+1. **Check iOS**:
+
+   ```bash
+   cd ios && pod list | grep SessionRecorderNative
+   ```
+
+2. **Check Android**: Look for the package in `android/app/src/main/java/`
+
+3. **Test in code**:
+
+   ```javascript
+   import { SessionRecorderNative } from '@multiplayer-app/session-recorder-react-native'
+
+   // This should not throw an error
+   console.log('Native module loaded:', SessionRecorderNative)
+   ```

package/ios/SessionRecorderNative.podspec

@@ -18,4 +18,9 @@ Pod::Spec.new do |s|
 
   s.dependency "React-Core"
   s.dependency "React"
+
+  # Ensure proper linking for Expo
+  s.pod_target_xcconfig = {
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/React-Core/React\""
+  }
 end

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-beta.7",
+  "version": "0.0.1-beta.8",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -97,5 +97,15 @@
       "sourceDir": "./android",
       "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
     }
+  },
+  "expo": {
+    "ios": {
+      "podspecPath": "./ios/SessionRecorderNative.podspec"
+    },
+    "android": {
+      "sourceDir": "./android",
+      "packageImportPath": "import com.multiplayer.sessionrecorder.SessionRecorderPackage;"
+    },
+    "plugin": "./plugin/src/index.js"
   }
 }

package/plugin/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@multiplayer-app/session-recorder-react-native-plugin",
+  "version": "0.0.1-beta.8",
+  "description": "Expo plugin for Session Recorder React Native",
+  "main": "src/index.js",
+  "keywords": [
+    "expo",
+    "plugin",
+    "session-recorder",
+    "react-native"
+  ],
+  "author": "Multiplayer Software, Inc.",
+  "license": "MIT",
+  "dependencies": {
+    "@expo/config-plugins": "^7.0.0"
+  },
+  "peerDependencies": {
+    "expo": ">=49.0.0"
+  }
+}

package/plugin/src/index.js

@@ -0,0 +1,42 @@
+const { withDangerousMod } = require('@expo/config-plugins')
+const fs = require('fs')
+const path = require('path')
+
+const withSessionRecorder = (config) => {
+  return withDangerousMod(config, [
+    'ios',
+    async (config) => {
+      const projectRoot = config.modRequest.projectRoot
+      const platformRoot = config.modRequest.platformProjectRoot
+
+      // Ensure the Podfile includes our native module
+      const podfilePath = path.join(platformRoot, 'Podfile')
+
+      if (fs.existsSync(podfilePath)) {
+        let podfileContent = fs.readFileSync(podfilePath, 'utf8')
+
+        // Check if our pod is already included
+        if (!podfileContent.includes('SessionRecorderNative')) {
+          // Add our pod to the Podfile
+          const podEntry = `  pod 'SessionRecorderNative', :path => '../node_modules/@multiplayer-app/session-recorder-react-native/ios'\n`
+
+          // Find the target section and add our pod
+          const targetRegex = /(target ['"][^'"]+['"] do)/
+          if (targetRegex.test(podfileContent)) {
+            podfileContent = podfileContent.replace(targetRegex, `$1\n${podEntry}`)
+          } else {
+            // If no target found, add at the end before the end statement
+            podfileContent = podfileContent.replace(/(end\s*$)/, `${podEntry}$1`)
+          }
+
+          fs.writeFileSync(podfilePath, podfileContent)
+          console.log('✅ Added SessionRecorderNative to Podfile')
+        }
+      }
+
+      return config
+    }
+  ])
+}
+
+module.exports = withSessionRecorder

package/android/src/main/AndroidManifest.xml

@@ -1,2 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-</manifest>

package/android/src/main/java/com/multiplayer/sessionrecorder/ScreenMaskingModule.kt

@@ -1,202 +0,0 @@
-package com.multiplayer.sessionrecorder
-
-import android.app.Activity
-import android.graphics.*
-import android.util.Base64
-import android.view.View
-import android.widget.EditText
-import android.widget.TextView
-import com.facebook.react.bridge.*
-import java.io.ByteArrayOutputStream
-
-class SessionRecorderModule(reactContext: ReactApplicationContext) :
-    ReactContextBaseJavaModule(reactContext) {
-
-    override fun getName() = "SessionRecorder"
-
-    @ReactMethod
-    fun captureAndMask(promise: Promise) {
-        val activity = currentActivity ?: return promise.reject("NO_ACTIVITY", "No activity found")
-
-        try {
-            val maskedImage = captureAndMaskScreen(activity, null)
-            promise.resolve(maskedImage)
-        } catch (e: Exception) {
-            promise.reject("CAPTURE_FAILED", "Failed to capture and mask screen", e)
-        }
-    }
-
-    @ReactMethod
-    fun captureAndMaskWithOptions(options: ReadableMap, promise: Promise) {
-        val activity = currentActivity ?: return promise.reject("NO_ACTIVITY", "No activity found")
-
-        try {
-            val maskedImage = captureAndMaskScreen(activity, options)
-            promise.resolve(maskedImage)
-        } catch (e: Exception) {
-            promise.reject("CAPTURE_FAILED", "Failed to capture and mask screen", e)
-        }
-    }
-
-    private fun captureAndMaskScreen(activity: Activity, options: ReadableMap?): String {
-        val rootView = activity.window.decorView.rootView
-
-        // Enable drawing cache
-        rootView.isDrawingCacheEnabled = true
-        rootView.buildDrawingCache()
-
-        val bitmap = Bitmap.createBitmap(rootView.drawingCache)
-        rootView.isDrawingCacheEnabled = false
-
-        // Apply masking
-        val maskedBitmap = applyMasking(bitmap, rootView, options)
-
-        // Convert to base64
-        val output = ByteArrayOutputStream()
-        maskedBitmap.compress(Bitmap.CompressFormat.JPEG, 70, output)
-        val base64 = Base64.encodeToString(output.toByteArray(), Base64.DEFAULT)
-
-        return base64
-    }
-
-    private fun applyMasking(bitmap: Bitmap, rootView: View, options: ReadableMap?): Bitmap {
-        val maskedBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true)
-        val canvas = Canvas(maskedBitmap)
-
-        // Find sensitive elements
-        val sensitiveElements = findSensitiveElements(rootView)
-
-        for (element in sensitiveElements) {
-            val location = IntArray(2)
-            element.getLocationOnScreen(location)
-
-            val frame = Rect(
-                location[0],
-                location[1],
-                location[0] + element.width,
-                location[1] + element.height
-            )
-
-            val maskingType = getMaskingType(element)
-
-            when (maskingType) {
-                MaskingType.BLUR -> applyBlurMask(canvas, frame)
-                MaskingType.RECTANGLE -> applyRectangleMask(canvas, frame)
-                MaskingType.PIXELATE -> applyPixelateMask(canvas, frame)
-                MaskingType.NONE -> { /* No masking */ }
-            }
-        }
-
-        return maskedBitmap
-    }
-
-    private fun findSensitiveElements(view: View): List<View> {
-        val sensitiveElements = mutableListOf<View>()
-
-        fun traverseView(currentView: View) {
-            if (shouldMaskView(currentView)) {
-                sensitiveElements.add(currentView)
-            }
-
-            if (currentView is ViewGroup) {
-                for (i in 0 until currentView.childCount) {
-                    traverseView(currentView.getChildAt(i))
-                }
-            }
-        }
-
-        traverseView(view)
-        return sensitiveElements
-    }
-
-    private fun shouldMaskView(view: View): Boolean {
-        // Check for EditText - mask all text fields when inputMasking is enabled
-        if (view is EditText) {
-            return true
-        }
-
-        // Check for TextView - mask all text views when inputMasking is enabled
-        if (view is TextView) {
-            return true
-        }
-
-        return false
-    }
-
-    private fun getMaskingType(view: View): MaskingType {
-        // Default masking type for all text inputs
-        return MaskingType.RECTANGLE
-    }
-
-    private fun applyBlurMask(canvas: Canvas, frame: Rect) {
-        val paint = Paint().apply {
-            color = Color.BLACK
-            alpha = 200 // Semi-transparent
-        }
-
-        canvas.drawRect(frame, paint)
-
-        // Add some noise to make it look blurred
-        paint.color = Color.WHITE
-        paint.alpha = 80
-
-        for (i in 0..20) {
-            val randomX = frame.left + (Math.random() * frame.width()).toFloat()
-            val randomY = frame.top + (Math.random() * frame.height()).toFloat()
-            val randomSize = (Math.random() * 6 + 2).toFloat()
-            canvas.drawCircle(randomX, randomY, randomSize, paint)
-        }
-    }
-
-    private fun applyRectangleMask(canvas: Canvas, frame: Rect) {
-        val paint = Paint().apply {
-            color = Color.GRAY
-        }
-
-        canvas.drawRect(frame, paint)
-
-        // Add some text-like pattern
-        paint.color = Color.DKGRAY
-        val lineHeight = 4f
-        val spacing = 8f
-
-        var y = frame.top + spacing
-        while (y < frame.bottom - spacing) {
-            val lineWidth = (Math.random() * frame.width() * 0.5 + frame.width() * 0.3).toFloat()
-            val x = frame.left + (Math.random() * (frame.width() - lineWidth)).toFloat()
-            canvas.drawRect(x, y, x + lineWidth, y + lineHeight, paint)
-            y += lineHeight + spacing
-        }
-    }
-
-    private fun applyPixelateMask(canvas: Canvas, frame: Rect) {
-        val pixelSize = 8f
-        val pixelCountX = (frame.width() / pixelSize).toInt()
-        val pixelCountY = (frame.height() / pixelSize).toInt()
-
-        val paint = Paint()
-
-        for (x in 0 until pixelCountX) {
-            for (y in 0 until pixelCountY) {
-                val pixelFrame = RectF(
-                    frame.left + x * pixelSize,
-                    frame.top + y * pixelSize,
-                    frame.left + (x + 1) * pixelSize,
-                    frame.top + (y + 1) * pixelSize
-                )
-
-                // Use a random color for each pixel
-                paint.color = Color.rgb(
-                    (Math.random() * 255).toInt(),
-                    (Math.random() * 255).toInt(),
-                    (Math.random() * 255).toInt()
-                )
-                canvas.drawRect(pixelFrame, paint)
-            }
-        }
-    }
-
-    private enum class MaskingType {
-        BLUR, RECTANGLE, PIXELATE, NONE
-    }
-}

package/android/src/main/java/com/multiplayer/sessionrecorder/ScreenMaskingPackage.kt

@@ -1,16 +0,0 @@
-package com.multiplayer.sessionrecorder
-
-import com.facebook.react.ReactPackage
-import com.facebook.react.bridge.NativeModule
-import com.facebook.react.bridge.ReactApplicationContext
-import com.facebook.react.uimanager.ViewManager
-
-class SessionRecorderPackage : ReactPackage {
-    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-        return listOf(SessionRecorderModule(reactContext))
-    }
-
-    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-        return emptyList()
-    }
-}

package/android/src/main/java/com/multiplayer/sessionrecorder/SessionRecorderModule.kt

@@ -1,202 +0,0 @@
-package com.multiplayer.sessionrecorder
-
-import android.app.Activity
-import android.graphics.*
-import android.util.Base64
-import android.view.View
-import android.widget.EditText
-import android.widget.TextView
-import com.facebook.react.bridge.*
-import java.io.ByteArrayOutputStream
-
-class SessionRecorderModule(reactContext: ReactApplicationContext) :
-    ReactContextBaseJavaModule(reactContext) {
-
-    override fun getName() = "SessionRecorderNative"
-
-    @ReactMethod
-    fun captureAndMask(promise: Promise) {
-        val activity = currentActivity ?: return promise.reject("NO_ACTIVITY", "No activity found")
-
-        try {
-            val maskedImage = captureAndMaskScreen(activity, null)
-            promise.resolve(maskedImage)
-        } catch (e: Exception) {
-            promise.reject("CAPTURE_FAILED", "Failed to capture and mask screen", e)
-        }
-    }
-
-    @ReactMethod
-    fun captureAndMaskWithOptions(options: ReadableMap, promise: Promise) {
-        val activity = currentActivity ?: return promise.reject("NO_ACTIVITY", "No activity found")
-
-        try {
-            val maskedImage = captureAndMaskScreen(activity, options)
-            promise.resolve(maskedImage)
-        } catch (e: Exception) {
-            promise.reject("CAPTURE_FAILED", "Failed to capture and mask screen", e)
-        }
-    }
-
-    private fun captureAndMaskScreen(activity: Activity, options: ReadableMap?): String {
-        val rootView = activity.window.decorView.rootView
-
-        // Enable drawing cache
-        rootView.isDrawingCacheEnabled = true
-        rootView.buildDrawingCache()
-
-        val bitmap = Bitmap.createBitmap(rootView.drawingCache)
-        rootView.isDrawingCacheEnabled = false
-
-        // Apply masking
-        val maskedBitmap = applyMasking(bitmap, rootView, options)
-
-        // Convert to base64
-        val output = ByteArrayOutputStream()
-        maskedBitmap.compress(Bitmap.CompressFormat.JPEG, 70, output)
-        val base64 = Base64.encodeToString(output.toByteArray(), Base64.DEFAULT)
-
-        return base64
-    }
-
-    private fun applyMasking(bitmap: Bitmap, rootView: View, options: ReadableMap?): Bitmap {
-        val maskedBitmap = bitmap.copy(Bitmap.Config.ARGB_8888, true)
-        val canvas = Canvas(maskedBitmap)
-
-        // Find sensitive elements
-        val sensitiveElements = findSensitiveElements(rootView)
-
-        for (element in sensitiveElements) {
-            val location = IntArray(2)
-            element.getLocationOnScreen(location)
-
-            val frame = Rect(
-                location[0],
-                location[1],
-                location[0] + element.width,
-                location[1] + element.height
-            )
-
-            val maskingType = getMaskingType(element)
-
-            when (maskingType) {
-                MaskingType.BLUR -> applyBlurMask(canvas, frame)
-                MaskingType.RECTANGLE -> applyRectangleMask(canvas, frame)
-                MaskingType.PIXELATE -> applyPixelateMask(canvas, frame)
-                MaskingType.NONE -> { /* No masking */ }
-            }
-        }
-
-        return maskedBitmap
-    }
-
-    private fun findSensitiveElements(view: View): List<View> {
-        val sensitiveElements = mutableListOf<View>()
-
-        fun traverseView(currentView: View) {
-            if (shouldMaskView(currentView)) {
-                sensitiveElements.add(currentView)
-            }
-
-            if (currentView is ViewGroup) {
-                for (i in 0 until currentView.childCount) {
-                    traverseView(currentView.getChildAt(i))
-                }
-            }
-        }
-
-        traverseView(view)
-        return sensitiveElements
-    }
-
-    private fun shouldMaskView(view: View): Boolean {
-        // Check for EditText - mask all text fields when inputMasking is enabled
-        if (view is EditText) {
-            return true
-        }
-
-        // Check for TextView - mask all text views when inputMasking is enabled
-        if (view is TextView) {
-            return true
-        }
-
-        return false
-    }
-
-    private fun getMaskingType(view: View): MaskingType {
-        // Default masking type for all text inputs
-        return MaskingType.RECTANGLE
-    }
-
-    private fun applyBlurMask(canvas: Canvas, frame: Rect) {
-        val paint = Paint().apply {
-            color = Color.BLACK
-            alpha = 200 // Semi-transparent
-        }
-
-        canvas.drawRect(frame, paint)
-
-        // Add some noise to make it look blurred
-        paint.color = Color.WHITE
-        paint.alpha = 80
-
-        for (i in 0..20) {
-            val randomX = frame.left + (Math.random() * frame.width()).toFloat()
-            val randomY = frame.top + (Math.random() * frame.height()).toFloat()
-            val randomSize = (Math.random() * 6 + 2).toFloat()
-            canvas.drawCircle(randomX, randomY, randomSize, paint)
-        }
-    }
-
-    private fun applyRectangleMask(canvas: Canvas, frame: Rect) {
-        val paint = Paint().apply {
-            color = Color.GRAY
-        }
-
-        canvas.drawRect(frame, paint)
-
-        // Add some text-like pattern
-        paint.color = Color.DKGRAY
-        val lineHeight = 4f
-        val spacing = 8f
-
-        var y = frame.top + spacing
-        while (y < frame.bottom - spacing) {
-            val lineWidth = (Math.random() * frame.width() * 0.5 + frame.width() * 0.3).toFloat()
-            val x = frame.left + (Math.random() * (frame.width() - lineWidth)).toFloat()
-            canvas.drawRect(x, y, x + lineWidth, y + lineHeight, paint)
-            y += lineHeight + spacing
-        }
-    }
-
-    private fun applyPixelateMask(canvas: Canvas, frame: Rect) {
-        val pixelSize = 8f
-        val pixelCountX = (frame.width() / pixelSize).toInt()
-        val pixelCountY = (frame.height() / pixelSize).toInt()
-
-        val paint = Paint()
-
-        for (x in 0 until pixelCountX) {
-            for (y in 0 until pixelCountY) {
-                val pixelFrame = RectF(
-                    frame.left + x * pixelSize,
-                    frame.top + y * pixelSize,
-                    frame.left + (x + 1) * pixelSize,
-                    frame.top + (y + 1) * pixelSize
-                )
-
-                // Use a random color for each pixel
-                paint.color = Color.rgb(
-                    (Math.random() * 255).toInt(),
-                    (Math.random() * 255).toInt(),
-                    (Math.random() * 255).toInt()
-                )
-                canvas.drawRect(pixelFrame, paint)
-            }
-        }
-    }
-
-    private enum class MaskingType {
-        BLUR, RECTANGLE, PIXELATE, NONE
-    }
-}