@mushi-mushi/react-native 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kenji Sakuramoto
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,44 @@
+# @mushi-mushi/react-native
+
+React Native SDK for Mushi Mushi. Shake-to-report, bottom sheet widget, offline queue.
+
+## Usage
+
+```tsx
+import { MushiProvider } from '@mushi-mushi/react-native'
+
+export default function App() {
+  return (
+    <MushiProvider projectId="proj_xxx" apiKey="mushi_xxx">
+      <Navigation />
+    </MushiProvider>
+  )
+}
+```
+
+### Hooks
+
+```ts
+import { useMushi, useMushiReport } from '@mushi-mushi/react-native'
+
+const { submitReport } = useMushiReport()
+```
+
+### Captures
+
+- Device info (platform, OS, screen dimensions)
+- Console logs (monkey-patched)
+- Network requests (fetch/XMLHttpRequest interceptor)
+- Navigation events (React Navigation integration, optional)
+- Offline queue via AsyncStorage
+
+## Peer Dependencies
+
+- `react` >= 18
+- `react-native` >= 0.72
+- `@react-navigation/native` >= 6 (optional)
+- `@react-native-async-storage/async-storage` >= 1.19 (optional)
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,337 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AsyncStorageQueue: () => AsyncStorageQueue,
+  MushiProvider: () => MushiProvider,
+  getDeviceInfo: () => getDeviceInfo,
+  setupConsoleCapture: () => setupConsoleCapture,
+  setupNetworkCapture: () => setupNetworkCapture,
+  useMushi: () => useMushi,
+  useMushiReport: () => useMushiReport,
+  useMushiWidget: () => useMushiWidget,
+  useNavigationCapture: () => useNavigationCapture
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react = require("react");
+
+// src/capture/console-capture.ts
+function setupConsoleCapture(maxEntries = 100) {
+  const entries = [];
+  const methods = ["log", "warn", "error"];
+  const originals = /* @__PURE__ */ new Map();
+  for (const method of methods) {
+    const original = console[method].bind(console);
+    originals.set(method, original);
+    console[method] = (...args) => {
+      entries.push({
+        level: method,
+        message: args.map(String).join(" ").slice(0, 500),
+        timestamp: Date.now()
+      });
+      if (entries.length > maxEntries) entries.shift();
+      original(...args);
+    };
+  }
+  return {
+    getEntries: () => [...entries],
+    clear: () => {
+      entries.length = 0;
+    },
+    restore: () => {
+      for (const method of methods) {
+        const orig = originals.get(method);
+        if (orig) console[method] = orig;
+      }
+    }
+  };
+}
+
+// src/capture/network-capture.ts
+function setupNetworkCapture(maxEntries = 50, apiEndpoint) {
+  const entries = [];
+  const origFetch = globalThis.fetch;
+  globalThis.fetch = async function(input, init) {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    const method = init?.method ?? "GET";
+    if (apiEndpoint && url.includes(apiEndpoint)) {
+      return origFetch.apply(this, [input, init]);
+    }
+    const start = Date.now();
+    try {
+      const res = await origFetch.apply(this, [input, init]);
+      entries.push({
+        method,
+        url: stripQueryParams(url),
+        status: res.status,
+        duration: Date.now() - start,
+        timestamp: start
+      });
+      if (entries.length > maxEntries) entries.shift();
+      return res;
+    } catch (err) {
+      entries.push({
+        method,
+        url: stripQueryParams(url),
+        status: null,
+        duration: Date.now() - start,
+        error: String(err),
+        timestamp: start
+      });
+      if (entries.length > maxEntries) entries.shift();
+      throw err;
+    }
+  };
+  return {
+    getEntries: () => [...entries],
+    clear: () => {
+      entries.length = 0;
+    },
+    restore: () => {
+      globalThis.fetch = origFetch;
+    }
+  };
+}
+function stripQueryParams(url) {
+  try {
+    const u = new URL(url);
+    return `${u.origin}${u.pathname}`;
+  } catch {
+    return url.split("?")[0];
+  }
+}
+
+// src/capture/device-info.ts
+var import_react_native = require("react-native");
+function getDeviceInfo() {
+  const { width, height } = import_react_native.Dimensions.get("window");
+  return {
+    platform: import_react_native.Platform.OS,
+    osVersion: import_react_native.Platform.Version,
+    screenWidth: width,
+    screenHeight: height,
+    pixelRatio: import_react_native.PixelRatio.get(),
+    fontScale: import_react_native.PixelRatio.getFontScale()
+  };
+}
+
+// src/storage/async-storage-queue.ts
+var QUEUE_KEY = "@mushi:offline_queue";
+var AsyncStorageQueue = class {
+  maxSize;
+  apiEndpoint;
+  apiKey;
+  constructor(config) {
+    this.maxSize = config.maxSize ?? 50;
+    this.apiEndpoint = config.apiEndpoint;
+    this.apiKey = config.apiKey;
+  }
+  async enqueue(report) {
+    const AsyncStorage = await this.getAsyncStorage();
+    if (!AsyncStorage) return;
+    const queue = await this.getQueue(AsyncStorage);
+    if (queue.length >= this.maxSize) queue.shift();
+    queue.push({ report, enqueuedAt: Date.now() });
+    await AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(queue));
+  }
+  async flush() {
+    const AsyncStorage = await this.getAsyncStorage();
+    if (!AsyncStorage) return 0;
+    const queue = await this.getQueue(AsyncStorage);
+    if (!queue.length) return 0;
+    let flushed = 0;
+    const remaining = [];
+    for (const item of queue) {
+      try {
+        const res = await fetch(`${this.apiEndpoint}/v1/reports`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Mushi-Api-Key": this.apiKey
+          },
+          body: JSON.stringify(item.report)
+        });
+        if (res.ok) {
+          flushed++;
+        } else {
+          remaining.push(item);
+        }
+      } catch {
+        remaining.push(item);
+        break;
+      }
+    }
+    await AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(remaining));
+    return flushed;
+  }
+  async size() {
+    const AsyncStorage = await this.getAsyncStorage();
+    if (!AsyncStorage) return 0;
+    const queue = await this.getQueue(AsyncStorage);
+    return queue.length;
+  }
+  async getQueue(storage) {
+    try {
+      const raw = await storage.getItem(QUEUE_KEY);
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  }
+  async getAsyncStorage() {
+    try {
+      const mod = await import("@react-native-async-storage/async-storage");
+      return mod.default;
+    } catch {
+      return null;
+    }
+  }
+};
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MushiContext = (0, import_react.createContext)(null);
+function MushiProvider({ children, ...config }) {
+  const consoleRef = (0, import_react.useRef)(null);
+  const networkRef = (0, import_react.useRef)(null);
+  const queueRef = (0, import_react.useRef)(null);
+  const apiEndpoint = config.endpoint ?? "https://api.mushimushi.dev";
+  (0, import_react.useEffect)(() => {
+    if (config.capture?.console !== false) {
+      consoleRef.current = setupConsoleCapture(config.capture?.maxConsoleEntries);
+    }
+    if (config.capture?.network !== false) {
+      networkRef.current = setupNetworkCapture(config.capture?.maxNetworkEntries, apiEndpoint);
+    }
+    queueRef.current = new AsyncStorageQueue({
+      maxSize: config.storage?.maxQueueSize,
+      apiEndpoint,
+      apiKey: config.apiKey
+    });
+    return () => {
+      consoleRef.current?.restore();
+      networkRef.current?.restore();
+    };
+  }, []);
+  const instance = {
+    open: () => {
+    },
+    close: () => {
+    },
+    submitReport: async (data) => {
+      const report = {
+        projectId: config.projectId,
+        ...data,
+        environment: getDeviceInfo(),
+        console_logs: consoleRef.current?.getEntries() ?? [],
+        network_logs: networkRef.current?.getEntries() ?? []
+      };
+      try {
+        const res = await fetch(`${apiEndpoint}/v1/reports`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-Mushi-Api-Key": config.apiKey },
+          body: JSON.stringify(report)
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      } catch {
+        await queueRef.current?.enqueue(report);
+      }
+    },
+    getDeviceInfo,
+    getConsoleEntries: () => consoleRef.current?.getEntries() ?? [],
+    getNetworkEntries: () => networkRef.current?.getEntries() ?? []
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MushiContext.Provider, { value: instance, children });
+}
+function useMushiContext() {
+  return (0, import_react.useContext)(MushiContext);
+}
+
+// src/hooks/useMushi.ts
+function useMushi() {
+  return useMushiContext();
+}
+
+// src/hooks/useMushiReport.ts
+var import_react2 = require("react");
+function useMushiReport() {
+  const mushi = useMushiContext();
+  const submitReport = (0, import_react2.useCallback)(
+    async (data) => {
+      if (!mushi) throw new Error("MushiProvider not found");
+      await mushi.submitReport(data);
+    },
+    [mushi]
+  );
+  return { submitReport };
+}
+
+// src/hooks/useMushiWidget.ts
+var import_react3 = require("react");
+function useMushiWidget() {
+  const mushi = useMushiContext();
+  return {
+    open: (0, import_react3.useCallback)(() => mushi?.open(), [mushi]),
+    close: (0, import_react3.useCallback)(() => mushi?.close(), [mushi])
+  };
+}
+
+// src/capture/navigation-capture.ts
+var import_react4 = require("react");
+function useNavigationCapture(navigationRef) {
+  const historyRef = (0, import_react4.useRef)([]);
+  (0, import_react4.useEffect)(() => {
+    if (!navigationRef?.addListener || !navigationRef?.getCurrentRoute) return;
+    const unsubscribe = navigationRef.addListener("state", () => {
+      const route = navigationRef.getCurrentRoute?.();
+      if (route) {
+        historyRef.current.push({ screen: route.name, timestamp: Date.now() });
+        if (historyRef.current.length > 20) historyRef.current.shift();
+      }
+    });
+    return unsubscribe;
+  }, [navigationRef]);
+  return () => [...historyRef.current];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AsyncStorageQueue,
+  MushiProvider,
+  getDeviceInfo,
+  setupConsoleCapture,
+  setupNetworkCapture,
+  useMushi,
+  useMushiReport,
+  useMushiWidget,
+  useNavigationCapture
+});

