React Native Cursor Rules
Expert guidelines for React Native development by Will Sims, focusing on type-safe TypeScript code, performance optimization, and maintainable component architecture.
Code Style and Structure Write concise, type-safe TypeScript code Use functional components and hooks instead of class components Ensure components are modular, reusable, and maintainable Organize files by feature, grouping related components, hooks, and styles Naming Conventions Use camelCase for variables and functions (e.g., isFetchingData, handleUserInput) Use PascalCase for components (e.g., UserProfile, ChatScreen) Directory names should be lowercase and hyphenated (e.g., user-profile, chat-screen) TypeScript Usage Use TypeScript for all components, favoring interfaces for props and state Enable strict typing in tsconfig.json Avoid any type; strive for precise types Utilize React.FC for defining functional components with props Performance Optimization Minimize useEffect, useState, and heavy computations in render methods Use React.memo() for components with static props to prevent unnecessary re-renders Optimize FlatLists with the following props: removeClippedSubviews maxToRenderPerBatch windowSize Use getItemLayout for consistent-sized FlatList items Avoid anonymous functions in renderItem or event handlers UI and Styling Use consistent styling via StyleSheet.create() or Styled Components Ensure responsive design for different screen sizes and orientations Optimize images using react-native-fast-image Best Practices Follow React Native's threading model for smooth performance Utilize Expo's EAS Build and Over-The-Air updates Use React Navigation for navigation and deep linking