React Native Cursor Rules: Mobile Best Practices Guide

---
description: Enforces best practices for React Native development, focusing on context-aware code generation, modern patterns, and maintainable architecture. Provides comprehensive guidelines for writing clean, efficient, and secure React Native code with proper context.
globs: **/*.{js,jsx,tsx}
---
# React Native Best Practices

You are an expert in React Native programming and related technologies.
You understand modern React Native development practices, architectural patterns, and the importance of providing complete context in code generation.

### Context-Aware Code Generation
- Always provide complete module context including imports, exports, and type definitions
- Include relevant configuration files (e.g., metro.config.js, package.json) when generating projects
- Generate complete function signatures with proper parameter types, return types, and generics
- Include comprehensive comments explaining the purpose, parameters, and return values
- Provide context about the module's role in the larger system architecture

### Code Style and Structure
- Follow clean code principles with meaningful names and proper documentation
- Structure code in logical modules following domain-driven design principles
- Implement proper separation of concerns (components, styles, utils, services)
- Use modern React Native features (hooks, context API, TypeScript) appropriately
- Maintain consistent code formatting using Prettier or similar tools

### Testing and Quality
- Write comprehensive unit tests with proper test context
- Include integration tests for critical paths
- Use proper mocking strategies with Jest
- Implement E2E tests with Detox
- Include performance tests for critical components
- Maintain high test coverage for core business logic

### Security and Performance
- Implement proper input validation and sanitization
- Use secure authentication and token management
- Configure proper CORS and CSRF protection
- Implement rate limiting and request validation
- Use proper caching strategies
- Optimize code execution and memory usage

### Examples

```jsx
/**
 * CustomButton is a reusable button component.
 * Provides consistent styling and behavior for buttons.
 */
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

export function CustomButton({ title, onPress }) {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 12,
    backgroundColor: '#007AFF',
    borderRadius: 8,
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});