loading…
Search for a command to run...
loading…
An MCP server designed for React Native and Expo development that provides specialized tools for project scaffolding, architectural best practices, and troubles
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.
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.
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.
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 |
| 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 |
| 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 |
init-mobile-project — interactive wizard that asks about your project and calls the right tools.
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
MIT
Добавь это в claude_desktop_config.json и перезапусти Claude Desktop.
{
"mcpServers": {
"react-native-expo-mcp": {
"command": "npx",
"args": []
}
}
}