Add an MCP Server to Your React Native Tooling

mkdir mcp-react-native-server
cd mcp-react-native-server
npm init -y
npm install @modelcontextprotocol/sdk fs-extra

const { Server } = require("@modelcontextprotocol/sdk/server/index.js");
const { StdioServerTransport } = require("@modelcontextprotocol/sdk/server/stdio.js");
const {
  CallToolRequestSchema,
  ListToolsRequestSchema,
} = require("@modelcontextprotocol/sdk/types.js");
const fs = require("fs-extra");
const path = require("path");
const { exec } = require("child_process");

class ReactNativeMcpServer {
  constructor() {
    this.server = new Server(
      {
        name: "react-native-mcp-server",
        version: "1.0.0",
      },
      {
        capabilities: {
          tools: {},
        },
      }
    );

    this.setupToolHandlers();
    this.server.onerror = (error) => console.error("[MCP Error]", error);
  }

  setupToolHandlers() {
    // Tool: Get project structure
    this.server.setRequestHandler(ListToolsRequestSchema, async () => {
      return {
        tools: [
          {
            name: "getProjectStructure",
            description: "Get the structure of a React Native project",
            inputSchema: {
              type: "object",
              properties: {
                projectPath: {
                  type: "string",
                  description: "Path to the React Native project",
                },
              },
              required: ["projectPath"],
            },
          },
          {
            name: "runRnDoctor",
            description: "Run react-native doctor to check environment health",
            inputSchema: {
              type: "object",
              properties: {
                projectPath: { type: "string" },
              },
              required: ["projectPath"],
            },
          },
          {
            name: "generateNavigationScreen",
            description: "Generate a new screen with boilerplate code matching project patterns",
            inputSchema: {
              type: "object",
              properties: {
                projectPath: { type: "string" },
                screenName: { type: "string" },
                screenType: {
                  type: "string",
                  enum: ["stack", "tab", "drawer"],
                  default: "stack",
                },
              },
              required: ["projectPath", "screenName"],
            },
          },
          {
            name: "analyzeComponents",
            description: "Scan components directory and report patterns",
            inputSchema: {
              type: "object",
              properties: {
                projectPath: { type: "string" },
              },
              required: ["projectPath"],
            },
          },
        ],
      };
    });

    // Handle tool calls
    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
      const { name, arguments: args } = request.params;

      switch (name) {
        case "getProjectStructure":
          return await this.getProjectStructure(args.projectPath);
        case "runRnDoctor":
          return await this.runRnDoctor(args.projectPath);
        case "generateNavigationScreen":
          return await this.generateNavigationScreen(args);
        case "analyzeComponents":
          return await this.analyzeComponents(args.projectPath);
        default:
          throw new Error(`Unknown tool: ${name}`);
      }
    });
  }

  async getProjectStructure(projectPath) {
    const structure = {};

    // Read package.json
    try {
      const packageJson = await fs.readJson(path.join(projectPath, "package.json"));
      structure.packageJson = {
        name: packageJson.name,
        dependencies: Object.keys(packageJson.dependencies || {}),
        devDependencies: Object.keys(packageJson.devDependencies || {}),
      };
    } catch (error) {
      structure.packageJsonError = error.message;
    }

    // Scan src directory
    const srcPath = path.join(projectPath, "src");
    if (await fs.pathExists(srcPath)) {
      structure.srcTree = await this.buildFileTree(srcPath, projectPath);
    }

    // Scan components
    const componentsPath = path.join(projectPath, "src", "components");
    if (await fs.pathExists(componentsPath)) {
      const components = await fs.readdir(componentsPath);
      structure.components = components.filter((item) =>
        item.endsWith(".tsx") || item.endsWith(".jsx")
      );
    }

    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(structure, null, 2),
        },
      ],
    };
  }

  async buildFileTree(dir, rootDir) {
    const files = await fs.readdir(dir);
    const tree = {};

    for (const file of files) {
      const fullPath = path.join(dir, file);
      const stat = await fs.stat(fullPath);

      if (stat.isDirectory()) {
        tree[file] = await this.buildFileTree(fullPath, rootDir);
      } else {
        const relativePath = path.relative(rootDir, fullPath);
        tree[file] = { size: stat.size, path: relativePath };
      }
    }

    return tree;
  }

  async runRnDoctor(projectPath) {
    return new Promise((resolve) => {
      exec(
        "npx react-native doctor",
        { cwd: projectPath, maxBuffer: 1024 * 1024 * 5 },
        (error, stdout, stderr) => {
          resolve({
            content: [
              {
                type: "text",
                text: `Doctor output:\n${stdout}\n\nErrors:\n${stderr}`,
              },
            ],
            isError: !!error,
          });
        }
      );
    });
  }

  async generateNavigationScreen(args) {
    const { projectPath, screenName, screenType } = args;
    const screensPath = path.join(projectPath, "src", "screens");

    // Read existing screen patterns
    let template = `import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const ${screenName}Screen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>${screenName}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default ${screenName}Screen;
`;

    // Check if project uses TypeScript
    const tsConfigPath = path.join(projectPath, "tsconfig.json");
    const useTypeScript = await fs.pathExists(tsConfigPath);
    if (useTypeScript) {
      template = `import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const ${screenName}Screen: React.FC = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>${screenName}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

export default ${screenName}Screen;
`;
    }

    // Write the file
    await fs.ensureDir(screensPath);
    const filePath = path.join(screensPath, `${screenName}Screen.${useTypeScript ? "tsx" : "jsx"}`);
    await fs.writeFile(filePath, template);

    // Update navigation file if it exists
    const navPath = path.join(projectPath, "src", "navigation", "AppNavigator.tsx");
    if (await fs.pathExists(navPath)) {
      let navContent = await fs.readFile(navPath, "utf-8");
      // Add import
      const importStatement = `import ${screenName}Screen from '../screens/${screenName}Screen';\n`;
      if (!navContent.includes(importStatement)) {
        navContent = navContent.replace(
          /(import.*from.*screens.*;\n)/,
          `$1${importStatement}`
        );
      }
      // Add screen to navigator
      if (screenType === "stack") {
        navContent = navContent.replace(
          /(<Stack\.Screen\s+name=.*)/,
          `$1\n        <Stack.Screen name="${screenName}" component={${screenName}Screen} />`
        );
      }
      await fs.writeFile(navPath, navContent);
    }

    return {
      content: [
        {
          type: "text",
          text: `Generated ${screenName}Screen at ${filePath}`,
        },
      ],
    };
  }

  async analyzeComponents(projectPath) {
    const componentsPath = path.join(projectPath, "src", "components");
    const report = {
      totalComponents: 0,
      componentTypes: { functional: 0, class: 0 },
      hooksUsed: {},
      commonPatterns: [],
    };

    if (!(await fs.pathExists(componentsPath))) {
      return {
        content: [{ type: "text", text: "No components directory found" }],
      };
    }

    const files = await fs.readdir(componentsPath);
    const tsxFiles = files.filter((f) => f.endsWith(".tsx") || f.endsWith(".jsx"));

    for (const file of tsxFiles) {
      const content = await fs.readFile(path.join(componentsPath, file), "utf-8");
      report.totalComponents++;

      // Detect functional vs class components
      if (/const\s+\w+\s*=\s*\(/g.test(content) || /function\s+\w+\s*\(/g.test(content)) {
        report.componentTypes.functional++;
      } else if (/class\s+\w+\s+extends/g.test(content)) {
        report.componentTypes.class++;
      }

      // Detect hooks
      const hooks = ["useState", "useEffect", "useContext", "useCallback", "useMemo", "useRef"];
      hooks.forEach((hook) => {
        if (content.includes(hook)) {
          report.hooksUsed[hook] = (report.hooksUsed[hook] || 0) + 1;
        }
      });
    }

    return {
      content: [
        {
          type: "text",
          text: JSON.stringify(report, null, 2),
        },
      ],
    };
  }

  async run() {
    const transport = new StdioServerTransport();
    await this.server.connect(transport);
    console.error("React Native MCP Server running on stdio");
  }
}

const server = new ReactNativeMcpServer();
server.run();

{
  "mcpServers": {
    "react-native": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-react-native-server/index.js"],
      "description": "React Native MCP server for Claude Code"
    }
  }
}

