Skip to content

react-native-development-guidelines.md

Latest commit

 

History

History
193 lines (158 loc) · 5.88 KB

react-native-development-guidelines.md

File metadata and controls

193 lines (158 loc) · 5.88 KB

🧭 React Native Development Guidelines

📁 Project Structure

Follow the predefined folder structure:

src/
├── app/                          # App-level configuration
│   ├── config/                   # App config (env vars, runtime configs)
│   ├── constants/                # App-wide constants
│   └── types/                    # Global TypeScript types/interfaces
│
├── assets/                       # Static assets (images, fonts, icons)
│   ├── images/
│   ├── icons/
│
├── components/                   # Reusable UI components
│   ├── common/                   # Shared across features
│   ├── layout/                   # App-wide layouts
│   └── ui/                       # Atomic UI primitives (Button, Input)
│
├── pages/                     # Feature-based modules
│   ├── auth/
│   └── webview/
│   # Each feature can optionally have:
│   # ├── components/
│   # ├── hooks/
│   # └── screens/
│
├── sections/
│   ├── hero/
│   │   ├── Hero.tsx
│   │   ├── config.ts                     # Configuration schema or defaults
│   │   ├── styles.ts                     # Optional styles
│   │   └── index.ts                      # e.g., Hero banner section
│   ├── testimonial/              # Testimonials
│   ├── product-carousel/         # Product slider/carousel
│   ├── features-grid/            # Feature list/grid
│   └── index.ts
│
├── graphql/                      # Global GraphQL setup
│   └── queries/
│
├── shared/                       # Shared non-UI logic
│   ├── api/                      # API abstraction layer if needed
│   ├── hooks/                    # Reusable hooks
│   ├── utils/                    # Utility functions
│   └── providers/                # App-level context providers
│
├── navigation/                   # Navigation config
│   ├── routes/
│   ├── types/
│   └── index.ts
│
├── locales/                      # i18n files
│   ├── en/
│   ├── hi/
│   └── index.ts
└── __tests__/                    # Unit + integration tests
    ├── components/
    ├── features/
    └── utils/
  • Co-locate logic (e.g., hooks, graphql, services) inside the features/ folder when specific to a domain.

💅 Code Style & Standards

  • Use Prettier and ESLint.
  • Stick to TypeScript — no any, avoid as casting unless safe.
  • Prefer arrow functions and function components.
  • Avoid in line styles
  • Avoid using hardCoded Colors
  • Use absolute imports instead of relative paths (via tsconfig.json paths).
  • Keep component files short and focused (max ~300 lines).
  • Component naming: PascalCase, file naming: kebab-case.

⚛️ Component Guidelines

  • Break components into:
    • ui/: Atomic components (Button, TextInput)
    • layout/: Page layouts or screen wrappers
    • common/: Reusable composite components
  • Keep components pure and stateless when possible.
  • Use React.memo() and useCallback for performance-sensitive components.

🔗 GraphQL

  • use FPI to fetch data from graphql
const platformData = await fpiClient.executeGQL(PLATFORM_CONFIG_QUERY, {});

Store

  • use FPI getters to fetch data from store
const platformData = useSelector(fpi.getters.PLATFORM_DATA);
  • if you want to store custom values in store you can make use of fpi.custom.setValue
fpi.custom.setValue('customeKey', customValue);
// to fetch the value
const customValues = useSelector(fpi.getters.CUSTOM_VALUE);

📱 Navigation

  • Use @react-navigation/native
  • Define routes in navigation/routes/ and types in navigation/types/
  • Follow screen-per-feature strategy:
    • Screens should live in features/<name>/screens/
    • Navigator logic lives in navigation/

🌐 Internationalization (i18n)

  • All text should come from locales/
  • Use a wrapper like t('key') from i18next or react-intl
  • Default languages: en, hi (expandable)

📦 Dependencies

  • Keep dependencies minimal; prefer native modules only if absolutely necessary.
  • Prefer well-maintained community packages with high adoption.
  • Example must-have packages:
    • @react-navigation/*
    • react-hook-form
    • apollo-client or urql (if GraphQL)
    • react-native-fast-image for images
    • zod or yup for validation

🧪 Testing

  • Write tests under __tests__/
  • Unit test components and utilities with Jest + React Native Testing Library
  • Snapshot tests only where meaningful
  • Example test structure: 
    __tests__/
├── components/
├── features/
└── utils/

🔄 CI/CD & Version Control

  • Feature branches: feature/<name>
  • Bugfix branches: fix/<issue>
  • Use conventional commits:
    • feat: Add login screen
    • fix: Correct image alignment
    • refactor: Simplify form logic
  • Pre-commit hooks:
    • lint-staged, husky

✅ Code Reviews

  • All PRs must:
    • Pass lint & test
    • Follow naming & structure rules
    • Be reviewed by at least one team member
  • PR title should reflect scope (feature, fix, chore)

📋 Documentation

  • Add README to each feature if complex
  • Comment GraphQL operations with descriptions
  • Use JSDoc for utility functions and exported hooks

⚠️ Anti-Patterns to Avoid

  • Avoid:
    • any types
    • Hardcoded strings or styles
    • Overuse of useEffect for logic
    • Deep prop drilling
    • Large components doing too much
  • Always:
    • Split logic into custom hooks
    • Validate forms/types with a schema

✅ Optional: Custom Hooks Checklist

When creating a custom hook:

  • Does it solve a reusable concern?
  • Can it be tested independently?
  • Are side effects isolated inside?