Skip to main content

Project Structure

The overarching objective of this boilerplate's architecture is to ensure a clear separation of concerns and to harness the full potential of React Native. To achieve this, the project structure is thoughtfully organized into distinct sections, each serving a specific purpose.

Specific Top-Level Boilerplate Folders​

FoldersDescription
src/componentsHome to application components, following the atomic design methodology for organizing presentational components.
src/hooksCustom hooks used throughout the application.
src/navigatorsNavigator components responsible for handling navigation.
src/screensScreen components representing various app screens.
src/services ️Houses data fetching and related services.
src/themeHolds theme configuration for the application.
src/translationsConfiguration related to language support.
src/typesCustom type definitions for the project.

Specific Top-Level Boilerplate Files​

FilesDescription
.envEnvironment variables configuration.
jest.config.jsConfiguration file for Jest testing.
jest.setup.jsJest mocking configuration.
tsconfig.jsonTypeScript configuration (for TypeScript projects).
src/App.{js.tsx}Main component of the application.

Atomic Design​

The components folder follows the atomic design methodology. This approach emphasizes modularity and reusability by breaking down elements into atomic components. By doing so, development teams can create more consistent, scalable, and maintainable projects.