cd /path/to/your/react-native-project
claude-code

Use the MCP server to:
1. Analyze my project structure
2. Run doctor to check my environment
3. Generate a new "Settings" screen as a stack screen
4. Report what hooks patterns my components use

// Add to your tool handlers
{
  name: "expoStart",
  description: "Start Expo development server",
  inputSchema: {
    type: "object",
    properties: {
      projectPath: { type: "string" },
      platform: {
        type: "string",
        enum: ["ios", "android", "web"],
        default: "ios"
      },
    },
    required: ["projectPath"],
  },
}

async expoStart(args) {
  const { projectPath, platform } = args;
  return new Promise((resolve) => {
    exec(
      `npx expo start --${platform}`,
      { cwd: projectPath },
      (error, stdout, stderr) => {
        resolve({
          content: [{ type: "text", text: stdout }],
        });
      }
    );
  });
}

Ask Claude: "Explain the navigation architecture and show me how screens are registered"

Ask Claude: "Run doctor and fix any issues, then generate missing unit tests for new screens"

Ask Claude: "Check for outdated packages and suggest updates, especially around React Navigation and Expo SDK"

# Check Node version (needs 18+)
node --version

# Install dependencies
cd mcp-react-native-server
npm install

# Test directly
node index.js

# Check Claude Code sees the MCP server
claude-code --list-mcp-servers