React Native MCP

🚀 React Native MCP Server

A comprehensive MCP server for professional React Native development teams, offering intelligent code analysis, expert-level automated code remediation, security auditing, and performance optimization.

🚀 Quick Start

Prerequisites

• Node.js 18.0 or higher
• Claude CLI or Claude Desktop
• React Native development environment

Installation

Automated Installation (Recommended)

# Install globally via npm
npm install -g @mrnitro360/react-native-mcp-guide

# Configure with Claude CLI
claude mcp add react-native-guide npx @mrnitro360/react-native-mcp-guide

Development Installation

# Clone repository
git clone https://github.com/MrNitro360/React-Native-MCP.git
cd React-Native-MCP

# Install dependencies and build
npm install && npm run build

# Add to Claude CLI
claude mcp add react-native-guide node ./build/index.js

Verification

claude mcp list

Verify that react-native-guide appears as Connected ✅

✨ Features

🔧 Expert Code Remediation (NEW in v1.1.0)

🧪 Advanced Testing Suite

🔍 Comprehensive Analysis Tools

📦 Dependency Management

• Automated Package Auditing - Security vulnerabilities and outdated dependencies
• Intelligent Upgrades - React Native compatibility validation
• Conflict Resolution - Dependency tree optimization
• Migration Assistance - Deprecated package modernization

📚 Expert Knowledge Base

• React Native Documentation - Complete API references and guides
• Architecture Patterns - Scalable application design principles
• Platform Guidelines - iOS and Android specific best practices
• Security Standards - Mobile application security frameworks

💻 Usage Examples

🔧 Expert Code Remediation (NEW)

# Automatically fix all detected issues with expert-level solutions
claude "remediate_code with remediation_level='expert' and add_comments=true"

# Advanced component refactoring with performance optimization
claude "refactor_component with refactor_type='comprehensive' and include_tests=true"

# Security-focused remediation
claude "remediate_code with issues=['hardcoded_secrets', 'sensitive_logging'] and remediation_level='expert'"

# Performance-focused refactoring
claude "refactor_component with refactor_type='performance' and target_rn_version='latest'"

Testing & Quality Assurance

# Generate comprehensive component tests
claude "generate_component_test with component_name='LoginForm' and test_type='comprehensive'"

# Analyze testing strategy
claude "analyze_testing_strategy with focus_areas=['unit', 'accessibility', 'performance']"

# Generate coverage report
claude "analyze_test_coverage with coverage_threshold=85"

Code Analysis & Optimization

# Comprehensive codebase analysis with auto-remediation suggestions
claude "analyze_codebase_comprehensive"

# Performance optimization with specific focus areas
claude "analyze_codebase_performance with focus_areas=['memory_usage', 'list_rendering']"

# Security audit with vulnerability detection
claude "analyze_codebase_comprehensive with analysis_types=['security', 'performance']"

Dependency Management

# Package upgrade recommendations
claude "upgrade_packages with update_level='minor'"

# Resolve dependency conflicts
claude "resolve_dependencies with fix_conflicts=true"

# Security vulnerability audit
claude "audit_packages with auto_fix=true"

Real-World Scenarios

🆕 Expert Remediation Examples

Before vs. After: Automatic Code Fixing

❌ Before (Problematic Code):

const MyComponent = () => {
  const apiKey = "sk-1234567890abcdef"; // Hardcoded secret
  const [data, setData] = useState([]);
  
  useEffect(() => {
    console.log("API Key:", apiKey); // Sensitive logging
    fetch('http://api.example.com/data') // HTTP instead of HTTPS
      .then(response => response.json())
      .then(data => setData(data));
      
    const interval = setInterval(() => { // Memory leak
      console.log('Polling...');
    }, 1000);
  }, []);

  return (
    <ScrollView>
      {data.map(item => ( // Performance issue
        <Text key={item.id} style={{color: 'red'}}>{item.name}</Text>
      ))}
    </ScrollView>
  );
};

✅ After (Expert Remediation):

interface Props {
  children?: React.ReactNode;
  onPress?: () => void;
}

const MyComponent: React.FC<Props> = () => {
  // TODO: Add API_KEY to your environment variables
  const apiKey = process.env.API_KEY || Config.API_KEY;
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // Removed sensitive logging for security
    // console.log('[REDACTED - contains sensitive data]');
    
    // Upgraded to HTTPS for security
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
      
    const interval = setInterval(() => {
      console.log('Polling...');
    }, 1000);
    
    // Cleanup intervals to prevent memory leaks
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <FlatList
      data={data}
      keyExtractor={(item, index) => item.id?.toString() || index.toString()}
      renderItem={({ item }) => (
        <Text style={styles.itemText}>{item.name}</Text>
      )}
    />
  );
};

const styles = StyleSheet.create({
  itemText: {
    color: 'red'
  }
});

export default React.memo(MyComponent);

🎯 What Got Fixed Automatically:

