Mobile phone on desk showing React Native app with highlighted UI elements and developer notes

react-native-grab: Point at Your UI and Let the AI Fix It

The Gray Cat
The Gray Cat

Every developer who has tried to get an LLM to tweak mobile UI knows the frustration. You screenshot your app, paste it into a prompt, and then spend three paragraphs explaining which button you mean, where the spacing is off, and which component file controls that particular text. By the time the AI understands what you are pointing at, you could have fixed it yourself.

react-native-grab flips this workflow on its head. Built by the team at Callstack, it lets you literally touch an element on your React Native app and capture its complete component context, including the component stack, source file location, and any custom metadata you have attached. That context goes straight to your clipboard, ready to paste into whatever coding agent you prefer.

Why Describing UI to Robots Is Painful

When you ask an LLM to change a button's padding or fix text alignment, the AI first needs to figure out which file, which component, and which exact element you are talking about. Screenshots help, but they are ambiguous. The AI might guess the wrong component, open the wrong file, or misidentify which nested view you meant.

react-native-grab eliminates this search phase entirely. One touch on the screen produces a structured context payload that tells the AI exactly where to look and what to change. It is the difference between saying "that blue button near the bottom, no not that one, the other one" and handing over the exact file path and component stack.

What You Get Out of the Box

  • Touch-based element selection with a visual overlay that highlights what you have selected
  • Full component stack tracing from the touched native view up through the React fiber tree
  • Source file locations so your AI agent knows exactly which file to edit
  • Custom context injection via a provider component for attaching metadata like screen names or feature areas
  • Dev Menu integration so activation is one tap away
  • Zero production overhead since the context provider is a no-op in production builds
  • Metro middleware that hooks into the bundler to send captured context to your clipboard

Getting Started

Install the package with your preferred package manager:

npm install react-native-grab

yarn add react-native-grab

There are a few requirements to keep in mind. You need React 19 or newer, React Native 0.80 or newer, and your app must be running on the New Architecture with the Fabric renderer. The legacy Paper renderer is not supported.

Wiring Up Metro

The first step is wrapping your Metro configuration so that react-native-grab can hook into the bundler. This is what enables the clipboard integration and source mapping.

// metro.config.js
const { getDefaultConfig } = require("@react-native/metro-config");
const { withReactNativeGrab } = require("react-native-grab/metro");

const config = getDefaultConfig(__dirname);

module.exports = withReactNativeGrab(config);

The withReactNativeGrab wrapper adds middleware to Metro that listens for grab events and copies the captured context to your host machine's clipboard. No extra server or browser extension needed.

Wrapping Your App Root

Next, wrap your application's root component with ReactNativeGrabRoot. This sets up the overlay and touch handling that powers the grab interaction.

import { ReactNativeGrabRoot } from "react-native-grab";

function App() {
  return (
    <ReactNativeGrabRoot>
      <NavigationContainer>
        <MainStack />
      </NavigationContainer>
    </ReactNativeGrabRoot>
  );
}

Once this is in place, open your app's Dev Menu and look for the "React Native Grab" option. Tapping it activates the grab overlay, and you can start touching elements to capture their context.

Handling Native Navigators

If your app uses native navigation (native stack or native tabs from React Navigation), you will want to wrap each screen with ReactNativeGrabScreen. This ensures that element selection works correctly across navigation boundaries.

import { ReactNativeGrabScreen } from "react-native-grab";

function ProfileScreen() {
  return (
    <ReactNativeGrabScreen>
      <View style={styles.container}>
        <Text style={styles.header}>Profile</Text>
        <UserAvatar />
        <SettingsList />
      </View>
    </ReactNativeGrabScreen>
  );
}

Without this wrapper, the grab overlay might not correctly identify elements that live inside native navigation containers, since those use separate native view hierarchies.

Enriching Grabs with Custom Context

Sometimes the component stack and source location are not enough. Maybe you want your AI agent to know which feature area a component belongs to, or which design system variant it uses. The ReactNativeGrabContextProvider lets you attach arbitrary metadata to any subtree.

import { ReactNativeGrabContextProvider } from "react-native-grab";

function CheckoutFlow() {
  return (
    <ReactNativeGrabContextProvider
      context={{
        feature: "checkout",
        designSystem: "v2",
        owner: "payments-team",
      }}
    >
      <CartSummary />
      <PaymentForm />
      <OrderConfirmation />
    </ReactNativeGrabContextProvider>
  );
}

When you grab any element inside this provider, the captured context will include your custom metadata alongside the component stack and source location. Nested providers shallow-merge their context, with child keys overriding parent keys. This means you can set broad context at the screen level and refine it deeper in the tree.

The best part: ReactNativeGrabContextProvider is a complete no-op in production builds. No performance cost, no bundle size impact for your users.

Programmatic Activation with Expo

If you are using Expo, the Dev Menu might be overridden by Expo's own menu. In that case, you can activate grabbing programmatically using the enableGrabbing function.

import { enableGrabbing } from "react-native-grab";

function DebugToolbar() {
  return (
    <TouchableOpacity onPress={() => enableGrabbing()}>
      <Text>Grab Element</Text>
    </TouchableOpacity>
  );
}

This gives you a dedicated button in your development UI that triggers the grab overlay, bypassing any Dev Menu conflicts. You could wire this up to a shake gesture, a hidden settings toggle, or whatever activation method works for your team.

What Happens Under the Hood

When you touch an element with the grab overlay active, a surprisingly elegant sequence kicks off. The tool identifies the Fabric native view under your finger, then traverses the React fiber tree to reconstruct the full component stack. It captures source file locations from the fiber nodes, merges in any custom context from surrounding providers, and formats everything into a structured payload.

That payload gets copied to your clipboard via the Metro middleware connection. You can then paste it directly into your AI coding agent's prompt. The output typically includes an element preview, the full component stack with file paths, and any custom context JSON. It is everything an LLM needs to locate and modify the right piece of code without guessing.

A Forward-Looking Bet

The requirements for react-native-grab are deliberately cutting-edge: React 19, React Native 0.80, and the Fabric renderer. This is not a limitation born of laziness but a deliberate choice. The Fabric renderer provides the deep native view introspection that makes accurate touch-to-component mapping possible. The older Paper renderer simply does not expose the same level of detail.

This means react-native-grab is a tool for teams that have already migrated to the New Architecture or are building new apps on modern React Native. If that describes you, this tool slots cleanly into an AI-assisted development workflow that is only going to become more common.

Wrapping Up

react-native-grab carves out a genuinely new niche in the React Native tooling ecosystem. It is not a debugger, not a profiler, and not a design inspector. It is a context bridge between your running app and your AI coding assistant, built by Callstack, one of the most respected names in React Native consulting.

The library just hit v1.0.0 and is still very young, but the concept is sharp and the implementation is clean. If you are building React Native apps on the New Architecture and using LLMs to speed up your UI work, react-native-grab removes a surprising amount of friction from that loop. Touch, grab, paste, done.