React Native + Expo Development with expo-mcp

Overview

React Native/Expo development using expo-mcp for ALL package operations and production patterns from 13k-star libraries.

Core principle: Use expo-mcp "Add package" (NOT npm install). Search docs before implementing. Apply production patterns.

Announce at start: "I'm using the react-native-expo-development skill for React Native development."

When to Use

• Installing ANY Expo package (Phase 4)
• Implementing React Native components
• Implementing screens
• Searching Expo/RN documentation
• Working with Zustand, React Navigation, Reanimated
• Following performance best practices

expo-mcp Integration (MANDATORY)

Package Installation (NEVER npm install)

❌ WRONG:

npm install zustand
npm install @react-native-async-storage/async-storage

✅ CORRECT:

"Add zustand and show me how to set up a store with AsyncStorage persistence"
"Add @react-native-async-storage/async-storage"
"Add react-native-syntax-highlighter for code display"
"Add react-native-markdown-display for message rendering"

Why: expo-mcp provides:

• Correct version for Expo SDK
• Automatic usage documentation
• Setup examples
• Compatibility verification

Documentation Search

Before implementing features:

"Search Expo docs for navigation patterns"
"Search Expo docs for AsyncStorage persistence"
"Search Expo docs for deep linking setup"

expo-mcp searches with natural language, returns relevant sections

Testing Integration

Add testID to ALL interactive elements:

<TouchableOpacity testID="send-button" onPress={handleSend}>
<TextInput testID="message-input" />
<Pressable testID="settings-button">
<FlatList testID="message-list">

Then test with expo-mcp:

"Find view with testID 'send-button' and verify it's enabled"
"Tap button with testID 'send-button'"
"Take screenshot and verify message sent"

Production Patterns

Message UI (from react-native-gifted-chat)

// MessageBubble component structure
interface MessageBubbleProps {
  message: Message;
  isUser: boolean;
}

export const MessageBubble = React.memo<MessageBubbleProps>(
  ({message, isUser}) => {
    return (
      <View testID={`message-${message.id}`} style={[
        styles.bubble,
        isUser ? styles.userBubble : styles.assistantBubble
      ]}>
        <Text testID={`message-text-${message.id}`}>{message.content}</Text>
        <Text style={styles.timestamp}>{formatTime(message.timestamp)}</Text>
      </View>
    );
  },
  (prev, next) => prev.message.id === next.message.id
);

FlatList Optimization (from Context7 docs)

<FlatList
  testID="message-list"
  data={messages}
  renderItem={renderMessage}
  keyExtractor={(item) => item.id}
  inverted={true} // For chat (newest at bottom)
  windowSize={10}
  maxToRenderPerBatch={10}
  removeClippedSubviews={true}
  initialNumToRender={10}
/>

const renderMessage = useCallback((info: ListRenderItemInfo<Message>) => (
  <MessageBubble message={info.item} isUser={info.item.role === 'user'} />
), []);

Zustand Store with AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

export const useAppStore = create<AppState>()(
  persist(
    (set) => ({
      settings: {...},
      updateSettings: (settings) => set({settings}),
    }),
    {
      name: 'claude-code-storage',
      storage: createJSONStorage(() => AsyncStorage),
      partialize: (state) => ({
        settings: state.settings,
        // Don't persist messages (too large)
      })
    }
  )
);

Optimistic UI (from stream-chat-react-native)

const sendMessage = (text: string) => {
  const optimisticMessage = {
    id: `temp-${Date.now()}`,
    text,
    status: 'sending'
  };
  
  addMessage(optimisticMessage); // Show immediately
  
  websocket.send({type: 'message', message: text});
  // Update when confirmed
};

Component Best Practices

Structure with testID

interface ComponentProps {
  data: Data;
  onPress: () => void;
}

export const Component = React.memo<ComponentProps>(({data, onPress}) => {
  const handlePress = useCallback(() => {
    onPress();
  }, [onPress]);
  
  return (
    <TouchableOpacity testID="component-container" onPress={handlePress}>
      <Text testID="component-text">{data.text}</Text>
    </TouchableOpacity>
  );
});

Styling

Use StyleSheet.create (NOT inline):

import {COLORS, SPACING, TYPOGRAPHY} from '../constants/theme';

const styles = StyleSheet.create({
  container: {
    padding: SPACING.base,
    backgroundColor: COLORS.backgroundGradient.start,
  },
  text: {
    fontSize: TYPOGRAPHY.fontSize.md,
    color: COLORS.textPrimary,
  },
});

Common Mistakes

Red Flags

• "npm install is fine" → WRONG. Use expo-mcp.
• "Don't need patterns" → WRONG. 13k stars prove value.
• "testID is optional" → WRONG. Required for autonomous testing.

Integration

• Use WITH: @claude-mobile-metro-manager (Metro required)
• Use FOR: All Phase 4 implementation
• Enables: expo-mcp autonomous testing in Gate 4A