• ✅ Security: Hardcoded API key → Environment variable
• ✅ Security: Sensitive logging → Sanitized
• ✅ Security: HTTP → HTTPS upgrade
• ✅ Performance: ScrollView + map → FlatList with keyExtractor
• ✅ Memory: Added interval cleanup to prevent leaks
• ✅ Best Practices: Inline styles → StyleSheet.create
• ✅ Type Safety: Added TypeScript interface
• ✅ Performance: Wrapped with React.memo

🔧 Technical Details

🎯 Analysis & Remediation Capabilities

• Expert Code Remediation - Automatic fixing of security, performance, and quality issues
• Advanced Component Refactoring - Comprehensive modernization with test generation
• Comprehensive Codebase Analysis - Multi-dimensional quality assessment with fixes
• Enterprise Security Auditing - Vulnerability detection with automatic remediation
• Performance Intelligence - Memory, rendering, and bundle optimization with fixes
• Quality Metrics - Complexity analysis with refactoring implementation
• Accessibility Compliance - WCAG 2.1 AA standard validation with automatic fixes
• Testing Strategy Optimization - Coverage analysis and framework recommendations

🛠️ Technical Architecture

• 12 Specialized Tools - Complete React Native development lifecycle coverage + remediation
• 2 Expert Remediation Tools - remediate_code and refactor_component
• 6 Expert Prompt Templates - Structured development workflows
• 5 Resource Libraries - Comprehensive documentation and best practices
• Industry-Standard Test Generation - Automated test suite creation
• Multi-Framework Integration - Jest, Detox, Maestro, and accessibility tools
• Real-time Coverage Analysis - Detailed reporting with improvement strategies
• Production-Ready Code Generation - Expert-level automated fixes and refactoring

🏢 Enterprise Features

• Expert-Level Remediation - Senior engineer quality automatic code fixes
• Production-Ready Solutions - Enterprise-grade security and performance fixes
• Professional Reporting - Executive-level summaries with implementation code
• Security-First Architecture - Comprehensive vulnerability assessment with fixes
• Scalability Planning - Large-scale application design patterns with refactoring
• Compliance Support - Industry standards with automatic compliance fixes
• Multi-Platform Optimization - iOS and Android specific considerations with fixes

📚 Documentation

Claude Desktop Integration

NPM Installation Configuration

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "react-native-guide": {
      "command": "npx",
      "args": ["@mrnitro360/react-native-mcp-guide@1.1.0"],
      "env": {}
    }
  }
}

Development Configuration

{
  "mcpServers": {
    "react-native-guide": {
      "command": "node",
      "args": ["/absolute/path/to/React-Native-MCP/build/index.js"],
      "env": {}
    }
  }
}

Configuration Paths:

• Windows: C:\Users\{Username}\Desktop\React-Native-MCP\build\index.js
• macOS/Linux: /Users/{Username}/Desktop/React-Native-MCP/build/index.js

Development & Maintenance

Local Development

# Development with hot reload
npm run dev

# Production build
npm run build

# Production server
npm start

Continuous Integration

This project implements enterprise-grade CI/CD:

• ✅ Automated Version Management - Semantic versioning with auto-increment
• ✅ Continuous Deployment - Automatic npm publishing on merge
• ✅ Release Automation - GitHub releases with comprehensive changelogs
• ✅ Quality Gates - Build validation and testing before deployment

Update Management

# Check current version
npm list -g @mrnitro360/react-native-mcp-guide

# Update to latest version
npm update -g @mrnitro360/react-native-mcp-guide

# Reconfigure Claude CLI
claude mcp remove react-native-guide
claude mcp add react-native-guide npx @mrnitro360/react-native-mcp-guide

📋 Changelog

v1.1.0 - Expert Code Remediation (Latest)

🚀 Major Features:

• ✨ NEW: remediate_code tool - Expert-level automatic code fixing
• ✨ NEW: refactor_component tool - Advanced component refactoring with tests
• 🔧 Enhanced: Component detection accuracy improved
• 🛡️ Security: Automatic hardcoded secret remediation
• ⚡ Performance: Memory leak prevention and FlatList optimization
• 📝 Quality: TypeScript interface generation and StyleSheet extraction
• 🎯 Accessibility: WCAG compliance with automatic fixes

🎯 Remediation Capabilities:

• Hardcoded secrets → Environment variables
• Sensitive logging → Sanitized code
• HTTP requests → HTTPS enforcement
• Memory leaks → Automatic cleanup
• Inline styles → StyleSheet.create
• Performance issues → Optimized patterns
• Type safety → TypeScript interfaces

v1.0.5 - Previous Version

• Comprehensive analysis tools
• Testing suite generation
• Dependency management
• Performance optimization guidance

📄 License

This project is licensed under the MIT License. See the license file for detailed terms and conditions.

Support & Community

Resources

• 📦 NPM Package - Official package repository
• 🐙 GitHub Repository - Source code and development
• 🐛 Issue Tracker - Bug reports and feature requests
• 📖 MCP Documentation - Model Context Protocol specification
• ⚛️ React Native Docs - Official React Native documentation

Contributing

We welcome contributions from the React Native community. Please review our Contributing Guidelines for development standards and submission processes.