README.md
MCP server for React Native + Expo development with Claude Code.
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
Tech stack covered
- Expo (Managed Workflow) + Expo Router (file-based routing)
- TypeScript strict mode + path aliases
- NativeWind v4 (Tailwind CSS for React Native)
- Zustand + MMKV (state + persistence)
- Axios + TanStack Query v5 (API + server state)
- EAS Build + OTA Updates + GitHub Actions
- react-native-reanimated, expo-image, LegendList / FlashList
- React Compiler (React 19+), Concurrent React, memory profiling
License
MIT
Tools (13)
get-component-patternsProvides patterns for creating components, buttons, cards, or list items.get-screen-architectureProvides architecture guidance for creating a new screen or route.get-navigation-patternsProvides patterns for working with routes, deep links, and auth guards.get-state-patternsProvides patterns for creating a Zustand store or working with global state.get-api-patternsProvides patterns for creating API services or data fetching hooks.get-styling-patternsProvides patterns for styling components with NativeWind.get-performance-patternsProvides patterns for optimizing lists, images, bundles, and animations.get-project-structureProvides guidance on where to place a new file.get-typescript-patternsProvides patterns for writing types or interfaces.get-memory-optimizationProvides guidance for debugging memory leaks or performance issues.setup-new-projectProvides a step-by-step guide for creating a new Expo project from scratch.generate-project-filesGenerates starter files including layouts, store, API client, screens, and config.generate-claude-mdGenerates CLAUDE.md with project rules and MCP tool usage instructions.Configuration
claude_desktop_config.json
{"mcpServers": {"react-native-expo": {"command": "node", "args": ["/path/to/react-native-expo-mcp/dist/index.js"]}}}Try it
→Create a new product card component using NativeWind.
→Add a new catalog screen to my Expo Router project.
→Help me optimize my list performance because it feels laggy.
→Set up a new Zustand store for user authentication.
→Generate a CLAUDE.md file for my current project.