@outcode/bug-reporter-native

In-app bug reporter for React Native & Expo. A draggable floating button captures the current screen, lets users annotate it (draw, arrow, box, blur, text), set a severity and type, and file a report to ClickUp or any custom backend.

Part of the OutCode Bug Reporter monorepo. For React web, see @outcode/bug-reporter-web.

Features

• 🐛 Draggable floating button that snaps to the screen edge
• ✏️ Annotate — pen, arrow, box, blur/redact, and text on the captured screenshot
• 🧭 Auto-captured context — platform, OS, screen, density, orientation, language, color scheme… consent-free
• 🎨 Themeable — Indigo / Noir / Mint presets or your own tokens
• 📡 Offline retry queue, breadcrumb capture, screenshot compression
• 🧩 Pluggable backends — ClickUp out of the box, or any repository / HTTP endpoint
• 📦 ESM + CJS, fully typed; native peers are externalized (never bundled)

Install

npm install @outcode/bug-reporter-native @outcode/bug-reporter-core
# peers (use `npx expo install …` on Expo):
npm install react-native-svg react-native-view-shot react-native-safe-area-context

Requires a dev build / bare workflow — react-native-view-shot ships native code that is not in the Expo Go sandbox. Screen capture silently returns nothing in Expo Go; run a dev build (expo run:ios / expo run:android / EAS Build).

Quick start

Wrap your app so the reporter can screenshot the current screen, then mount the button:

import {
  BugReporterButton,
  BugReporterCaptureRefProvider,
  BugReporterScreenCaptureView,
} from '@outcode/bug-reporter-native';
import { ClickUpBugReporterRepository } from '@outcode/bug-reporter-core';

export default function App() {
  return (
    <BugReporterCaptureRefProvider>
      <BugReporterScreenCaptureView style={{ flex: 1 }}>
        {/* …your navigator / screens… */}
      </BugReporterScreenCaptureView>

      <BugReporterButton
        config={{
          appName: 'My Mobile App',
          appVersion: '1.0.0',
          theme: 'indigo',
          repository: new ClickUpBugReporterRepository({ apiKey, problemListId, suggestionListId }),
        }}
      />
    </BugReporterCaptureRefProvider>
  );
}

WiFi / cellular context (optional)

The reporter auto-captures consent-free context. To add network type on native, inject it via collectContext (e.g. with expo-network):

import * as Network from 'expo-network';

config={{
  // …
  collectContext: async () => {
    const n = await Network.getNetworkStateAsync();
    return { Network: n.type, Online: String(n.isConnected) };
  },
}}

Configuration

Full BugReporterConfig reference lives in the root README.

License

MIT © OutCode Software