mcp-react-native-toolkit copilot-instructions.md

GitHub Copilot (VS Code) Instructions

Project Context

React Native/Expo Mobile Development Project

This project uses React Native and/or Expo for cross-platform mobile development. Follow these guidelines to provide accurate and helpful assistance.

Core Rules

• Always detect project context before suggesting code (check package.json for versions)
• Verify APIs exist for the detected React Native/Expo version before suggesting
• Use TypeScript with proper type annotations unless the project uses JavaScript
• Follow React Native performance best practices (memo, useCallback, FlatList optimization)
• Prefer functional components with hooks over class components
• Handle platform differences when necessary using Platform.OS or platform-specific files

API Validation

• Check React Native version before using new APIs (e.g., useWindowDimensions requires RN 0.61+)
• Check Expo SDK version for Expo-specific APIs
• Verify third-party library versions (React Navigation, Reanimated, Gesture Handler, etc.)
• Use optional chaining and nullish coalescing for safer code
• Import from correct packages (react-native vs expo-* vs @react-navigation/*)

Best Practices

• Use FlatList/SectionList for long lists, never ScrollView with many items
• Implement proper loading states and error handling
• Use React.memo() for pure components that render often
• Avoid inline functions in render for frequently re-rendering components
• Use StyleSheet.create() instead of inline styles for performance
• Handle keyboard avoiding behavior for forms
• Test on both iOS and Android platforms
• Use proper accessibility labels and hints

Navigation

• Use React Navigation for routing (@react-navigation/native)
• Properly type navigation props with TypeScript
• Use navigation.navigate() with proper screen names
• Handle deep linking when required
• Configure proper header options for screens

State Management

• Use React Context for simple state sharing
• Consider Zustand, Jotai, or Redux Toolkit for complex state
• Use React Query or SWR for server state
• Persist state with MMKV or AsyncStorage as appropriate
• Avoid prop drilling more than 2-3 levels deep