Docs › Mobile apps

React Native

Expo or bare, on the New Architecture: wrap the app, tap a view, and the note has its component and file.

People tap a view in your running React Native app and write what should change, and the note reaches your coding agent (Claude Code, Codex, Cursor and others) over MCP through a Notato server. Each note has a screenshot with the view outlined and numbered, a crop of the view, its text, test id and label, the app's recent warnings, and its component: the one you wrote, the components around it, and the file and line it is in (ProductCard in App › Shop › ProductList › ProductCard, at src/App.tsx:18:1).

It is the same client as the Swift, Android, Flutter and .NET MAUI SDKs: the toolbar and its ⋯ menu, the three modes, threads and replies, People only and asides, revert, an offline queue, masking, and a runtime API. Variants are web-only.

React Native 0.76 and later, with the New Architecture, in Expo (Expo Go included) or a bare app.

Screenshot size. New captures prefer WebP at quality 85 when it is smaller than PNG, after privacy masking and at the same dimensions. PNG remains a fallback, and existing queues and bundles stay readable. Rebuild the native app (and install iOS pods) to enable the optional encoder; Expo Go and older app binaries continue with PNG. See screenshot storage.

Set up#

npm i -D notato
npx expo install @notato/react-native react-native-view-shot expo-file-system expo-sharing
npx notato        # the server, the board and MCP for your agent

Wrap your app in it:

import { Notato } from "@notato/react-native"
import { expoStorage } from "@notato/react-native/expo"

export default function App() {
    return (
        <Notato project="shop" appName="Shop" storage={expoStorage} route={() => navigationRef.getCurrentRoute()?.name}>
            <Navigation />
        </Notato>
    )
}

A small dark toolbar appears in the corner. Drag it anywhere; it stays where you leave it, and its chevron folds it into a round button. Tap Annotate, tap a view, write the note, and press Send. A numbered pin marks it, and turns amber when the agent is on it and green when it is resolved; tap a pin for the note's card. Then ask your agent to "watch Notato and fix what comes in". Everything else is in the toolbar's ⋯ sheet: pins, the notes list, settings, hiding the toolbar or turning Notato off, and the server's state, with Retry when it cannot be reached. React Native's developer menu has Notato: annotate and Notato: show or hide the toolbar.

Storage. storage={expoStorage} keeps notes not sent yet, test-mode notes, their screenshots and people's choices (on or off, the toolbar's place, a name) in the app's documents folder, and shares a test-mode package through the share sheet. It needs expo-file-system and expo-sharing, which work in Expo Go and in any app with Expo modules. Without it, all of that lasts until the app restarts. A bare app without Expo modules can pass its own StorageProvider: its open(project) returns a NotatoStorage, and both types are exported.

The documents folder is in the device's backups (iCloud, Android's auto backup), and Expo cannot keep one file out of them, so a tester's screenshots can end up there. To keep them out, exclude the notato folder in your Android backup rules (<exclude domain="file" path="notato/" /> in dataExtractionRules and fullBackupContent), or pass a StorageProvider that writes where backups do not reach.

Reaching the server. The default is http://localhost:4747. The iOS simulator reaches it as it is. The Android emulator, and a phone plugged in over USB, reach it once the port is forwarded:

adb reverse tcp:4747 tcp:4747

A phone on Wi-Fi needs the server's dev tunnel: pass its URL as server and the device token as token, in development builds only. The device token opens notato dev on your machine to whoever has it, so keep it out of anything you hand to others: never put it in an EXPO_PUBLIC_ variable (Expo writes those into every bundle, release builds included), and never commit it. Read it from a file your repository ignores, required only in development, which Metro leaves out of a release bundle:

const tunnel = __DEV__ ? require("./notato.local.json") : {}   // { "server": "https://…devtunnels.ms", "token": "notato_device_…" }

<Notato project="shop" server={tunnel.server} token={tunnel.token} storage={expoStorage}>

Notato never sends a token from a release build unless you set allowTokenInRelease, and never the device token, or any token to a dev tunnel, whatever you set.

