@repliqo/sdk-react-native 0.1.0

package/android/build.gradle

@@ -0,0 +1,24 @@
+def safeExtGet(prop, fallback) {
+  rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+apply plugin: 'com.android.library'
+
+android {
+  namespace 'com.repliqo.screencapture'
+  compileSdkVersion safeExtGet('compileSdkVersion', 34)
+
+  defaultConfig {
+    minSdkVersion safeExtGet('minSdkVersion', 21)
+    targetSdkVersion safeExtGet('targetSdkVersion', 34)
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  compileOnly 'com.facebook.react:react-android:+'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- No permissions needed. Multi-window capture uses View.draw()
+         to composite all app windows. No MediaProjection, no service. -->
+</manifest>

package/android/src/main/java/com/repliqo/screencapture/MultiWindowCapture.java

@@ -0,0 +1,230 @@
+package com.repliqo.screencapture;
+
+import android.app.Activity;
+import android.graphics.Bitmap;
+import android.graphics.Canvas;
+import android.graphics.Rect;
+import android.os.Build;
+import android.util.Base64;
+import android.util.Log;
+import android.view.View;
+import android.view.WindowManager;
+
+import java.io.ByteArrayOutputStream;
+import java.lang.reflect.Field;
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * Captures ALL visible windows of the app (main view + modals + alerts +
+ * dialogs + toasts) by accessing Android's internal WindowManagerGlobal
+ * via reflection.
+ *
+ * How it works:
+ *   1. WindowManagerGlobal keeps a list of all root views (mViews) and
+ *      their layout params (mParams) for the current process.
+ *   2. We iterate over all root views, filter for visible ones, and
+ *      draw each one to a Bitmap using View.draw().
+ *   3. We composite the bitmaps in z-order onto a single canvas.
+ *   4. The result is a complete screenshot including modals, alerts,
+ *      system dialogs, etc. — anything that's a Window in the app.
+ *
+ * NO permissions required. NO MediaProjection. NO foreground service.
+ * This is the same technique used by Facebook's screenshot-tests library.
+ */
+public class MultiWindowCapture {
+    private static final String TAG = "RepliqoCapture";
+    private static final int TARGET_WIDTH = 390;
+    private static final int JPEG_QUALITY = 40;
+
+    /**
+     * Capture all visible windows composited into a single JPEG.
+     *
+     * Must be called on the UI thread.
+     *
+     * @param activity The current Activity (used for screen dimensions)
+     * @return base64-encoded JPEG, or null on failure
+     */
+    public static CaptureResult capture(Activity activity) {
+        if (activity == null || activity.isFinishing()) {
+            return null;
+        }
+
+        try {
+            // Get screen dimensions from the activity's window
+            View decorView = activity.getWindow().getDecorView();
+            int screenWidth = decorView.getWidth();
+            int screenHeight = decorView.getHeight();
+
+            if (screenWidth <= 0 || screenHeight <= 0) {
+                return null;
+            }
+
+            // Calculate output dimensions (scale to TARGET_WIDTH)
+            float ratio = (float) screenHeight / screenWidth;
+            int outWidth = Math.min(TARGET_WIDTH, screenWidth);
+            int outHeight = Math.round(outWidth * ratio);
+            outWidth = outWidth & ~1;  // Ensure even
+            outHeight = outHeight & ~1;
+
+            float scale = (float) outWidth / screenWidth;
+
+            // Get all root views via reflection
+            List<ViewInfo> views = getRootViews();
+
+            if (views.isEmpty()) {
+                // Fallback: just capture the decor view
+                return captureDecorView(decorView, outWidth, outHeight, scale);
+            }
+
+            // Create the composite bitmap
+            Bitmap composite = Bitmap.createBitmap(outWidth, outHeight,
+                    Bitmap.Config.ARGB_8888);
+            Canvas canvas = new Canvas(composite);
+            canvas.scale(scale, scale);
+
+            // Draw each visible root view in order (bottom to top)
+            for (ViewInfo info : views) {
+                if (info.view.getVisibility() != View.VISIBLE) continue;
+                if (info.view.getWidth() <= 0 || info.view.getHeight() <= 0) continue;
+
+                canvas.save();
+
+                // Apply the window's position offset
+                canvas.translate(info.left, info.top);
+
+                try {
+                    info.view.draw(canvas);
+                } catch (Exception e) {
+                    Log.w(TAG, "Failed to draw view: " + e.getMessage());
+                }
+
+                canvas.restore();
+            }
+
+            // Compress to JPEG
+            String base64 = bitmapToBase64(composite);
+            composite.recycle();
+
+            if (base64 == null) return null;
+
+            return new CaptureResult(base64, outWidth, outHeight);
+
+        } catch (Exception e) {
+            Log.w(TAG, "MultiWindowCapture failed: " + e.getMessage());
+            return null;
+        }
+    }
+
+    /**
+     * Fallback: capture just the activity's decor view.
+     */
+    private static CaptureResult captureDecorView(
+            View decorView, int outWidth, int outHeight, float scale) {
+        try {
+            Bitmap bitmap = Bitmap.createBitmap(outWidth, outHeight,
+                    Bitmap.Config.ARGB_8888);
+            Canvas canvas = new Canvas(bitmap);
+            canvas.scale(scale, scale);
+            decorView.draw(canvas);
+
+            String base64 = bitmapToBase64(bitmap);
+            bitmap.recycle();
+
+            if (base64 == null) return null;
+            return new CaptureResult(base64, outWidth, outHeight);
+        } catch (Exception e) {
+            Log.w(TAG, "DecorView capture failed: " + e.getMessage());
+            return null;
+        }
+    }
+
+    /**
+     * Get all root views in the current process via WindowManagerGlobal.
+     * Uses reflection because this is an internal API.
+     */
+    @SuppressWarnings("unchecked")
+    private static List<ViewInfo> getRootViews() {
+        List<ViewInfo> result = new ArrayList<>();
+
+        try {
+            // Get WindowManagerGlobal.getInstance()
+            Class<?> wmgClass = Class.forName("android.view.WindowManagerGlobal");
+            Object wmg = wmgClass.getMethod("getInstance").invoke(null);
+
+            // Get mViews (ArrayList<View>)
+            Field viewsField = wmgClass.getDeclaredField("mViews");
+            viewsField.setAccessible(true);
+            ArrayList<View> views = (ArrayList<View>) viewsField.get(wmg);
+
+            // Get mParams (ArrayList<WindowManager.LayoutParams>)
+            Field paramsField = wmgClass.getDeclaredField("mParams");
+            paramsField.setAccessible(true);
+            ArrayList<WindowManager.LayoutParams> params =
+                    (ArrayList<WindowManager.LayoutParams>) paramsField.get(wmg);
+
+            if (views == null || params == null) return result;
+
+            int count = Math.min(views.size(), params.size());
+            for (int i = 0; i < count; i++) {
+                View view = views.get(i);
+                WindowManager.LayoutParams lp = params.get(i);
+
+                if (view == null || lp == null) continue;
+
+                int left = lp.x;
+                int top = lp.y;
+
+                // For MATCH_PARENT windows (most modals), position is 0,0
+                if (lp.width == WindowManager.LayoutParams.MATCH_PARENT) {
+                    left = 0;
+                }
+                if (lp.height == WindowManager.LayoutParams.MATCH_PARENT) {
+                    top = 0;
+                }
+
+                result.add(new ViewInfo(view, left, top));
+            }
+        } catch (Exception e) {
+            Log.w(TAG, "getRootViews reflection failed: " + e.getMessage());
+        }
+
+        return result;
+    }
+
+    private static String bitmapToBase64(Bitmap bitmap) {
+        try {
+            ByteArrayOutputStream baos = new ByteArrayOutputStream();
+            bitmap.compress(Bitmap.CompressFormat.JPEG, JPEG_QUALITY, baos);
+            return Base64.encodeToString(baos.toByteArray(), Base64.NO_WRAP);
+        } catch (Exception e) {
+            return null;
+        }
+    }
+
+    /** Container for a root view and its screen position. */
+    private static class ViewInfo {
+        final View view;
+        final int left;
+        final int top;
+
+        ViewInfo(View view, int left, int top) {
+            this.view = view;
+            this.left = left;
+            this.top = top;
+        }
+    }
+
+    /** Result of a capture: base64 JPEG + dimensions. */
+    public static class CaptureResult {
+        public final String image;
+        public final int width;
+        public final int height;
+
+        CaptureResult(String image, int width, int height) {
+            this.image = image;
+            this.width = width;
+            this.height = height;
+        }
+    }
+}

package/android/src/main/java/com/repliqo/screencapture/ScreenCaptureModule.java

@@ -0,0 +1,94 @@
+package com.repliqo.screencapture;
+
+import android.app.Activity;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.WritableMap;
+
+/**
+ * React Native native module for full-screen capture INCLUDING modals,
+ * alerts, and system dialogs.
+ *
+ * Uses MultiWindowCapture which draws all app windows via View.draw()
+ * and composites them. NO permissions required. NO MediaProjection.
+ * NO foreground service.
+ *
+ * JS API:
+ *   NativeModules.ScreenCaptureModule.captureFrame() → Promise<{image,width,height,format}>
+ *
+ * The TS wrapper (NativeScreenCapture.ts) detects availability via
+ * NativeModules.ScreenCaptureModule != null, so isAvailable() is kept
+ * for explicit checks but not required.
+ */
+public class ScreenCaptureModule extends ReactContextBaseJavaModule {
+    private static final String TAG = "RepliqoCapture";
+    private static final String MODULE_NAME = "ScreenCaptureModule";
+
+    private final Handler mainHandler = new Handler(Looper.getMainLooper());
+
+    public ScreenCaptureModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return MODULE_NAME;
+    }
+
+    /**
+     * Check if the native capture module is available.
+     * Always true on Android (no permissions needed).
+     */
+    @ReactMethod
+    public void isAvailable(Promise promise) {
+        promise.resolve(true);
+    }
+
+    /**
+     * Capture a single frame including all visible windows.
+     * Must run View.draw() on the UI thread, so we post to the main handler.
+     *
+     * Returns: { image: base64, width: int, height: int, format: "jpeg" }
+     */
+    @ReactMethod
+    public void captureFrame(Promise promise) {
+        Activity activity = getCurrentActivity();
+        if (activity == null) {
+            promise.resolve(null);
+            return;
+        }
+
+        // View.draw() must run on the UI thread
+        mainHandler.post(() -> {
+            try {
+                MultiWindowCapture.CaptureResult result =
+                        MultiWindowCapture.capture(activity);
+
+                if (result == null) {
+                    promise.resolve(null);
+                    return;
+                }
+
+                WritableMap map = Arguments.createMap();
+                map.putString("image", result.image);
+                map.putInt("width", result.width);
+                map.putInt("height", result.height);
+                map.putString("format", "jpeg");
+                promise.resolve(map);
+            } catch (Exception e) {
+                Log.w(TAG, "captureFrame failed: " + e.getMessage());
+                promise.resolve(null);
+            }
+        });
+    }
+}

package/android/src/main/java/com/repliqo/screencapture/ScreenCapturePackage.java

@@ -0,0 +1,38 @@
+package com.repliqo.screencapture;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * React Native package that registers the ScreenCaptureModule.
+ *
+ * The host app must add this package to its getPackages() list
+ * in MainApplication.java. With autolinking (RN 0.60+), this
+ * should be handled automatically.
+ */
+public class ScreenCapturePackage implements ReactPackage {
+
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(
+            @NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new ScreenCaptureModule(reactContext));
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(
+            @NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

package/dist/components/ScreenCapturePermission.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+interface ScreenCapturePermissionProps {
+    /**
+     * Called when the user taps "Allow" — the host app should then call
+     * `AppAnalytics.getInstance().startSession(...)` which triggers the
+     * actual system permission dialog.
+     */
+    onAccept: () => void;
+    /**
+     * Called when the user taps "Not now" — the host app can proceed
+     * without screen capture (view-shot fallback will be used).
+     */
+    onDecline: () => void;
+    /** Optional custom title. */
+    title?: string;
+    /** Optional custom description. */
+    description?: string;
+    /** Override container (overlay) style. */
+    containerStyle?: ViewStyle;
+    /** Override card style. */
+    cardStyle?: ViewStyle;
+    /** Override title text style. */
+    titleStyle?: TextStyle;
+    /** Override description text style. */
+    descriptionStyle?: TextStyle;
+    /** Override accept button style. */
+    acceptButtonStyle?: ViewStyle;
+    /** Override decline button style. */
+    declineButtonStyle?: ViewStyle;
+}
+/**
+ * Pre-permission explanation screen for session replay.
+ *
+ * Android requires a system-level permission dialog for screen capture
+ * (MediaProjection), which can be confusing without context. Show this
+ * component BEFORE the system dialog to explain why the permission is
+ * needed.
+ *
+ * Usage in the host app:
+ *
+ * ```tsx
+ * import { ScreenCapturePermission } from '@repliqo/sdk-react-native';
+ *
+ * <ScreenCapturePermission
+ *   onAccept={() => initRepliqo()}
+ *   onDecline={() => initRepliqoWithoutCapture()}
+ * />
+ * ```
+ *
+ * This component is OPTIONAL. If not shown, the SDK still works — the
+ * system dialog appears directly, and denial falls back to view-shot.
+ */
+export declare function ScreenCapturePermission({ onAccept, onDecline, title, description, containerStyle, cardStyle, titleStyle, descriptionStyle, acceptButtonStyle, declineButtonStyle, }: ScreenCapturePermissionProps): React.JSX.Element | null;
+export {};

package/dist/components/ScreenCapturePermission.js

@@ -0,0 +1,112 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenCapturePermission = ScreenCapturePermission;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * Pre-permission explanation screen for session replay.
+ *
+ * Android requires a system-level permission dialog for screen capture
+ * (MediaProjection), which can be confusing without context. Show this
+ * component BEFORE the system dialog to explain why the permission is
+ * needed.
+ *
+ * Usage in the host app:
+ *
+ * ```tsx
+ * import { ScreenCapturePermission } from '@repliqo/sdk-react-native';
+ *
+ * <ScreenCapturePermission
+ *   onAccept={() => initRepliqo()}
+ *   onDecline={() => initRepliqoWithoutCapture()}
+ * />
+ * ```
+ *
+ * This component is OPTIONAL. If not shown, the SDK still works — the
+ * system dialog appears directly, and denial falls back to view-shot.
+ */
+function ScreenCapturePermission({ onAccept, onDecline, title, description, containerStyle, cardStyle, titleStyle, descriptionStyle, acceptButtonStyle, declineButtonStyle, }) {
+    if (react_native_1.Platform.OS !== 'android') {
+        return null;
+    }
+    return (<react_native_1.View style={[styles.container, containerStyle]}>
+      <react_native_1.View style={[styles.card, cardStyle]}>
+        <react_native_1.Text style={styles.icon}>📹</react_native_1.Text>
+        <react_native_1.Text style={[styles.title, titleStyle]}>
+          {title || 'Session Recording'}
+        </react_native_1.Text>
+        <react_native_1.Text style={[styles.description, descriptionStyle]}>
+          {description ||
+            'To capture your full session including dialogs and menus, ' +
+                'we need screen recording permission. This helps us improve ' +
+                'your experience by understanding how you use the app.\n\n' +
+                'You can stop recording at any time from the notification bar.'}
+        </react_native_1.Text>
+        <react_native_1.TouchableOpacity style={[styles.acceptButton, acceptButtonStyle]} onPress={onAccept}>
+          <react_native_1.Text style={styles.acceptText}>Allow Recording</react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+        <react_native_1.TouchableOpacity style={[styles.declineButton, declineButtonStyle]} onPress={onDecline}>
+          <react_native_1.Text style={styles.declineText}>Not Now</react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        padding: 24,
+    },
+    card: {
+        backgroundColor: '#1a1a2e',
+        borderRadius: 16,
+        padding: 24,
+        width: '100%',
+        maxWidth: 340,
+        alignItems: 'center',
+    },
+    icon: {
+        fontSize: 48,
+        marginBottom: 16,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#ffffff',
+        marginBottom: 12,
+        textAlign: 'center',
+    },
+    description: {
+        fontSize: 14,
+        color: '#a0a0b8',
+        lineHeight: 22,
+        textAlign: 'center',
+        marginBottom: 24,
+    },
+    acceptButton: {
+        backgroundColor: '#6366f1',
+        borderRadius: 12,
+        paddingVertical: 14,
+        paddingHorizontal: 32,
+        width: '100%',
+        alignItems: 'center',
+        marginBottom: 12,
+    },
+    acceptText: {
+        color: '#ffffff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    declineButton: {
+        paddingVertical: 10,
+    },
+    declineText: {
+        color: '#6b7280',
+        fontSize: 14,
+    },
+});

package/dist/core/client.d.ts

@@ -0,0 +1,41 @@
+import { DeviceInfo, SDKConfig } from '../types/events';
+export declare class AppAnalytics {
+    private static instance;
+    private config;
+    private apiClient;
+    private eventQueue;
+    private screenVisitQueue;
+    private snapshotQueue;
+    private snapshotCapture;
+    private errorTracker;
+    private sessionId;
+    private currentScreen;
+    private currentScreenEnteredAt;
+    private logger;
+    private appStateSubscription;
+    private constructor();
+    static init(config: SDKConfig): AppAnalytics;
+    static getInstance(): AppAnalytics;
+    static destroy(): void;
+    startSession(deviceId: string, deviceInfo?: DeviceInfo): Promise<string>;
+    endSession(): Promise<void>;
+    trackTouch(x: number, y: number, screenName?: string, extra?: Record<string, any>): void;
+    trackNavigation(fromScreen: string, toScreen: string): void;
+    trackCustomEvent(eventName: string, data?: Record<string, any>): void;
+    reportError(error: Error, metadata?: Record<string, any>): void;
+    onScreenEnter(screenName: string): void;
+    onScreenExit(screenName: string): void;
+    flush(): Promise<void>;
+    getSessionId(): string | null;
+    getCurrentScreen(): string | null;
+    /**
+     * Force an immediate screenshot capture, outside the periodic schedule.
+     * Useful for capturing specific moments (e.g. right after a critical
+     * user action). Respects the in-flight lock and session cap.
+     */
+    captureSnapshot(screenName?: string): Promise<void>;
+    startSnapshotCapture(): void;
+    stopSnapshotCapture(): void;
+    isInitialized(): boolean;
+    private setupAppStateListener;
+}