rn-code-explorer

The explorer agent analyzes React Native codebases to produce a complete map of how a feature area works. It traces execution paths from route entry points through component hierarchy, state management, and API integration.

Overview

Property	Value
Model	Sonnet
Color	Yellow
Skills	rn-testing
Tools	Glob, Grep, LS, Read

The explorer is read-only. It does not modify files or interact with devices.

When triggered

• “how does the notification system work in this app?”
• “map out all the screens and testIDs in the app”
• “explore the codebase”
• “trace the data flow”
• Phase 2 of the rn-feature-dev pipeline (2-3 explorer agents run in parallel)

Analysis Protocol

1. Feature Discovery

Finds entry points and feature boundaries:

• Routes: Expo Router files in app/ (dynamic segments, route groups, layouts) or React Navigation config
• Screens: screen components referenced by routes
• Configuration: app.json, metro.config.js for bundle ID, URI scheme, path aliases
• Entry point: App.tsx or index.js for providers, store setup, navigation container

2. Code Flow Tracing

Follows call chains from entry to output:

• Component render tree (parent to child imports)
• Event handlers (onPress to dispatch/navigate/fetch)
• Data loading (useEffect to fetch to setState/dispatch)
• Navigation flow (navigate/push/replace calls with params)

3. Architecture Analysis

Maps each layer of the stack:

• Presentation: screen/component files, styling system (StyleSheet/NativeWind/Tamagui)
• State: Redux Toolkit slices, Zustand stores, React Query queries, local useState
• Network: API client setup, endpoint definitions, fetch/axios calls
• Navigation: route definitions, param types, deep link configuration

4. RN Inventory

Mandatory in every output. Greps the codebase for:

• testID= and testID={ (all existing testIDs)
• navigation.navigate( / router.push( (navigation calls)
• useSelector( / useStore( / useDispatch( (state hooks)
• fetch( / axios. / useQuery( (network calls)
• __ZUSTAND_STORES__ (Zustand dev exposure)
• Bundle ID from app.json

Output Format

1. Entry Points with file:line references
2. Component Hierarchy with import tree
3. State Layer (store type, slice names, actions, selectors)
4. Network Layer (API endpoints, fetch patterns, error handling)
5. testID Inventory table (component, testID, file:line)
6. Missing testIDs on interactive components
7. Patterns and Conventions (file naming, folder structure, styling, typing)
8. Key Files (5-10 files essential for the architect)