Builds for testers. A build you hand out (TestFlight, an internal track, a device farm) holds whatever is in it, and anyone with it can read that out. Give it a shared server (notato serve) and a capture-only project token, and set allowTokenInRelease:

npx notato token create shop --purpose app --capture-only --expires 30

A capture-only token can send notes and nothing else: one read out of the app cannot read, change or delete anyone's feedback. Notato asks the server what the token may do before it connects, then sends notes (and those kept on the device) without following the project; replies, status and revert are on the board, and a note's card says so. A test-mode package uploads its captured notes to the configured server too; it grants no access to existing feedback.

Props#

In a release build <Notato> is your app and nothing else, unless enabled is true when it mounts (that is decided once, so the app is never mounted again because Notato came or went). Mounting <Notato> again with the same props, as React's StrictMode does, leaves Notato running, with the notes it had.

At runtime: notato#

import { notato, useNotato } from "@notato/react-native"

const state = useNotato()
<Switch value={state.enabled} onValueChange={(on) => (on ? notato.enable() : notato.disable())} />

The example's Feedback card switches Notato and its toolbar, and annotates a price from code.

What the agent gets#

A view is picked the way React Native's own Element Inspector picks one, through the development build's inspector, so it is the view under your finger: the innermost one. Parent in the composer steps out to the view around it. The note says:

