@tryproduck/react-native

Produck in-app feedback for React Native. Users capture the current screen, annotate it (markers, highlights, freehand drawing), and submit — with optional frame replay of the last 30 seconds and component-level targeting so feedback lands on the exact UI element.

Works in bare React Native apps, Expo dev clients, managed Expo apps, and Expo Go.

Install

One command for every React Native app — bare, Expo, dev client, or Expo Go:

npm i @tryproduck/react-native react-native-svg react-native-safe-area-context react-native-view-shot@^4

Bare React Native: cd ios && pod install. Expo: restart the dev server (npx expo install react-native-svg react-native-safe-area-context react-native-view-shot instead if you prefer SDK-pinned versions of the native modules).

Setup

Grab a project key from the Produck dashboard (Project → API keys → Generate).

import { SafeAreaProvider } from "react-native-safe-area-context";
import { ProduckProvider } from "@tryproduck/react-native";

export default function Root() {
  return (
    <SafeAreaProvider>
      <ProduckProvider
        config={{
          projectKey: "pk_live_...",
          appId: "com.yourco.app",
        }}
      >
        <App />
      </ProduckProvider>
    </SafeAreaProvider>
  );
}

A floating launcher appears in development and production builds; useProduckFeedback().open() triggers capture programmatically.

Config

| Option | Type | Notes | | --- | --- | --- | | projectKey | string | Required. pk_live_... (or pk_test_...) from the dashboard. | | appId | string | Required. Your bundle id; groups feedback like a web domain. | | screen | string? | Current screen name, recorded with replays. | | user | { id?, email?, name? }? | Attributes feedback to your end user. | | replay | boolean? | Rolling 30s frame replay attached to submissions. On by default; false opts out. | | launcher | boolean? | Show the floating button. Default on. | | buildId | string? | CI build id — pairs submissions with an uploaded build manifest (below). | | analyticsOptOut | boolean? | Disable Produck's own product analytics for this install. | | onError | (error) => void | Capture/submit errors (defaults to console warnings). | | apiBase | string? | Defaults to https://tryproduck.com/api. Override only for a self-hosted or staging backend. |

Component targeting (recommended default)

The Babel plugin is the standard setup for React Native: it auto-wraps your host elements so every annotation resolves to the component it lands on, with no manual markup. Without it the SDK still captures feedback, but annotations are coordinate-only and bind to no component.

Run npx produck-rn init to add it to your Babel config (idempotent; prints the snippet if it can't edit the config safely), or add it yourself:

// babel.config.js
module.exports = {
  presets: ["babel-preset-expo"],
  plugins: ["@tryproduck/react-native/babel"],
};

For custom components, wrap manually:

import { ProduckTarget } from "@tryproduck/react-native";

<ProduckTarget sourceId="checkout.submit" hostType="CheckoutButton">
  <CheckoutButton />
</ProduckTarget>

Exact-source binding (optional, CI)

Upload a build manifest during CI and Produck resolves each annotated component to its exact source location for that build:

produck-rn manifest \
  --root . \
  --build-id "$BUILD_ID" \
  --app-id com.yourco.app \
  --revision "$GIT_SHA" \
  --output .produck/manifest.json

PRODUCK_PROJECT_KEY=pk_live_... produck-rn upload-manifest .produck/manifest.json

Pass the same buildId in the ProduckProvider config. Manifests are immutable per build id — re-uploading identical content succeeds idempotently, different content is rejected with 409.

Permissions

None. There is no microphone or camera usage; screenshots and replay frames are rendered from your app's own view hierarchy.

License

MIT — see LICENSE. Bundles perfect-freehand (MIT) and icon glyphs from lucide (ISC/MIT).