@repliqo/sdk-react-native 0.1.0

package/dist/types/crash.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/events.d.ts

@@ -0,0 +1,53 @@
+export type EventType = 'touch' | 'scroll' | 'gesture' | 'navigation' | 'custom';
+export interface AnalyticsEvent {
+    type: EventType;
+    screenName?: string;
+    data: Record<string, any>;
+    timestamp: string;
+}
+export interface TouchEventData {
+    x: number;
+    y: number;
+    elementTag?: string;
+    elementText?: string;
+}
+export interface NavigationEventData {
+    fromScreen: string;
+    toScreen: string;
+}
+export interface ScreenVisit {
+    sessionId: string;
+    screenName: string;
+    enteredAt: string;
+    exitedAt?: string;
+    duration?: number;
+}
+export interface DeviceInfo {
+    os: string;
+    osVersion: string;
+    model: string;
+    brand: string;
+    screenWidth: number;
+    screenHeight: number;
+    appVersion?: string;
+}
+export interface SDKConfig {
+    apiKey: string;
+    appId: string;
+    baseUrl: string;
+    batchSize?: number;
+    flushInterval?: number;
+    enableTouchTracking?: boolean;
+    enableNavigationTracking?: boolean;
+    enableSnapshots?: boolean;
+    snapshotInterval?: number;
+    maxSnapshotsPerSession?: number;
+    /** Max snapshots per network batch. Defaults to 8. */
+    snapshotBatchSize?: number;
+    /** Auto-flush interval for the snapshot queue (ms). Defaults to 15000. */
+    snapshotFlushInterval?: number;
+    /** Max snapshots kept in memory if the backend is unreachable. Defaults to 32. */
+    snapshotMaxBufferSize?: number;
+    enableCrashTracking?: boolean;
+    debug?: boolean;
+}

package/dist/types/events.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/types/snapshot.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Repliqo snapshot types.
+ *
+ * The SDK captures JPEG screenshots of the view hierarchy via
+ * react-native-view-shot. Each snapshot is stored as a base64 JPEG
+ * together with its rendered dimensions.
+ */
+export interface ScreenshotData {
+    image: string;
+    width: number;
+    height: number;
+    format: 'jpeg';
+}
+export interface SnapshotPayload {
+    sessionId: string;
+    screenName: string;
+    timestamp: string;
+    sequence: number;
+    isDiff: boolean;
+    data: ScreenshotData;
+}

package/dist/types/snapshot.js

@@ -0,0 +1,9 @@
+"use strict";
+/**
+ * Repliqo snapshot types.
+ *
+ * The SDK captures JPEG screenshots of the view hierarchy via
+ * react-native-view-shot. Each snapshot is stored as a base64 JPEG
+ * together with its rendered dimensions.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@repliqo/sdk-react-native",
+  "version": "0.1.0",
+  "description": "Session replay & analytics SDK for React Native. Captures screenshots (including modals/alerts), navigation, screen visits, and custom events.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SbtnAvls/app-analytics-api",
+    "directory": "packages/sdk-react-native"
+  },
+  "homepage": "https://repliqo.odmservice.site",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "analytics",
+    "session-replay",
+    "screen-capture",
+    "heatmaps",
+    "uxcam",
+    "repliqo"
+  ],
+  "files": [
+    "dist/",
+    "android/src/",
+    "android/build.gradle",
+    "src/",
+    "INTEGRATION_GUIDE.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "jest",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": ">=6.0.0",
+    "react": ">=17.0.0",
+    "react-native": ">=0.68.0",
+    "react-native-view-shot": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-view-shot": {
+      "optional": true
+    },
+    "@react-navigation/native": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@react-navigation/native": "^6.1.0",
+    "@types/jest": "^29.5.0",
+    "@types/react": "^18.2.0",
+    "@types/react-native": "^0.72.0",
+    "jest": "^29.7.0",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0",
+    "react-native-view-shot": "^4.0.3",
+    "ts-jest": "^29.1.0",
+    "typescript": "^5.3.0"
+  }
+}

package/src/components/ScreenCapturePermission.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+  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 function ScreenCapturePermission({
+  onAccept,
+  onDecline,
+  title,
+  description,
+  containerStyle,
+  cardStyle,
+  titleStyle,
+  descriptionStyle,
+  acceptButtonStyle,
+  declineButtonStyle,
+}: ScreenCapturePermissionProps) {
+  if (Platform.OS !== 'android') {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <View style={[styles.card, cardStyle]}>
+        <Text style={styles.icon}>📹</Text>
+        <Text style={[styles.title, titleStyle]}>
+          {title || 'Session Recording'}
+        </Text>
+        <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.'}
+        </Text>
+        <TouchableOpacity style={[styles.acceptButton, acceptButtonStyle]} onPress={onAccept}>
+          <Text style={styles.acceptText}>Allow Recording</Text>
+        </TouchableOpacity>
+        <TouchableOpacity style={[styles.declineButton, declineButtonStyle]} onPress={onDecline}>
+          <Text style={styles.declineText}>Not Now</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}
+
+const styles = 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,
+  },
+});