• The view: what kind it is (Text, View, Image, TextInput…), its text, testID (as the test id, when it is at most 100 letters, digits and _ - . @ /, which a selector can name), accessibilityLabel, accessibilityRole and nativeID, and a selector made of those (ProductCard > View#pay). Nothing of a private view's text or ids (below).
• The component: the innermost component of yours that rendered it, and the ones around it, outermost first. React Native's, React Navigation's and Expo's own components are left out.
• Where it is written: Metro maps the component stack back to your files, so the note gives the file and line of the component the view belongs to. The path is the one on your machine, where the agent works.
• Screenshots: the screen as the person saw it, with the view outlined and numbered, the toolbar left out and private views covered, and a crop of the view.
• Context: the device (the platform react-native, OS and version, React Native's version, the window's size and pixel ratio), the app's recent warnings and errors (context.console), and requests the app recorded (context.network). Credentials are blanked out of the messages (Authorization, cookies, API keys, tokens and passwords in a logged object, and Bearer … in text), and a request's address is kept without its query string or a user name and password.

What is never recorded#

• Password fields (secureTextEntry), always: covered in screenshots, and their value is never recorded.
• Text fields when maskInputs is on (by default in test and agent mode): covered, and their value left out. Their placeholder and label are still recorded, so a note can say which field it is.
• Screens Android keeps out of screenshots (FLAG_SECURE: a one-time code, a card's number), unless captureSecureScreens is set: the note goes without a screenshot. Only an app built with Notato's native module can tell (a development build or bare app, not Expo Go); elsewhere, wrap such a screen in <NotatoMask>.
• Anything inside <NotatoMask>: covered in screenshots, and none of its text is recorded anywhere: not as its text or label, and not in its selector. Its testID and nativeID are left out too (an app may make them of what it shows). A selector cannot find it by its text either. A private <Text> inside another <Text> has no place of its own on screen, so the <Text> around it is covered. A crop that would show any of it is left out.

import { NotatoMask } from "@notato/react-native"

<NotatoMask><Text>{user.email}</Text></NotatoMask>                  // private: this and everything in it
<NotatoMask private={false}><TextInput placeholder="Search" /></NotatoMask>   // recorded even with maskInputs

Password fields stay masked whatever the mark, and a private mark around a private={false} one wins over it. <NotatoMask> renders its children and nothing else. It is the web SDK's data-notato-mask.

Selectors#

What a note's selector looks like, and what an agent passes to notato_annotate or notato.annotate:

Modes#

• dev: notes go live to notato dev, pins turn amber when the agent acknowledges them and green when it resolves them, and replies arrive in the pin's card. On a resolved pin, Ask the agent to revert asks for the change to be undone. A note made while the server is down is kept on the device and sent when it comes back; one the server refuses for good (too large, say) is marked failed and kept, and the notes after it still go.
• test: feedback defaults to shared and, when a server is configured, is sent live into a review session. Notes also stay on the device for Package and share, which exports the bundle zip notato_import_bundle reads and uploads it when requested. Without a server, testing stays offline.
• agent: like dev, and the app also takes notato_annotate requests: notato_annotate { target: "#add-to-basket:nth(3)", comment: "…" } is relayed to the app, which finds the view, takes the screenshot and files the note as the agent. Requests are taken one at a time. The agent hears the note is filed only once the server has it; one kept on the device (the server could not be reached, or would not take it) is reported as not filed, with the reason.

People only and asides#

Replies reach the agent within its active feedback scope. Dev feedback is private to its creator by default; Test feedback is Shared. Change a note's visibility in the board to share it with the project. People only and Aside are additional ways to keep feedback between people:

• People only, for a whole note: the composer's switch ("Keep this between people: the agent won't see it."), and the same switch on the note's card, at any time, for anyone on the thread. Each change is recorded in the thread. A note not yet sent to the server is changed on the device, with the same entry, so a package carries the history.
• Aside, for one reply: under the reply field ("Just for people: the agent won't see this reply."). Asides show in the thread outlined and labelled Aside.

Known limits#

• Picking needs a development build: release builds do not have React Native's inspector. In one, the toolbar says so.
• The file and line are where the component is declared, not the line of the view inside it: React Native's component stacks give one place per component. They need the Metro server that served the bundle.
• A view is what the inspector finds under the finger, so a tap on a button's label picks the label. Parent selects the button; the note's component and selector say which button either way.
• Pins are found by their notes' selectors (of several alike, the view nearest where the note was made) when the notes change, and after the app itself commits something, once it has been quiet for a quarter of a second, or every two seconds while it never is. Notato's own drawing does not count. In between, each pin follows the view it was found on, measured a few times a second: while the view moves (a scroll), its pin fades out, and it fades back in where the view stops. Nothing is looked at while a sheet is open or the app is in the background. A view scrolled out of sight takes its pin with it; one that cannot be found keeps its pin where it was, dimmed. At most 150 pins are drawn on one screen (the newest); the Notes list has every note on the screen, newest first.
• Only notes made in a React Native app get pins. A note from another platform filed under the same screen (the web's, iOS's) is in the Notes list, with its number, and no pin: its selector names something this app does not have.
• The screen is read as Notato draws, and checked twice a second besides, so moving to a screen with no pins is noticed too.
• The connection to the server is watched: the server says something at least every 15 seconds, and a stream silent for 45 is closed and opened again. A stream that has run for hours is replaced by a fresh one without a change in the connection's state.
• Notes not sent yet are written to storage once a burst of changes is over (after 0.3 seconds), whole, then moved over the old file, so a crash part way never leaves half a file.
• The safe areas are estimated (React Native has no API for them without react-native-safe-area-context), so on an unusual device the toolbar may start a little close to an edge. Drag it.
• There is no shake to bring the toolbar back: in a development build a shake opens React Native's developer menu, which has Notato: show or hide the toolbar.
• Verified in Expo Go 57 with React Native 0.86 on the iOS simulator (iPhone 17 Pro, iOS 26.5): picking, masking, both screenshots, the component and its file, the composer, the ⋯ menu, live status, replies and asides, People only, revert, annotating from code, the agent relay through notato_annotate, and test mode's package uploaded and shared. Not yet verified at this version on the Android emulator, on a physical device, or in a bare app.

Hiding completed annotations#

On a resolved or reverted note, open More options → Hide from this app to hide its pin and card on this device. In Settings, Hide completed annotations hides completed notes across every screen at once, including notes beyond the 150 drawn pins. Restore hidden annotations brings them back.

Hiding keeps the feedback, screenshots and thread in the dashboard and exports. It never changes the note on the server. Reopened tasks and new agent questions remain visible. The preference is scoped to the server, project, mode, credential and name, and survives app restarts when runtime preferences are remembered.