React Native Cursor Rules

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