Install for Expo and React Native

The component works in Expo Go on iOS and Android. It only uses parts that Expo Go includes: react-native-view-shot, expo-device and expo-constants.

Not on the web. The component does not work in Expo for the web (expo start --web). Do not test it there. A coding agent must not test through the web, and must never switch off the security of a browser (for example --disable-web-security) to make a request work: reports sent that way arrive as the wrong platform. Test in Expo Go on a simulator or a device, and ask the builder to tap (see step 5).

You need a Nitpick account with a running subscription to get an app and a public key. nitpick login opens the browser where you create the account and start the subscription; see Billing and limits. The component itself needs nothing but the public key.

1. Add the package

npx expo install @nitpickhq/react-native react-native-view-shot expo-device expo-constants

2. Wrap your app

With Expo Router, in app/_layout.tsx:

import { Stack, usePathname } from "expo-router";
import { NitpickProvider, useNitpickScreen } from "@nitpickhq/react-native";

function ScreenName() {
  useNitpickScreen(usePathname());
  return null;
}

export default function RootLayout() {
  return (
    <NitpickProvider appKey="npk_YOUR_PUBLIC_KEY">
      <ScreenName />
      <Stack />
    </NitpickProvider>
  );
}

The public key is safe to ship in the app. It can only create reports for this one app.

With Expo Router the screen name is the route path (/settings/profile), but only through the ScreenName component above: the component does not read the router by itself, and without it the screen field of every report stays empty. With React Navigation, pass your navigation container ref to the screen name hook (see Screen names).

Use your own button instead of the edge tab:

import { Button } from "react-native";
import { useNitpick } from "@nitpickhq/react-native";

function FeedbackButton() {
  const { open } = useNitpick();
  return <Button title="Send feedback" onPress={open} />;
}

Hide the edge tab with options={{ tab: false }} on the provider. Your own button does nothing while no settings have been fetched yet, while the app is switched off, or when both kinds are off; useNitpick().available tells you, so the button can hide itself.

The component asks the platform for your settings when the app starts, and keeps them in memory while the app runs. After a cold start the tab appears once that request has succeeded. Pass options={{ dryRun: true }} to try it without a network: the tab shows at once and nothing is sent.

3. Name elements

Use a name that points at the code, such as Home/StartButton.

import { NitpickElement } from "@nitpickhq/react-native";

<NitpickElement name="Home/StartButton">
  <Pressable onPress={start}><Text>Start workout</Text></Pressable>
</NitpickElement>

If you cannot wrap an element, a testID works too: the component reads it as a fallback name.

4. Mask sensitive parts

import { NitpickMask } from "@nitpickhq/react-native";

<NitpickMask><Text>{account.iban}</Text></NitpickMask>

5. Test it

Run the app in Expo Go (not on the web), wait a moment for the settings to arrive, open the tab, tap "Point at something", tap an element and send. The report shows up in your dashboard, and in nitpick feedback list.

Next: Theme, where you choose a color and a font, and Settings.