React Native Inspect

A powerful CLI tool for analyzing React Native projects, generating comprehensive reports with recommendations and analysis. Get insights into your dependencies, security vulnerabilities, and React Native specific configurations with a beautiful, modern HTML report interface.

✨ Features

📦 Advanced Dependency Analysis: Check for outdated packages, available updates, and major version changes
🔒 Security Audit: Comprehensive vulnerability scanning with detailed reporting and severity levels
📊 Modern HTML Reports: Beautiful, responsive reports with drawer-based navigation and interactive elements
⚛️ React Native Specific Analysis: Architecture detection, version compatibility, and New Architecture status
🔧 Multiple Package Manager Support: Seamless integration with npm, yarn, and pnpm
📱 Mobile-First Design: Responsive report interface optimized for all devices
⌨️ Keyboard Navigation: Quick navigation with keyboard shortcuts
🎨 Modern UI/UX: Clean, professional interface with smooth animations and intuitive design

🎯 HTML Report Features

The generated HTML report includes a modern drawer-based interface with:

📦 Dependencies Analysis (opens by default): Interactive table with outdated packages, update types, and NPM links
🔒 Security Audit: Vulnerability breakdown with severity levels and detailed information
⚛️ React Native: Architecture analysis, version compatibility, and configuration insights
📊 Summary: Project health overview with actionable recommendations

Navigation & Interactions

Drawer Navigation: Clean sidebar with section indicators and badges
Mobile Responsive: Collapsible drawer with touch-friendly interface
Keyboard Shortcuts: Ctrl/Cmd + 1-4 to switch sections, Escape to close mobile drawer
Interactive Tables: Sortable columns with hover effects and external links
Real-time Indicators: Live status badges and progress indicators

🚀 Requirements

Bun runtime (v1.0.0 or higher)

📦 Installation

Install Bun (if not already installed)

curl -fsSL https://bun.sh/install | bash

Recommended: Global Installation

npm install -g react-native-inspect

One-time Usage

npx react-native-inspect

💻 Usage

Basic Analysis

# Analyze current directory
react-native-inspect

# Analyze specific project
react-native-inspect /path/to/project

What Happens During Analysis

🔍 Project Detection: Automatically detects package manager (npm/yarn/pnpm)
📦 Dependency Analysis: Scans for outdated packages and categorizes update types
🔒 Security Audit: Runs vulnerability scan using lockfiles
⚛️ React Native Analysis: Detects RN project and analyzes architecture
📊 Report Generation: Creates beautiful HTML report with all findings
🌐 Auto-Open: Automatically opens report in your default browser

Sample Output

🔍 React Native Inspect - Starting Analysis...
✓ All dependencies are up to date!
⚠ Security audit found 3 vulnerabilities (0 critical, 1 high)
✓ React Native New Architecture is enabled
✓ Report generated: /path/to/react-native-inspect-report.html
✓ Report opened in browser
✅ React Native Inspect completed successfully!

🏗️ Project Structure

src/
├── cli/                          # CLI interface and commands
│   ├── commands/                 # Command implementations
│   │   ├── analyze.ts           # Project analysis orchestration
│   │   └── report.ts            # Report generation and browser opening
│   └── index.ts                 # CLI entry point and workflow
├── core/                         # Core business logic
│   ├── analyzers/               # Analysis modules
│   │   ├── dependencies/        # Dependency and security analysis
│   │   ├── react-native/        # RN-specific analysis and architecture detection
│   │   └── security/            # Vulnerability scanning and audit
│   ├── report/                  # Report generation system
│   │   ├── generators/html/     # Modern HTML report generator
│   │   └── templates/           # HTML, CSS, and JS templates
│   │       ├── web/             # HTML template with drawer design
│   │       ├── styles/          # Modern CSS with responsive design
│   │       └── js/              # Interactive JavaScript features
│   └── project/                 # Project detection and parsing
├── utils/                       # Shared utilities
│   ├── logger.ts               # Enhanced logging with colors
│   └── spinner.ts              # Progress indicators and status
├── types/                       # TypeScript type definitions
└── tests/                      # Test suites

🗺️ Roadmap

✅ Completed

[x] Advanced package.json analysis with detailed outdated package detection
[x] Comprehensive security audit integration with severity categorization
[x] Modern HTML report generation with drawer-based navigation
[x] React Native version compatibility and New Architecture analysis
[x] Responsive design with mobile-first approach
[x] Interactive tables with sorting and external links
[x] Keyboard navigation and accessibility features
[x] Auto-browser opening and cross-platform support

🚧 In Progress

[ ] Packages replacement recommendation for better options
[ ] Peer dependency analysis and compatibility checking
[ ] Performance recommendations based on bundle analysis
[ ] Migration guides and helpful documentation links
[ ] JSON and Markdown report formats
[ ] CI/CD integration and automated reporting

🔮 Planned

[ ] Custom report themes and branding options
[ ] Plugin system for custom analyzers
[ ] Historical analysis and trend tracking
[ ] Team collaboration features
[ ] Integration with popular development tools

🛠️ Development

# Install dependencies
bun install

# Run in development mode
bun run dev

# Build for production
bun run build

# Run tests
bun test

🤝 Contributing

We welcome contributions! Whether it's bug reports, feature requests, or code contributions, please check out our contributing guidelines and feel free to submit pull requests.

📄 License

MIT License - see LICENSE file for details.

Built with ❤️ for the React Native community

🐛 Report Bug • ✨ Request Feature • 🤝 Contribute