Skip to content

Claude Code + Expo

In-app feedback for Expo, fixed by Claude Code

You are building an Expo or React Native app with Claude Code. Claude Code runs in your terminal next to your code, so it can run the CLI login, edit your project and read feedback in one session.

1. Paste one prompt into Claude Code

Open a terminal in your project folder, run claude, and paste the prompt at the Claude Code prompt.

Add Nitpick feedback to this app. Fetch https://nitpickhq.com/install.md and follow every step.

Claude Code follows install.md. nitpick login opens your browser, where you create an account and start the subscription, and Claude Code waits for that before it adds the component.

In manual permission mode Claude Code asks before it runs a shell command, except for a built-in set of read-only commands. Choosing "Yes, and don't ask again" keeps that command allowed for the repository, and Shift+Tab switches the permission mode of the session.

2. What lands in your Expo code

Roughly this. Claude Code writes it, you review it.

  1. Install the packages with Expo's installer so the versions match your SDK, then add the Nitpick package.
  2. Wrap the root layout in NitpickProvider with your public app key.
  3. Wrap buttons, fields and cards in NitpickElement and give each a name.
npx expo install react-native-view-shot expo-device expo-constants npm install @nitpickhq/react-native
app/_layout.tsx
import { Stack, usePathname } from "expo-router";
import { NitpickProvider, NitpickElement, 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>
  );
}

// Name what users may point at
<NitpickElement name="Home/StartButton">
  <Pressable onPress={start}><Text>Start</Text></Pressable>
</NitpickElement>

Works in Expo Go. With Expo Router, render a small ScreenName component inside the provider that calls useNitpickScreen(usePathname()). Details in Install for Expo and React Native.

3. Give Claude Code the MCP server

Claude Code adds a stdio server with a single command. Everything after the double dash is the server command and is passed through untouched.

claude mcp add nitpick -- npx -y @nitpickhq/cli mcp

By default the server is stored for the current project only (local scope, in ~/.claude.json). Add --scope project to write a .mcp.json file you can commit, or --scope user to have it in every project.

Run claude mcp list, or type /mcp inside a session to see whether the server is connected.

4. Start the dev server with Claude Code

npx expo start runs the dev server that Expo Go connects to. The run commands build the native app locally and need Xcode or Android Studio.

terminal
npx expo start
# or build the native app locally
npx expo run:ios
npx expo run:android

It runs npx expo install and npm install after you allow them, then starts the dev server. Allow the install commands for the repository once and later sessions skip the prompt.

5. Let Claude Code fix the reports

Start a session in your project and say: check Nitpick for open feedback, fix what you can and resolve it. It calls list_feedback, reads each report with its screenshot through get_feedback, and finds the code. An element name such as checkout.pay-button leads to the NitpickElement that has that name, and a screen name is the route path, if you pass usePathname() to useNitpickScreen. When the fix is done it calls resolve_feedback.

Working with Claude Code

Good to know for Expo

$9 a month per account. Unlimited apps.

Get started

Related

Sources