react-native

React Native Best Practices

This guide outlines the mandatory practices for React Native development. Adherence ensures a consistent, high-quality, and scalable codebase.

1. Code Organization and Structure

Adopt a feature-based structure with clear separation of concerns.

1.1. Feature-First Directory Structure

Organize code by feature, not by type. Each component, screen, or hook should reside in its own directory with co-located styles and tests.

✅ GOOD:

src/
├── features/
│   ├── Auth/
│   │   ├── components/
│   │   │   ├── LoginForm/
│   │   │   │   ├── LoginForm.tsx
│   │   │   │   ├── LoginForm.styles.ts
│   │   │   │   └── LoginForm.test.tsx
│   │   ├── screens/
│   │   │   ├── LoginScreen/
│   │   │   │   ├── LoginScreen.tsx
│   │   │   │   ├── LoginScreen.styles.ts
│   │   │   │   └── LoginScreen.test.tsx
│   │   └── hooks/
│   │       └── useAuth.ts
│   ├── Profile/
│   └── ...
├── components/ # Shared, generic UI components
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.styles.ts
│   │   └── Button.test.tsx
│   └── ...
├── navigation/ # App-level navigation config
├── services/   # Global API clients, utility services
├── utils/      # Generic helper functions
├── types/      # Global TypeScript types
└── App.tsx

1.2. File Naming and Co-location

Use PascalCase for components/screens, camelCase for hooks/utilities. Co-locate related files.

❌ BAD:

// components/Button.js
// components/buttonStyles.js
// components/buttonTests.js

✅ GOOD:

// components/Button/Button.tsx
// components/Button/Button.styles.ts
// components/Button/Button.test.tsx

1.3. Absolute Imports

Configure and use absolute imports to avoid deeply nested relative paths.

❌ BAD:

import { Button } from '../../../../components/Button/Button';

✅ GOOD:

import { Button } from '@components/Button/Button';

tsconfig.json (or jsconfig.json):

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@features/*": ["src/features/*"],
      "@navigation/*": ["src/navigation/*"],
      "@services/*": ["src/services/*"],
      "@utils/*": ["src/utils/*"],
      "@types/*": ["src/types/*"]
    }
  }
}