@rn-ave/core 🎯

The core library for rn-ave (React Native Agent Visual Edit). It provides the visual inspector UI, component selection logic, and context extraction for AI agents.

Installation

npm install @rn-ave/core

Usage

The easiest way to use rn-ave is with auto-initialization. Import it at the very top of your entry file:

For standard Expo or React Native projects: Add to App.tsx or index.js:

// App.tsx or index.js
import '@rn-ave/core/auto';

For Expo Router projects: Add to your root layout file (usually app/_layout.tsx or src/app/_layout.tsx):

// app/_layout.tsx
import '@rn-ave/core/auto';

Adding this import will automatically inject the inspector button and overlay into your app when running in development mode.

Features

• Visual Inspector: A floating button that activates a selection overlay.
• Box Model Visualization: See real-time margin, padding, and content areas for any tapped element.
• Breadcrumbs Navigation: Traverse up the component hierarchy to select parent components for editing.
• Context Extraction: Automatically gathers:
  • Component Name
  • Props (sanitized)
  • Source File & Line Number (requires @rn-ave/babel-plugin)
  • JSX usage preview
• Agent Bridges: Built-in support for sending context to OpenCode, Claude Code, and Cursor servers.

Environment Support

• React Native 0.60+
• Expo and Bare workflow
• Works only when __DEV__ is true (zero production overhead)