package/dist/index.d.cts

@@ -0,0 +1,116 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ConsoleEntry {
+    level: 'log' | 'warn' | 'error';
+    message: string;
+    timestamp: number;
+}
+declare function setupConsoleCapture(maxEntries?: number): {
+    getEntries: () => ConsoleEntry[];
+    clear: () => void;
+    restore: () => void;
+};
+
+interface NetworkEntry {
+    method: string;
+    url: string;
+    status: number | null;
+    duration: number;
+    error?: string;
+    timestamp: number;
+}
+declare function setupNetworkCapture(maxEntries?: number, apiEndpoint?: string): {
+    getEntries: () => NetworkEntry[];
+    clear: () => void;
+    restore: () => void;
+};
+
+interface DeviceInfo {
+    platform: string;
+    osVersion: string | number;
+    screenWidth: number;
+    screenHeight: number;
+    pixelRatio: number;
+    fontScale: number;
+}
+declare function getDeviceInfo(): DeviceInfo;
+
+interface MushiRNConfig {
+    projectId: string;
+    apiKey: string;
+    endpoint?: string;
+    widget?: {
+        trigger?: 'shake' | 'button' | 'both';
+        shakeThreshold?: number;
+        buttonPosition?: 'bottom-right' | 'bottom-left';
+    };
+    capture?: {
+        console?: boolean;
+        network?: boolean;
+        navigation?: boolean;
+        maxConsoleEntries?: number;
+        maxNetworkEntries?: number;
+    };
+    storage?: {
+        maxQueueSize?: number;
+        retryIntervalMs?: number;
+    };
+}
+interface MushiRNInstance {
+    open(): void;
+    close(): void;
+    submitReport(data: {
+        description: string;
+        category: string;
+    }): Promise<void>;
+    getDeviceInfo(): ReturnType<typeof getDeviceInfo>;
+    getConsoleEntries(): ReturnType<ReturnType<typeof setupConsoleCapture>['getEntries']>;
+    getNetworkEntries(): ReturnType<ReturnType<typeof setupNetworkCapture>['getEntries']>;
+}
+declare function MushiProvider({ children, ...config }: MushiRNConfig & {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+declare function useMushi(): MushiRNInstance | null;
+
+declare function useMushiReport(): {
+    submitReport: (data: {
+        description: string;
+        category: string;
+    }) => Promise<void>;
+};
+
+declare function useMushiWidget(): {
+    open: () => void | undefined;
+    close: () => void | undefined;
+};
+
+interface NavigationEntry {
+    screen: string;
+    timestamp: number;
+}
+declare function useNavigationCapture(navigationRef: {
+    getCurrentRoute?: () => {
+        name: string;
+    } | undefined;
+    addListener?: (event: string, cb: () => void) => () => void;
+} | null): () => NavigationEntry[];
+
+declare class AsyncStorageQueue {
+    private maxSize;
+    private apiEndpoint;
+    private apiKey;
+    constructor(config: {
+        maxSize?: number;
+        apiEndpoint: string;
+        apiKey: string;
+    });
+    enqueue(report: Record<string, unknown>): Promise<void>;
+    flush(): Promise<number>;
+    size(): Promise<number>;
+    private getQueue;
+    private getAsyncStorage;
+}
+
+export { AsyncStorageQueue, type ConsoleEntry, type DeviceInfo, MushiProvider, type MushiRNConfig, type MushiRNInstance, type NavigationEntry, type NetworkEntry, getDeviceInfo, setupConsoleCapture, setupNetworkCapture, useMushi, useMushiReport, useMushiWidget, useNavigationCapture };

package/dist/index.d.ts

@@ -0,0 +1,116 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface ConsoleEntry {
+    level: 'log' | 'warn' | 'error';
+    message: string;
+    timestamp: number;
+}
+declare function setupConsoleCapture(maxEntries?: number): {
+    getEntries: () => ConsoleEntry[];
+    clear: () => void;
+    restore: () => void;
+};
+
+interface NetworkEntry {
+    method: string;
+    url: string;
+    status: number | null;
+    duration: number;
+    error?: string;
+    timestamp: number;
+}
+declare function setupNetworkCapture(maxEntries?: number, apiEndpoint?: string): {
+    getEntries: () => NetworkEntry[];
+    clear: () => void;
+    restore: () => void;
+};
+
+interface DeviceInfo {
+    platform: string;
+    osVersion: string | number;
+    screenWidth: number;
+    screenHeight: number;
+    pixelRatio: number;
+    fontScale: number;
+}
+declare function getDeviceInfo(): DeviceInfo;
+
+interface MushiRNConfig {
+    projectId: string;
+    apiKey: string;
+    endpoint?: string;
+    widget?: {
+        trigger?: 'shake' | 'button' | 'both';
+        shakeThreshold?: number;
+        buttonPosition?: 'bottom-right' | 'bottom-left';
+    };
+    capture?: {
+        console?: boolean;
+        network?: boolean;
+        navigation?: boolean;
+        maxConsoleEntries?: number;
+        maxNetworkEntries?: number;
+    };
+    storage?: {
+        maxQueueSize?: number;
+        retryIntervalMs?: number;
+    };
+}
+interface MushiRNInstance {
+    open(): void;
+    close(): void;
+    submitReport(data: {
+        description: string;
+        category: string;
+    }): Promise<void>;
+    getDeviceInfo(): ReturnType<typeof getDeviceInfo>;
+    getConsoleEntries(): ReturnType<ReturnType<typeof setupConsoleCapture>['getEntries']>;
+    getNetworkEntries(): ReturnType<ReturnType<typeof setupNetworkCapture>['getEntries']>;
+}
+declare function MushiProvider({ children, ...config }: MushiRNConfig & {
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+declare function useMushi(): MushiRNInstance | null;
+
+declare function useMushiReport(): {
+    submitReport: (data: {
+        description: string;
+        category: string;
+    }) => Promise<void>;
+};
+
+declare function useMushiWidget(): {
+    open: () => void | undefined;
+    close: () => void | undefined;
+};
+
+interface NavigationEntry {
+    screen: string;
+    timestamp: number;
+}
+declare function useNavigationCapture(navigationRef: {
+    getCurrentRoute?: () => {
+        name: string;
+    } | undefined;
+    addListener?: (event: string, cb: () => void) => () => void;
+} | null): () => NavigationEntry[];
+
+declare class AsyncStorageQueue {
+    private maxSize;
+    private apiEndpoint;
+    private apiKey;
+    constructor(config: {
+        maxSize?: number;
+        apiEndpoint: string;
+        apiKey: string;
+    });
+    enqueue(report: Record<string, unknown>): Promise<void>;
+    flush(): Promise<number>;
+    size(): Promise<number>;
+    private getQueue;
+    private getAsyncStorage;
+}
+
+export { AsyncStorageQueue, type ConsoleEntry, type DeviceInfo, MushiProvider, type MushiRNConfig, type MushiRNInstance, type NavigationEntry, type NetworkEntry, getDeviceInfo, setupConsoleCapture, setupNetworkCapture, useMushi, useMushiReport, useMushiWidget, useNavigationCapture };

package/dist/index.js

@@ -0,0 +1,292 @@
+// src/provider.tsx
+import { createContext, useContext, useEffect, useRef } from "react";
+
+// src/capture/console-capture.ts
+function setupConsoleCapture(maxEntries = 100) {
+  const entries = [];
+  const methods = ["log", "warn", "error"];
+  const originals = /* @__PURE__ */ new Map();
+  for (const method of methods) {
+    const original = console[method].bind(console);
+    originals.set(method, original);
+    console[method] = (...args) => {
+      entries.push({
+        level: method,
+        message: args.map(String).join(" ").slice(0, 500),
+        timestamp: Date.now()
+      });
+      if (entries.length > maxEntries) entries.shift();
+      original(...args);
+    };
+  }
+  return {
+    getEntries: () => [...entries],
+    clear: () => {
+      entries.length = 0;
+    },
+    restore: () => {
+      for (const method of methods) {
+        const orig = originals.get(method);
+        if (orig) console[method] = orig;
+      }
+    }
+  };
+}
+
+// src/capture/network-capture.ts
+function setupNetworkCapture(maxEntries = 50, apiEndpoint) {
+  const entries = [];
+  const origFetch = globalThis.fetch;
+  globalThis.fetch = async function(input, init) {
+    const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+    const method = init?.method ?? "GET";
+    if (apiEndpoint && url.includes(apiEndpoint)) {
+      return origFetch.apply(this, [input, init]);
+    }
+    const start = Date.now();
+    try {
+      const res = await origFetch.apply(this, [input, init]);
+      entries.push({
+        method,
+        url: stripQueryParams(url),
+        status: res.status,
+        duration: Date.now() - start,
+        timestamp: start
+      });
+      if (entries.length > maxEntries) entries.shift();
+      return res;
+    } catch (err) {
+      entries.push({
+        method,
+        url: stripQueryParams(url),
+        status: null,
+        duration: Date.now() - start,
+        error: String(err),
+        timestamp: start
+      });
+      if (entries.length > maxEntries) entries.shift();
+      throw err;
+    }
+  };
+  return {
+    getEntries: () => [...entries],
+    clear: () => {
+      entries.length = 0;
+    },
+    restore: () => {
+      globalThis.fetch = origFetch;
+    }
+  };
+}
+function stripQueryParams(url) {
+  try {
+    const u = new URL(url);
+    return `${u.origin}${u.pathname}`;
+  } catch {
+    return url.split("?")[0];
+  }
+}
+
+// src/capture/device-info.ts
+import { Platform, Dimensions, PixelRatio } from "react-native";
+function getDeviceInfo() {
+  const { width, height } = Dimensions.get("window");
+  return {
+    platform: Platform.OS,
+    osVersion: Platform.Version,
+    screenWidth: width,
+    screenHeight: height,
+    pixelRatio: PixelRatio.get(),
+    fontScale: PixelRatio.getFontScale()
+  };
+}
+
+// src/storage/async-storage-queue.ts
+var QUEUE_KEY = "@mushi:offline_queue";
+var AsyncStorageQueue = class {
+  maxSize;
+  apiEndpoint;
+  apiKey;
+  constructor(config) {
+    this.maxSize = config.maxSize ?? 50;
+    this.apiEndpoint = config.apiEndpoint;
+    this.apiKey = config.apiKey;
+  }
+  async enqueue(report) {
+    const AsyncStorage = await this.getAsyncStorage();
+    if (!AsyncStorage) return;
+    const queue = await this.getQueue(AsyncStorage);
+    if (queue.length >= this.maxSize) queue.shift();
+    queue.push({ report, enqueuedAt: Date.now() });
+    await AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(queue));
+  }
+  async flush() {
+    const AsyncStorage = await this.getAsyncStorage();
+    if (!AsyncStorage) return 0;
+    const queue = await this.getQueue(AsyncStorage);
+    if (!queue.length) return 0;
+    let flushed = 0;
+    const remaining = [];
+    for (const item of queue) {
+      try {
+        const res = await fetch(`${this.apiEndpoint}/v1/reports`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Mushi-Api-Key": this.apiKey
+          },
+          body: JSON.stringify(item.report)
+        });
+        if (res.ok) {
+          flushed++;
+        } else {
+          remaining.push(item);
+        }
+      } catch {
+        remaining.push(item);
+        break;
+      }
+    }
+    await AsyncStorage.setItem(QUEUE_KEY, JSON.stringify(remaining));
+    return flushed;
+  }
+  async size() {
+    const AsyncStorage = await this.getAsyncStorage();
+    if (!AsyncStorage) return 0;
+    const queue = await this.getQueue(AsyncStorage);
+    return queue.length;
+  }
+  async getQueue(storage) {
+    try {
+      const raw = await storage.getItem(QUEUE_KEY);
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  }
+  async getAsyncStorage() {
+    try {
+      const mod = await import("@react-native-async-storage/async-storage");
+      return mod.default;
+    } catch {
+      return null;
+    }
+  }
+};
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+var MushiContext = createContext(null);
+function MushiProvider({ children, ...config }) {
+  const consoleRef = useRef(null);
+  const networkRef = useRef(null);
+  const queueRef = useRef(null);
+  const apiEndpoint = config.endpoint ?? "https://api.mushimushi.dev";
+  useEffect(() => {
+    if (config.capture?.console !== false) {
+      consoleRef.current = setupConsoleCapture(config.capture?.maxConsoleEntries);
+    }
+    if (config.capture?.network !== false) {
+      networkRef.current = setupNetworkCapture(config.capture?.maxNetworkEntries, apiEndpoint);
+    }
+    queueRef.current = new AsyncStorageQueue({
+      maxSize: config.storage?.maxQueueSize,
+      apiEndpoint,
+      apiKey: config.apiKey
+    });
+    return () => {
+      consoleRef.current?.restore();
+      networkRef.current?.restore();
+    };
+  }, []);
+  const instance = {
+    open: () => {
+    },
+    close: () => {
+    },
+    submitReport: async (data) => {
+      const report = {
+        projectId: config.projectId,
+        ...data,
+        environment: getDeviceInfo(),
+        console_logs: consoleRef.current?.getEntries() ?? [],
+        network_logs: networkRef.current?.getEntries() ?? []
+      };
+      try {
+        const res = await fetch(`${apiEndpoint}/v1/reports`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", "X-Mushi-Api-Key": config.apiKey },
+          body: JSON.stringify(report)
+        });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      } catch {
+        await queueRef.current?.enqueue(report);
+      }
+    },
+    getDeviceInfo,
+    getConsoleEntries: () => consoleRef.current?.getEntries() ?? [],
+    getNetworkEntries: () => networkRef.current?.getEntries() ?? []
+  };
+  return /* @__PURE__ */ jsx(MushiContext.Provider, { value: instance, children });
+}
+function useMushiContext() {
+  return useContext(MushiContext);
+}
+
+// src/hooks/useMushi.ts
+function useMushi() {
+  return useMushiContext();
+}
+
+// src/hooks/useMushiReport.ts
+import { useCallback } from "react";
+function useMushiReport() {
+  const mushi = useMushiContext();
+  const submitReport = useCallback(
+    async (data) => {
+      if (!mushi) throw new Error("MushiProvider not found");
+      await mushi.submitReport(data);
+    },
+    [mushi]
+  );
+  return { submitReport };
+}
+
+// src/hooks/useMushiWidget.ts
+import { useCallback as useCallback2 } from "react";
+function useMushiWidget() {
+  const mushi = useMushiContext();
+  return {
+    open: useCallback2(() => mushi?.open(), [mushi]),
+    close: useCallback2(() => mushi?.close(), [mushi])
+  };
+}
+
+// src/capture/navigation-capture.ts
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+function useNavigationCapture(navigationRef) {
+  const historyRef = useRef2([]);
+  useEffect2(() => {
+    if (!navigationRef?.addListener || !navigationRef?.getCurrentRoute) return;
+    const unsubscribe = navigationRef.addListener("state", () => {
+      const route = navigationRef.getCurrentRoute?.();
+      if (route) {
+        historyRef.current.push({ screen: route.name, timestamp: Date.now() });
+        if (historyRef.current.length > 20) historyRef.current.shift();
+      }
+    });
+    return unsubscribe;
+  }, [navigationRef]);
+  return () => [...historyRef.current];
+}
+export {
+  AsyncStorageQueue,
+  MushiProvider,
+  getDeviceInfo,
+  setupConsoleCapture,
+  setupNetworkCapture,
+  useMushi,
+  useMushiReport,
+  useMushiWidget,
+  useNavigationCapture
+};

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@mushi-mushi/react-native",
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "React Native SDK for Mushi Mushi — shake-to-report, bottom sheet widget, full context capture",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "test": "echo 'no tests yet'",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.72",
+    "@react-navigation/native": ">=6",
+    "@react-native-async-storage/async-storage": ">=1.19"
+  },
+  "peerDependenciesMeta": {
+    "@react-navigation/native": {
+      "optional": true
+    },
+    "@react-native-async-storage/async-storage": {
+      "optional": true
+    }
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^19.1.4",
+    "react": "^19.1.0",
+    "react-native": "^0.79.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "author": "Kenji Sakuramoto",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kensaurus/mushi-mushi.git",
+    "directory": "packages/react-native"
+  },
+  "homepage": "https://github.com/kensaurus/mushi-mushi/tree/main/packages/react-native#readme",
+  "bugs": {
+    "url": "https://github.com/kensaurus/mushi-mushi/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "mushi-mushi",
+    "bug-reporting",
+    "sdk"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "type": "module"
+}