# 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](/docs/billing). The component itself needs nothing but the public key.

## 1. Add the package

```bash
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`:

```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](/docs/screens-elements-masking)).

Use your own button instead of the edge tab:

```tsx
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](/docs/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`.

```tsx
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

```tsx
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](/docs/theme), where you choose a color and a font, and [Settings](/docs/settings).