@cuekit-cli/react-navigation

React Navigation project analyzer for Cuekit CLI. Analyzes React Navigation projects using various navigation patterns to detect routes, components, and interactive elements.

Overview

This package provides specialized analysis for React Navigation projects, supporting Stack, Tab, and Drawer navigators. It analyzes both object-based and JSX-based route definitions while providing deep component path resolution and import analysis.

Features

• Stack Navigator: Analyzes stack-based navigation patterns
• Tab Navigator: Supports both regular and bottom tab navigators
• Drawer Navigator: Detects drawer navigation configurations
• Nested Navigators: Handles complex nested navigation structures
• Dynamic Routes: Supports dynamic route configurations
• Component Resolution: Deep component path resolution and import analysis
• Import Analysis: Resolves component imports and dependencies
• Interactive Elements: Identifies UI elements and their properties

Installation

npm install @cuekit-cli/react-navigation

Configuration

To upload analysis results to the Cuekit dashboard, create a configuration file in your project's root directory.

The CLI searches for one of the following files:

• ansyr.config.json
• ansyr.config.js
• ansyr.config.mjs
• ansyr.config.ts

Required Fields

• apiKey (string): Your Ansyr API key
• appId (string): The App ID for your project

Example Configuration

{
  "apiKey": "your-cuekit-api-key-here",
  "appId": "your-app-id-here"
}

Usage

Basic Analysis

npx cuekit-cli scan .

Output Options

# JSON output
npx cuekit-cli scan . --json

# Save to markdown file
npx cuekit-cli scan . --out routes.md

# Use AI for component summarization
npx cuekit-cli scan . --ai

Examples

# Analyze a React Navigation project
npx cuekit-cli scan ./my-rn-app

# Generate JSON output
npx cuekit-cli scan ./my-rn-app --json

# Create documentation file
npx cuekit-cli scan ./my-rn-app --out routes.md

# With AI-powered component descriptions
npx cuekit-cli scan ./my-rn-app --ai

Supported Patterns

Object-based Route Definitions

const Stack = createStackNavigator()

;<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>

Array-based Route Configurations

const routes = [
  {name: 'Home', component: HomeScreen},
  {name: 'Profile', component: ProfileScreen},
]

Tab Navigator Patterns

const Tab = createBottomTabNavigator()

;<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

Drawer Navigator Patterns

const Drawer = createDrawerNavigator()

;<Drawer.Navigator>
  <Drawer.Screen name="Home" component={HomeScreen} />
  <Drawer.Screen name="Profile" component={ProfileScreen} />
</Drawer.Navigator>

Navigator Types

The analyzer detects and categorizes navigator types:

• Stack Navigator: createStackNavigator
• Tab Navigator: createBottomTabNavigator, createMaterialTopTabNavigator
• Drawer Navigator: createDrawerNavigator

Component Resolution

The analyzer provides advanced component path resolution:

• Resolves relative imports to absolute file paths
• Handles index file imports (./components/Button → ./components/Button/index.tsx)
• Supports TypeScript and JavaScript file extensions
• Excludes node_modules imports
• Provides fallback paths for unresolved components

Output Format

The analyzer provides structured output including:

• Route names and paths
• Component file locations
• Navigator types (Stack, Tab, Drawer)
• Component descriptions
• Interactive elements
• Feature analysis

Development

# Build the package
npm run build

# Development mode with watch
npm run dev

# Type checking
npm run check-types

License

MIT License - see LICENSE file for details.