MCP React Native Toolkit

A Model Context Protocol (MCP) server that provides AI agents with accurate, version-aware documentation for React Native, Expo, React Navigation, and Ignite.

Catalog: ItamiForge

Quick Start

git clone https://github.com/ItamiForge/mcp-react-native-toolkit.git
cd mcp-react-native-toolkit
npm install && npm run build

vscode

Add the MCP server to your editor's configuration: Edit ~/.vscode/mcp.json (global) or .vscode/mcp.json (per-project):

{
  "servers": {
    "react-native-toolkit": {
      "type": "stdio",
      "command": "node",
      "args": ["/absolute/path/to/mcp-react-native-toolkit/dist/index.js"]
    }
  }
}

cursor

Edit ~/.cursor/mcp.json:

{
  "mcpServers": {
    "react-native-toolkit": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-react-native-toolkit/dist/index.js"]
    }
  }
}

claude

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "react-native-toolkit": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-react-native-toolkit/dist/index.js"]
    }
  }
}

3. Use It (Zero Config Per-Project)

Just start asking your AI about React Native! The toolkit:

1. Reads your project's package.json to detect versions

2. Fetches matching docs on first request (cached for future use)

3. Serves version-accurate documentation automatically

Related MCP server: Context7 MCP

Multi-Project Workflow

The toolkit handles multiple projects with different versions seamlessly:

~/projects/
├── legacy-app/           # expo@50.0.0
│   └── package.json
└── new-app/              # expo@52.0.0
    └── package.json

What Happens

┌─────────────────────────────────────────────────────────────────┐
│  You open legacy-app/ and ask: "How do I use Camera?"          │
├─────────────────────────────────────────────────────────────────┤
│  1. Toolkit reads package.json → detects expo@50.0.0            │
│  2. Checks docs/expo/50/ → NOT FOUND                            │
│  3. Fetches from git branch `sdk-50` → 745 files in ~3s         │
│  4. Caches at docs/expo/50/                                     │
│  5. Returns Expo 50 documentation                               │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│  You switch to new-app/ and ask: "How do I use Camera?"        │
├─────────────────────────────────────────────────────────────────┤
│  1. Toolkit reads package.json → detects expo@52.0.0            │
│  2. Checks docs/expo/52/ → NOT FOUND                            │
│  3. Fetches from git branch `sdk-52` → 745 files in ~3s         │
│  4. Caches at docs/expo/52/                                     │
│  5. Returns Expo 52 documentation                               │
└─────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│  You go back to legacy-app/ and ask another question            │
├─────────────────────────────────────────────────────────────────┤
│  1. Toolkit reads package.json → detects expo@50.0.0            │
│  2. Checks docs/expo/50/ → FOUND ✓                              │
│  3. Returns cached Expo 50 documentation instantly              │
└─────────────────────────────────────────────────────────────────┘

Resulting Cache Structure

mcp-react-native-toolkit/
└── docs/
    ├── expo/
    │   ├── 50/           # Cached for legacy-app
    │   └── 52/           # Cached for new-app
    ├── react-native/
    │   └── latest/       # Shared (no versioned docs available)
    └── react-navigation/
        ├── 6/            # If you have a v6 project
        └── 7/            # If you have a v7 project

Commands Reference

Available Tools

generate-component-scaffold

Generates boilerplate code for common React Native patterns like optimized FlatLists, navigation screens, forms, and more.

Parameters:

• scaffoldId (optional): ID of the scaffold template (e.g., 'flatlist-basic', 'stack-navigator')

• language (optional): 'typescript' or 'javascript' (default: 'typescript')

• listScaffolds (optional): Set to true to see all available scaffolds

• category (optional): Filter by category ('list', 'navigation', 'form', 'api', 'storage', 'animation')

Available Scaffolds:

• flatlist-basic - Basic FlatList with proper typing

• flatlist-optimized - Performance-optimized FlatList with memoization

• flatlist-infinite-scroll - FlatList with pagination and infinite scroll

• stack-navigator - React Navigation stack navigator setup

• tab-navigator - React Navigation tab navigator setup

• form-basic - Form with controlled inputs and validation

• api-fetch - API data fetching with loading/error states

• mmkv-storage - MMKV persistent storage hooks

• reanimated-gesture - Reanimated + Gesture Handler animation

compare-api-versions

Compares API differences between two versions of a library, showing added, removed, and modified APIs.

Parameters:

• library (required): Library to compare

• fromVersion (required): Starting version

• toVersion (required): Target version

• detailLevel (optional): 'summary' or 'detailed'

suggest-migration-path

Provides step-by-step migration guidance for upgrading between library versions.

Parameters:

• library (required): Library to migrate

• fromVersion (optional): Starting version (or 'auto' to detect)

• toVersion (required): Target version

• format (optional): 'detailed', 'checklist', or 'summary'

• includeCodeExamples (optional): Include before/after code examples

generate-ai-template

Generates configuration files for 50+ AI coding assistants and agentic frameworks.

Parameters:

• framework (optional): Target framework ID

• listFrameworks (optional): Set to true to see all supported frameworks

• generateAll (optional): Generate templates for all frameworks

• includeExamples (optional): Include code examples in templates

Supported Frameworks (53 total):

CLI Usage:

# List all supported frameworks
npm run generate-templates -- --list

# Generate Cursor rules
npm run generate-templates -- cursor

# Generate to a specific directory
npm run generate-templates -- vscode-copilot --output-dir ./my-project

# Generate all templates
npm run generate-templates -- --all --output-dir ./ai-configs

See examples/custom-source.md to add your own documentation sources.

Examples

See the examples/ directory for integration guides:

• LangChain Integration - Build a React Native coding agent

• LlamaIndex Integration - RAG with local documentation

• Adding Custom Sources - Add Supabase, Reanimated, etc.

Contributing

See CONTRIBUTING.md for guidelines.

License

MIT - see LICENSE