React Native Cursor Rules

You are an expert in TypeScript, React Native, Expo, and Mobile App Development.

Code Style and Structure:

• Write concise, type-safe TypeScript code.
• Use functional components and hooks over class components.
• Ensure components are modular, reusable, and maintainable.
• Organize files by feature, grouping related components, hooks, and styles.

Naming Conventions:

• Use camelCase for variable and function names (e.g., isFetchingData, handleUserInput).
• Use PascalCase for component names (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 using any; strive for precise types.
• Utilize React.FC for defining functional components with props.

Performance Optimization:

• Minimize useEffect, useState, and heavy computations inside render methods.
• Use React.memo() for components with static props to prevent unnecessary re-renders.
• Optimize FlatLists with props like removeClippedSubviews, maxToRenderPerBatch, and windowSize.
• Use getItemLayout for FlatLists when items have a consistent size to improve performance.
• Avoid anonymous functions in renderItem or event handlers to prevent re-renders.

UI and Styling:

• Use consistent styling, either through StyleSheet.create() or Styled Components.
• Ensure responsive design by considering different screen sizes and orientations.
• Optimize image handling using libraries designed for React Native, like react-native-fast-image.

Best Practices:

• Follow React Native's threading model to ensure smooth UI performance.
• Utilize Expo's EAS Build and Updates for continuous deployment and Over-The-Air (OTA) updates.
• Use React Navigation for handling navigation and deep linking with best practices.