Skip to content

Guide / Expo

How to add in-app feedback to an Expo app

Users notice problems in your Expo app long before they write you an email about them. A small feedback tab on the screen edge catches that moment. This guide adds one with the Nitpick React Native package, which works in Expo Go and needs no config plugin. A coding agent can do every step from one prompt: see Claude Code with Expo or Cursor with Expo.

What your users will see

A small tab labelled Feedback sits on the screen edge. Tapping it opens a panel with two choices. General is a comment about the app. Point at something lets the user tap the part of the screen they mean, then shows a preview of the screenshot, a button to remove it, a comment field and Send. The panel follows the device language, in 20 languages, and says under Send: "Your feedback goes to the maker of this app."

1. Install the packages

Use Expo's installer for the packages that must match your SDK version, then add the Nitpick package:

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

react-native-view-shot takes the screenshot, and expo-device and expo-constants give the device model, the OS version and your app version. All three are included in Expo Go.

2. Wrap your app

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 provider renders the tab, the pointing layer and the form, so it has to wrap the whole app. The app key is public and can only create reports for one app. You get it by creating an app: npx -y @nitpickhq/cli@latest login opens your browser, where you create an account and start the subscription. Then npx -y @nitpickhq/cli@latest init in the app folder creates the app and prints its public key.

3. Name what users may point at

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

<NitpickElement name="checkout.pay-button">
  <Pressable onPress={pay}><Text>Pay</Text></Pressable>
</NitpickElement>

The component does not read the router for you. With Expo Router the ScreenName component above passes the route path (usePathname()) to useNitpickScreen, so you only name elements. With React Navigation, pass the current route name to useNitpickScreen the same way. A tap picks the smallest named element that contains it, then the nearest one within 44 points, and otherwise only the screen. See screens, elements and masking.

4. Try it in Expo Go

Start the dev server with npx expo start, open the app in Expo Go, tap the Feedback tab, choose Point at something, tap your Pay button and press Send. To see the panel without sending anything, set dryRun: true in the provider options while you test; the form builds the report and passes it to your onDryRun function instead.

Limits to know about

Screenshots come from react-native-view-shot: a ScrollView shows only its visible part, and video, maps and web views can come out empty. This guide was checked in Expo Go on iOS. A plain React Native app without Expo modules has not been tested, so it is not covered here.

Where the reports go

Reports show up in your dashboard, in nitpick feedback list and in your coding agent through MCP. The price is $9 a month per account, for unlimited apps. Next, read how the screenshot works in Expo or how to collect bug reports in Expo. Install details: Install for Expo.

$9 a month per account. Unlimited apps.

Get started

Related

Sources