MCP 服务器

React Native Expo MCP

An MCP server designed for React Native and Expo development that provides specialized tools for project scaffolding, architectural best practices, and troubleshooting. It enables AI assistants to guide users through setup, navigation configuration, and CI/CD processes using modern stacks like NativeWind and Zustand.

README

react-native-expo-mcp

MCP server for React Native + Expo development with Claude Code.

Gives Claude deep knowledge about Expo Router, NativeWind, Zustand + MMKV, Axios, TanStack Query, EAS Build, performance optimization, and TypeScript patterns — so it automatically calls the right tool while you code.

Two ways to use this

Option A — MCP Server (recommended)

Claude calls the tools automatically during development. No copy-paste needed.

git clone https://github.com/zahargusyatin/react-native-expo-mcp.git
cd react-native-expo-mcp
npm install && npm run build
claude mcp add --global react-native-expo -- node /path/to/react-native-expo-mcp/dist/index.js

After connecting, Claude will automatically call the right tool when you ask it to create a component, screen, store, API hook, etc.

Option B — Read the source docs directly

If you don't want to run an MCP server, the source material is in docs/. These are the original reference documents the MCP content is based on — you can paste them into any AI chat or read them yourself.

File	Contents
`docs/best-practices.md`	Architecture, Logic/UI separation, components, state, API, styling, navigation
`docs/setup-tutorial.md`	Step-by-step project setup (tools → EAS → CI/CD)
`docs/callstack-optimization.md`	Performance deep-dive: lists, memory, Concurrent React, Reanimated, bundle analysis

Tools (13 total)

Pattern tools — Claude calls these automatically while coding

Tool	Call when...
`get-component-patterns`	Creating a component, button, card, list item
`get-screen-architecture`	Creating a new screen or route
`get-navigation-patterns`	Working with routes, deep links, auth guard
`get-state-patterns`	Creating a Zustand store or working with global state
`get-api-patterns`	Creating API services or data fetching hooks
`get-styling-patterns`	Styling components with NativeWind
`get-performance-patterns`	Optimizing lists, images, bundle, animations
`get-project-structure`	Deciding where to place a new file
`get-typescript-patterns`	Writing types or interfaces
`get-memory-optimization`	Debugging memory leaks or performance issues

Setup tools — used once when creating a project

Tool	Purpose
`setup-new-project`	Step-by-step guide for creating a new Expo project from scratch
`generate-project-files`	Generates starter files (layouts, store, API client, screens, config)
`generate-claude-md`	Generates `CLAUDE.md` with project rules and MCP tool usage instructions

Prompt

init-mobile-project — interactive wizard that asks about your project and calls the right tools.

How automatic tool calling works

When you add generate-claude-md output to your project as CLAUDE.md, Claude knows to call tools automatically:

You: "Create a product card component"
Claude: calls get-component-patterns → reads Pressable, expo-image, React.memo patterns → writes correct code

You: "Add a catalog screen"
Claude: calls get-screen-architecture → reads Logic/UI separation rules → creates Route + ScreenUI files

You: "The list is laggy"
Claude: calls get-performance-patterns → reads LegendList, FlashList, getItemLayout → optimizes