@mindedsolutions/bug-reporter-sdk 0.3.9 → 0.3.10

package/dist/components/ReportModal.js

@@ -11,7 +11,7 @@ const useDeviceInfo_1 = require("../hooks/useDeviceInfo");
 const ScreenshotPreview_1 = require("./ScreenshotPreview");
 const constants_1 = require("../constants");
 function ReportModal() {
-    const { config, translations, isModalVisible, closeModal } = (0, useBugReporter_1.useBugReporter)();
+    const { config, translations, isModalVisible, closeModal, pendingScreenshot } = (0, useBugReporter_1.useBugReporter)();
     const { captureAndUpload } = (0, useScreenCapture_1.useScreenCapture)();
     const { getDeviceInfo, getAppInfo, getNetworkInfo } = (0, useDeviceInfo_1.useDeviceInfo)();
     const [description, setDescription] = (0, react_1.useState)('');
@@ -21,15 +21,21 @@ function ReportModal() {
     const [screenshotUrl, setScreenshotUrl] = (0, react_1.useState)(null);
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const categories = config.categories ?? constants_1.DEFAULT_CATEGORIES;
-    // Capture screenshot and upload when modal opens
+    // Use pre-captured screenshot if available (shake flow), otherwise capture on open (button flow)
     (0, react_1.useEffect)(() => {
         if (isModalVisible) {
-            captureAndUpload().then((result) => {
-                if (result) {
-                    setScreenshotUri(result.uri);
-                    setScreenshotUrl(result.url || null);
-                }
-            });
+            if (pendingScreenshot) {
+                setScreenshotUri(pendingScreenshot.uri);
+                setScreenshotUrl(pendingScreenshot.url || null);
+            }
+            else {
+                captureAndUpload().then((result) => {
+                    if (result) {
+                        setScreenshotUri(result.uri);
+                        setScreenshotUrl(result.url || null);
+                    }
+                });
+            }
         }
         else {
             // Reset form when modal closes

package/dist/context/BugReporterContext.d.ts

@@ -1,6 +1,10 @@
 import type { RefObject } from 'react';
 import type { View } from 'react-native';
 import type { BugReporterConfig, Translations } from '../types';
+export interface ScreenshotData {
+    uri: string;
+    url: string;
+}
 export interface BugReporterContextValue {
     config: BugReporterConfig;
     translations: Translations;
@@ -11,5 +15,6 @@ export interface BugReporterContextValue {
     openBoard: () => void;
     closeBoard: () => void;
     viewRef: RefObject<View>;
+    pendingScreenshot: ScreenshotData | null;
 }
 export declare const BugReporterContext: import("react").Context<BugReporterContextValue | null>;

package/dist/context/BugReporterProvider.js

@@ -4,28 +4,73 @@ exports.BugReporterProvider = BugReporterProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const react_native_view_shot_1 = require("react-native-view-shot");
+const supabase_js_1 = require("@supabase/supabase-js");
 const BugReporterContext_1 = require("./BugReporterContext");
 const ReportModal_1 = require("../components/ReportModal");
 const FeatureBoardModal_1 = require("../components/FeatureBoardModal");
 const FloatingButton_1 = require("../components/FloatingButton");
 const useShakeDetection_1 = require("../hooks/useShakeDetection");
 const i18n_1 = require("../i18n");
+const constants_1 = require("../constants");
+const base64_1 = require("../utils/base64");
 function BugReporterProvider({ config, children }) {
     const [isModalVisible, setIsModalVisible] = (0, react_1.useState)(false);
     const [isBoardVisible, setIsBoardVisible] = (0, react_1.useState)(false);
+    const [pendingScreenshot, setPendingScreenshot] = (0, react_1.useState)(null);
     const viewRef = (0, react_1.useRef)(null);
     const translations = (0, i18n_1.getTranslations)(config.locale);
     const openModal = (0, react_1.useCallback)(() => setIsModalVisible(true), []);
-    const closeModal = (0, react_1.useCallback)(() => setIsModalVisible(false), []);
+    const closeModal = (0, react_1.useCallback)(() => {
+        setIsModalVisible(false);
+        setPendingScreenshot(null);
+    }, []);
     const openBoard = (0, react_1.useCallback)(() => setIsBoardVisible(true), []);
     const closeBoard = (0, react_1.useCallback)(() => setIsBoardVisible(false), []);
+    // Capture screenshot BEFORE opening modal to avoid iOS crash.
+    // drawViewHierarchyInRect:afterScreenUpdates: crashes when the view hierarchy
+    // is in transition (modal animating). Capturing first keeps the hierarchy stable.
+    const captureAndOpenModal = (0, react_1.useCallback)(async () => {
+        try {
+            if (viewRef.current) {
+                const uri = await (0, react_native_view_shot_1.captureRef)(viewRef.current, {
+                    format: constants_1.SCREENSHOT_FORMAT,
+                    quality: constants_1.SCREENSHOT_QUALITY,
+                });
+                const base64 = await (0, react_native_view_shot_1.captureRef)(viewRef.current, {
+                    format: constants_1.SCREENSHOT_FORMAT,
+                    quality: constants_1.SCREENSHOT_QUALITY,
+                    result: 'base64',
+                });
+                // Upload to Supabase Storage
+                const supabase = (0, supabase_js_1.createClient)(config.supabaseUrl, config.supabaseAnonKey);
+                const uniqueId = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
+                const fileName = `${config.projectId}/${uniqueId}.jpg`;
+                const arrayBuffer = (0, base64_1.base64ToArrayBuffer)(base64);
+                const { error } = await supabase.storage
+                    .from('screenshots')
+                    .upload(fileName, arrayBuffer, { contentType: 'image/jpeg' });
+                if (error) {
+                    setPendingScreenshot({ uri, url: '' });
+                }
+                else {
+                    const { data } = supabase.storage.from('screenshots').getPublicUrl(fileName);
+                    setPendingScreenshot({ uri, url: data.publicUrl });
+                }
+            }
+        }
+        catch {
+            // Screenshot failed — open modal without screenshot
+        }
+        setIsModalVisible(true);
+    }, [config]);
     const shakeEnabled = config.enableShake ?? !__DEV__;
     (0, useShakeDetection_1.useShakeDetection)({
         enabled: shakeEnabled,
         threshold: config.shakeThreshold,
-        onShake: openModal,
+        onShake: captureAndOpenModal,
     });
-    return ((0, jsx_runtime_1.jsxs)(BugReporterContext_1.BugReporterContext.Provider, { value: { config, translations, isModalVisible, openModal, closeModal, isBoardVisible, openBoard, closeBoard, viewRef }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { ref: viewRef, collapsable: false, style: styles.container, children: children }), config.floatingButton !== false && ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: react_native_1.StyleSheet.absoluteFill, children: (0, jsx_runtime_1.jsx)(FloatingButton_1.FloatingButton, { onPress: openModal, style: config.floatingButtonStyle }) })), (0, jsx_runtime_1.jsx)(ReportModal_1.ReportModal, {}), (0, jsx_runtime_1.jsx)(FeatureBoardModal_1.FeatureBoardModal, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(BugReporterContext_1.BugReporterContext.Provider, { value: { config, translations, isModalVisible, openModal, closeModal, isBoardVisible, openBoard, closeBoard, viewRef, pendingScreenshot }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { ref: viewRef, collapsable: false, style: styles.container, children: children }), config.floatingButton !== false && ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: react_native_1.StyleSheet.absoluteFill, children: (0, jsx_runtime_1.jsx)(FloatingButton_1.FloatingButton, { onPress: captureAndOpenModal, style: config.floatingButtonStyle }) })), (0, jsx_runtime_1.jsx)(ReportModal_1.ReportModal, {}), (0, jsx_runtime_1.jsx)(FeatureBoardModal_1.FeatureBoardModal, {})] }));
 }
 const styles = react_native_1.StyleSheet.create({
     container: { flex: 1 },

package/dist/hooks/useScreenCapture.js

@@ -6,38 +6,7 @@ const react_native_view_shot_1 = require("react-native-view-shot");
 const supabase_js_1 = require("@supabase/supabase-js");
 const useBugReporter_1 = require("./useBugReporter");
 const constants_1 = require("../constants");
-function base64ToArrayBuffer(base64) {
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
-    // Count padding from the original string before stripping
-    let padding = 0;
-    if (base64.endsWith('=='))
-        padding = 2;
-    else if (base64.endsWith('='))
-        padding = 1;
-    // Remove all non-base64 characters (including '=' padding)
-    const clean = base64.replace(/[^A-Za-z0-9+/]/g, '');
-    const len = clean.length;
-    // The byte length formula requires the padded base64 length (multiple of 4).
-    // Since clean has '=' stripped, we add padding back for the calculation.
-    const paddedLen = len + padding;
-    const byteLen = (paddedLen * 3) / 4 - padding;
-    const buffer = new ArrayBuffer(byteLen);
-    const bytes = new Uint8Array(buffer);
-    let p = 0;
-    for (let i = 0; i < len; i += 4) {
-        const a = chars.indexOf(clean[i]);
-        const b = chars.indexOf(clean[i + 1]);
-        const c = chars.indexOf(clean[i + 2]);
-        const d = chars.indexOf(clean[i + 3]);
-        const bits = (a << 18) | (b << 12) | (c << 6) | d;
-        bytes[p++] = (bits >> 16) & 0xff;
-        if (p < byteLen)
-            bytes[p++] = (bits >> 8) & 0xff;
-        if (p < byteLen)
-            bytes[p++] = bits & 0xff;
-    }
-    return buffer;
-}
+const base64_1 = require("../utils/base64");
 function useScreenCapture() {
     const { viewRef, config } = (0, useBugReporter_1.useBugReporter)();
     const captureAndUpload = (0, react_1.useCallback)(async () => {
@@ -58,7 +27,7 @@ function useScreenCapture() {
             const supabase = (0, supabase_js_1.createClient)(config.supabaseUrl, config.supabaseAnonKey);
             const uniqueId = `${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
             const fileName = `${config.projectId}/${uniqueId}.jpg`;
-            const arrayBuffer = base64ToArrayBuffer(base64);
+            const arrayBuffer = (0, base64_1.base64ToArrayBuffer)(base64);
             const { error } = await supabase.storage
                 .from('screenshots')
                 .upload(fileName, arrayBuffer, { contentType: 'image/jpeg' });

package/dist/utils/base64.d.ts

@@ -0,0 +1 @@
+export declare function base64ToArrayBuffer(base64: string): ArrayBuffer;

package/dist/utils/base64.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.base64ToArrayBuffer = base64ToArrayBuffer;
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+function base64ToArrayBuffer(base64) {
+    // Count padding from the original string before stripping
+    let padding = 0;
+    if (base64.endsWith('=='))
+        padding = 2;
+    else if (base64.endsWith('='))
+        padding = 1;
+    // Remove all non-base64 characters (including '=' padding)
+    const clean = base64.replace(/[^A-Za-z0-9+/]/g, '');
+    const len = clean.length;
+    // The byte length formula requires the padded base64 length (multiple of 4).
+    // Since clean has '=' stripped, we add padding back for the calculation.
+    const paddedLen = len + padding;
+    const byteLen = (paddedLen * 3) / 4 - padding;
+    const buffer = new ArrayBuffer(byteLen);
+    const bytes = new Uint8Array(buffer);
+    let p = 0;
+    for (let i = 0; i < len; i += 4) {
+        const a = chars.indexOf(clean[i]);
+        const b = chars.indexOf(clean[i + 1]);
+        const c = chars.indexOf(clean[i + 2]);
+        const d = chars.indexOf(clean[i + 3]);
+        const bits = (a << 18) | (b << 12) | (c << 6) | d;
+        bytes[p++] = (bits >> 16) & 0xff;
+        if (p < byteLen)
+            bytes[p++] = (bits >> 8) & 0xff;
+        if (p < byteLen)
+            bytes[p++] = bits & 0xff;
+    }
+    return buffer;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindedsolutions/bug-reporter-sdk",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "description": "In-app bug reporting and feature request SDK for React Native/Expo with shake detection, screenshot capture, feature board, and Supabase integration",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",