Developing Cross-Platform Applications with React Native Web

{
  "title": "Developing Cross-Platform Applications with React Native Web",
  "description": "Guidelines for building applications that run seamlessly on web and mobile using React Native Web.",
  "category": "React Cursor Rules",
  "rules": [
    {
      "id": "react-native-web-setup",
      "description": "Ensure proper setup of React Native Web to enable cross-platform development.",
      "recommendation": "Integrate React Native Web into your existing React Native project by following the official setup guide. This includes configuring your bundler to resolve 'react-native' imports to 'react-native-web' and handling platform-specific code appropriately.",
      "references": [
        "https://necolas.github.io/react-native-web/docs/multi-platform/"
      ]
    },
    {
      "id": "platform-specific-code-handling",
      "description": "Manage platform-specific code to maintain a unified codebase.",
      "recommendation": "Use the 'Platform' module from 'react-native' to conditionally render components or apply styles based on the platform. For more significant differences, create platform-specific files using extensions like '.ios.js', '.android.js', and '.web.js'.",
      "references": [
        "https://necolas.github.io/react-native-web/docs/multi-platform/"
      ]
    },
    {
      "id": "responsive-design-practices",
      "description": "Implement responsive design to ensure a consistent user experience across devices.",
      "recommendation": "Utilize Flexbox for layout and media queries to adjust styles based on screen size. Ensure that your application adapts seamlessly to various screen dimensions and orientations.",
      "references": [
        "https://specteryu.github.io/2024/09/Essential-Tips-for-Building-Cross-Platform-Apps-with-React-Native/"
      ]
    },
    {
      "id": "performance-optimization",
      "description": "Optimize application performance for both web and mobile platforms.",
      "recommendation": "Avoid unnecessary re-renders by using 'React.memo()' and 'PureComponent'. Implement lazy loading for routes and optimize images using libraries like 'react-native-fast-image' to enhance load times and reduce app size.",
      "references": [
        "https://technewscast.io/blog/mobile-app-development-with-react/"
      ]
    },
    {
      "id": "state-management-strategy",
      "description": "Adopt an effective state management strategy suitable for cross-platform applications.",
      "recommendation": "For complex state management, consider using Redux or MobX to maintain a scalable and maintainable state architecture. For smaller applications, local component state may suffice.",
      "references": [
        "https://technewscast.io/blog/mobile-app-development-with-react/"
      ]
    },
    {
      "id": "navigation-implementation",
      "description": "Implement efficient navigation to enhance user experience.",
      "recommendation": "Use 'React Navigation' for smooth screen transitions and implement lazy loading for routes to improve performance by loading screens only when necessary.",
      "references": [
        "https://technewscast.io/blog/mobile-app-development-with-react/"
      ]
    },
    {
      "id": "error-handling",
      "description": "Ensure robust error handling to maintain application stability.",
      "recommendation": "Implement error boundaries to catch and handle errors in the component tree. Utilize tools like Sentry or Firebase Crashlytics for real-time error tracking in production environments.",
      "references": [
        "https://technewscast.io/blog/mobile-app-development-with-react/"
      ]
    },
    {
      "id": "testing-strategy",
      "description": "Develop a comprehensive testing strategy to ensure code quality.",
      "recommendation": "Write unit tests using Jest and perform end-to-end testing with Detox to ensure app stability. Use Flipper for debugging to inspect app states and interactions.",
      "references": [
        "https://technewscast.io/blog/mobile-app-development-with-react/"
      ]
    },
    {
      "id": "security-best-practices",
      "description": "Implement security best practices to protect user data.",
      "recommendation": "Use secure storage mechanisms like 'react-native-keychain' for sensitive data. Ensure all network communications are encrypted using HTTPS and validate all user inputs to prevent security vulnerabilities.",
      "references": [
        "https://www.brilworks.com/blog/guide-to-cross-platform-mobile-app-development/"
      ]
    },
    {
      "id": "accessibility-compliance",
      "description": "Ensure accessibility compliance to provide an inclusive user experience.",
      "recommendation": "Follow platform-specific accessibility guidelines and use React Native's accessibility APIs to make your application usable for all users.",
      "references": [
        "https://reactnative.dev/blog/2021/08/26/many-platform-vision"
      ]
    }
  ]
}