@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

1npm 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:

• cuekit.config.json
• cuekit.config.js
• cuekit.config.mjs
• cuekit.config.ts

Required Fields

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

Example Configuration

1{
2  "apiKey": "your-cuekit-api-key-here",
3  "appId": "your-app-id-here"
4}

Usage

Basic Analysis

1npx cuekit-cli scan .

Output Options

1# JSON output
2npx cuekit-cli scan . --json
3
4# Save to markdown file
5npx cuekit-cli scan . --out routes.md
6
7# Use AI for component summarization
8npx cuekit-cli scan . --ai

Examples

1# Analyze a React Navigation project
2npx cuekit-cli scan ./my-rn-app
3
4# Generate JSON output
5npx cuekit-cli scan ./my-rn-app --json
6
7# Create documentation file
8npx cuekit-cli scan ./my-rn-app --out routes.md
9
10# With AI-powered component descriptions
11npx cuekit-cli scan ./my-rn-app --ai

Supported Patterns

Object-based Route Definitions

1const Stack = createStackNavigator()
2
3;<Stack.Navigator>
4  <Stack.Screen name="Home" component={HomeScreen} />
5  <Stack.Screen name="Profile" component={ProfileScreen} />
6</Stack.Navigator>

Array-based Route Configurations

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

Tab Navigator Patterns

1const Tab = createBottomTabNavigator()
2
3;<Tab.Navigator>
4  <Tab.Screen name="Home" component={HomeScreen} />
5  <Tab.Screen name="Settings" component={SettingsScreen} />
6</Tab.Navigator>

Drawer Navigator Patterns

1const Drawer = createDrawerNavigator()
2
3;<Drawer.Navigator>
4  <Drawer.Screen name="Home" component={HomeScreen} />
5  <Drawer.Screen name="Profile" component={ProfileScreen} />
6</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

1# Build the package
2npm run build
3
4# Development mode with watch
5npm run dev
6
7# Type checking
8npm run check-types

License

MIT License - see LICENSE file for details.