React Native Package Checker
VS Code Extension

Check New Architecture compatibility and version requirements for React Native packages - all in VS Code ⚡️
CodeLens Integration • Package Filtering • Version Requirements • One-Click Updates

✨ Features

• 🎯 New Architecture Status - See which packages work with React Native's New Architecture right in your package.json
• 📊 Package Summary - Get instant overview of all dependencies with status counts and quick actions
• 🎨 Visual Indicators - Gutter icons and CodeLens overlays show compatibility at a glance
• 🔍 Smart Filtering - Browse packages by status (Supported, Untested, Unlisted, Unmaintained) with search
• ⚡ Version Requirements - Check what package versions you need for any React Native version
• 🔧 Bulk Updates - Apply all required version changes with preview and confirmation
• 📂 Maintenance Status - Spot unmaintained packages that might cause issues
• 🔗 External Resources - Quick access to NPM, GitHub, docs, and migration guides
• 🌐 Upgrade Helper - Direct links to React Native upgrade tools and community resources
• 📦 Package Checker Website - Open your project dependencies in the web-based package analyzer

🚀 Installation

Install from VS Code Marketplace:

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "React Native Package Checker"
4. Click Install

Or install via command line:

code --install-extension sandipshiwakoti.vscode-react-native-package-checker

Alternative sources:

• VS Code Marketplace
• Open VSX Registry

Requirements:

• VS Code 1.74.0 or higher
• A package.json file in your workspace

🚀 Quick Start

1. Open your React Native project in VS Code
2. Open your package.json file - CodeLens overlays appear automatically
3. Check New Architecture compatibility - See status icons and clickable segments above each dependency
4. Browse packages by status - Click summary segments like "✓23 Supported" to filter and search
5. Check version requirements - Use Ctrl+Shift+P → "Show Requirements" to see what versions you need for target React Native version
6. Apply bulk updates - Use "Apply Requirements" to update all packages with preview and confirmation

Key Actions:

• Click any CodeLens segment to browse filtered packages
• Use Command Palette (Ctrl+Shift+P) for "Package Checker" commands
• Toggle CodeLens display with the title bar icon

📋 Usage

🔎 CodeLens Integration

Open your package.json to see interactive overlays above each dependency:

🎛️ Title Bar

Toggle CodeLens display on/off:

• Use the toggle icon in the editor title bar for instant enable/disable

🎨 Visual Status Decorations

Package status decorations appear as icons in the editor gutter next to each dependency line:

Icon	Status	Meaning
	Supported	Package fully supports New Architecture
	Unsupported	Package does not support New Architecture
	Untested	Package has not been tested with New Architecture
	Unlisted	Package not found in the React Native directory

Configuration:

• Toggle decorations: Command Palette → "Toggle Status Decorations"
• Setting: reactNativePackageChecker.showStatusDecorations (default: true)

⌨️ Command Palette

Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac):

📊 Data Sources

This extension leverages data from trusted sources:

• React Native Directory - Official React Native package directory with comprehensive compatibility data
• NPM Registry - Package version and metadata information
• React Native Upgrade Helper - Official upgrade guidance for React Native versions
• rn-diff-purge - Community-maintained diffs between React Native versions for requirements checking

Special thanks to the React Native Directory team and rn-diff-purge maintainers for providing the comprehensive data that powers this extension.

⚙️ Configuration

Customize the extension in your VS Code settings (settings.json):

{
    "reactNativePackageChecker.showLatestVersion": true,
    "reactNativePackageChecker.showStatusDecorations": true,
    "reactNativePackageChecker.enableLogging": true,
    "reactNativePackageChecker.logLevel": "info",
    "reactNativePackageChecker.requirements.cacheDuration": 24
}

To access settings:

1. Open Command Palette (Ctrl+Shift+P)
2. Type "Preferences: Open Settings (JSON)"
3. Add the configuration above

❓ FAQ

1. How accurate are the version requirements?

The extension uses the same data source as React Native Upgrade Helper - specifically the rn-diff-purge repository - ensuring the requirements are as reliable as the official upgrade tool. The extension focuses on packages that are part of React Native project templates, providing targeted guidance for the most commonly used dependencies. Packages not included in these templates won't have version requirements available.

2. How does the extension get New Architecture and version data?

The extension fetches New Architecture compatibility status through the Package Checker website API, which uses React Native Directory data. This includes support status, maintenance information, and alternative package suggestions. Latest version information comes directly from the NPM Registry to provide up-to-date package versions. Packages not listed in React Native Directory will show as "Unlisted" status.

3. What if my React Native version isn't supported for requirements checking?

Version requirements depend on data availability in the rn-diff-purge repository. Very new or very old React Native versions might not have complete diff data available, so try targeting a well-established version that's known to be supported.

🛠️ Development

Tech Stack:

Commands:

bun install          # Install dependencies
bun run compile      # Build the extension
bun run watch        # Watch mode for development
bun run test         # Run tests
bun run lint         # Run ESLint
bun run lint:fix     # Fix ESLint issues
bun run format       # Format code with Prettier
bun run format:check # Check code formatting
bun run fix          # Run lint:fix and format together
bun run package      # Create .vsix file
bun run publish      # Publish to marketplace

🙌 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

For detailed guidelines, see Contributing Guidelines.

Found a bug? Please open an issue with:

• VS Code version
• Extension version
• Steps to reproduce
• Expected vs actual behavior

📜 License

This project is licensed under the MIT License.

Made with ❤️ for the React Native community
@sandipshiwakoti