@koderlabs/tasks-sdk-rn-reporter

In-app bug reporter for React Native — pairs with @koderlabs/tasks-sdk-rn.

Renders a <Modal> with a description field + optional email + screenshot preview, captured via react-native-view-shot before the modal opens (so the modal itself never appears in the screenshot). Submits as a kind: 'bug_report' event through the core SDK's multipart ingest endpoint.

Install

npm install @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter \
            react-native-view-shot
# optional — Android shake + iOS screenshot prompt
npm install expo-sensors expo-screen-capture
# optional — annotator (highlight + redact tool over the screenshot)
npm install react-native-svg

Using pnpm or yarn:

pnpm add @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter react-native-view-shot
# or
yarn add @koderlabs/tasks-sdk-rn @koderlabs/tasks-sdk-rn-reporter react-native-view-shot

Usage

import { useRef } from 'react';
import { View } from 'react-native';
import { init } from '@koderlabs/tasks-sdk-rn';
import { initReporter, ReporterRoot } from '@koderlabs/tasks-sdk-rn-reporter';

const sdk = init({ projectId: 'FE', accessKey: 'sk_…' });

export default function App() {
  const rootRef = useRef<View>(null);
  const reporter = useRef(
    initReporter(sdk, {
      captureRef: rootRef,
      enableShakeGesture: true,
      enableScreenshotDetection: true,  // iOS only
      collectEmail: true,
    }),
  );

  return (
    <View ref={rootRef} style={{ flex: 1 }}>
      {/* your app */}
      <ReporterRoot />
    </View>
  );
}

Call reporter.current.show() from any UI element (FAB, debug menu, etc.) to open the modal manually.

Options

| Option | Type | Default | Description | |---|---|---|---| | captureRef | RefObject<View> | — | Root view to snapshot. Omit for text-only reports. | | enableShakeGesture | boolean | false | iOS: native shake. Android: requires expo-sensors. | | enableScreenshotDetection | boolean | false | iOS only — Alert on system screenshot. Requires expo-screen-capture. | | defaultIssueTypeId | string | — | Pre-fill issue type on created ticket. | | defaultPriorityId | string | — | Pre-fill priority on created ticket. | | collectEmail | boolean | false | Show email field in modal. | | silent | boolean | false | Suppress success/error Alerts. | | customData | Record<string, unknown> | — | Merged into every report payload. |

Platform availability

| Feature | iOS | Android | |---|---|---| | Modal + screenshot | ✅ | ✅ | | Shake gesture | ✅ (native) | ⚠️ requires expo-sensors | | Screenshot detection | ✅ requires expo-screen-capture | ❌ no reliable hook |

Annotator (Highlight + Redact)

When react-native-svg is installed, the modal shows an "Annotate" button next to the captured screenshot. Tapping it opens a full-screen overlay where the user can:

• Highlight — draw a red outlined rect to call attention to a region
• Redact — drag a solid black box over a region that should NOT be shipped (passwords, PII, etc.)
• Undo / Clear — manage the stack of committed rects
• Done / Cancel — return to the bug-report modal

Gestures use RN's built-in PanResponder (no extra dep). Rect coordinates are normalized 0..1 against the captured image dimensions, so the same DrawCommand[] shape is portable across web + RN.

v1 limitation — annotations ship as commands, not pixels. The raw screenshot is uploaded as-is; the payload.annotations: DrawCommand[] array is included alongside it so the backend can render baked annotations later. This keeps the mobile bundle small (no canvas pixel-bashing on-device) at the cost of a server-side compositing step that is currently pending.

import type { DrawCommand } from '@koderlabs/tasks-sdk-rn-reporter';
// Use the standalone <Annotator /> component directly if you want a custom flow.
import { Annotator } from '@koderlabs/tasks-sdk-rn-reporter';

react-native-svg is an optional peer dep — when not installed, the "Annotate" button is suppressed and the rest of the reporter works unchanged.

Known limits (MVP)

• Annotator ships Box + Redact in v1; Arrow tool deferred.
• Server-side annotation bake-in is deferred — commands shipped raw alongside the screenshot for now.
• No console / network ring buffer included in the payload yet — when you also use @koderlabs/tasks-sdk-rn the breadcrumbs are attached automatically by the core client; this package does not duplicate them.
• The reporter modal must be mounted via <ReporterRoot /> somewhere in the React tree. If you forget to mount it, show() is a no-op.
• Android screenshot-detection is not supported — OS does not expose a hook uniformly across OEMs.
• Runtime config from the admin (e.g. enableShakeGesture toggle) is not yet fetched by sdk-rn; pass options explicitly to initReporter() for now.

Suite overview

Full SDK suite map + platform availability matrix: docs/sdk/overview.md.

License

KoderLabs proprietary. See LICENSE for terms. Use of this package requires a separate signed written agreement with KoderLabs; access alone confers no rights.

Licensing inquiries: [email protected]