nav-graph

Map the navigation topology of a React Native app. Supports scanning the live navigation tree, reading cached graphs, finding specific screens, and programmatic navigation.

Usage

/rn-dev-agent:nav-graph [subcommand] [screen-name]

Subcommands

scan (default)

Scan the live app to build or update the navigation graph.

/rn-dev-agent:nav-graph
/rn-dev-agent:nav-graph scan

Displays navigator count, screen count, coverage percentage, and a list of navigators with their active screens.

read

Display the full cached navigation tree.

/rn-dev-agent:nav-graph read

Outputs a tree view like:

root (tab) — 3 screens [active: Home]
  ├── Home (stack) — 4 screens [active: ProductList]
  │     ProductList, ProductDetail, Search, Categories
  ├── Cart (native-stack) — 3 screens
  │     CartList, Checkout, OrderConfirmation
  └── Profile (stack) — 2 screens
        ProfileView, EditProfile

find

Locate a specific screen in the graph and get navigation suggestions.

/rn-dev-agent:nav-graph find ProductDetail

Shows the screen’s navigator, path from root, params, and suggests navigation approach (tab switch, stack push, or deep link).

navigate

Plan and execute navigation to a specific screen.

/rn-dev-agent:nav-graph navigate Checkout

Shows a multi-step plan with estimated reliability, then executes it step-by-step with verification.

When to Use

• Understanding the app’s screen structure before implementing a feature
• Finding the correct route to a screen for testing
• Programmatic navigation to deep screens during verification