Skip to main content

Rules and Conventions

To maintain a consistent code style and prevent common issues in the codebase, this starter enforces a set of rules and conventions throughout the project.

TypeScript​

This starter uses TypeScript to provide type safety and reduce bugs in the codebase. The project configuration is based on Expo, with adjustments to support absolute imports.

If you are new to TypeScript, you can read this article: Typescript for React Developers.

More information can be found in the Expo TypeScript Guide.

Naming Conventions​

  • Static files and resources (assets, docs, etc.) use kebab-case.
  • Folders use camelCase.
  • Main files follow the Modular File Naming convention.

Example: Order Feature Module​

Suppose you are building a group of screens for the "order" feature. You can organize them in an order folder as follows:

Screens​

  • order.list.screen.tsx
    Displays the order list screen (Main function: OrderListScreen)
  • order.detail.screen.tsx
    Displays the order detail screen (Main function: OrderDetailScreen)
  • order.create.screen.tsx
    Displays the order creation screen (Main function: OrderCreateScreen)

Components​

  • order.create.form.tsx
    Form component for creating an order, used within order.create.screen.tsx (located in the /components subfolder of order, without the "screen" suffix)

Global Components​

Except for base and form components (which use the special prefixes B** and F**), all global components must include "component" in both the file and variable names:

  • base.button.component.tsx
    Basic button component (Main function: BButton)
  • form.textInput.component.tsx
    Form input component (Main function: FTextInput)
  • global.dialog.component.tsx
    Global dialog component (Main function: GlobalDialogComponent)
  • global.toast.component.tsx
    Global toast component (Main function: GlobalToastComponent)

Other Files​

  • date.constant.ts
    Contains constants for date handling
  • date.helper.ts
    Contains helper functions for date handling
  • user.model.ts
    Defines models for user-related entities
  • auth.store.ts
    Contains stores for state and actions related to authentication
  • auth.api.ts
    Contains APIs related to authentication
  • auth.login.queries.ts
    Contains hooks and React Query logic for the login feature in the authentication module

Interfaces, Constants, Enums, and Types​

  • Interfaces, Enums, and Types use PascalCase.
  • Static constants use UPPER_CASE.

Examples:

  • Interface: IOrder, IUser, IProduct
  • Enum: EOrderStatus, EUserRole
  • Type: Type used for quick definition, usually comes with corresponding suffix: BButtonProps, LoginResponse, etc
  • Constant: ORDER_STATUS, USER_ROLE