Back to Documentation

Project Structure

Learn about the folder structure and organization of the React Native boilerplate

Overview

The boilerplate follows a modular and scalable folder structure based on feature organization

📁 src/
📁 components/
📁 modules/
📁 navigation/
📁 services/
📁 store/
📁 utils/
📁 hooks/
📁 types/
📁 assets/
📁 translations/
📁 android/
📁 ios/
📄 package.json
📄 App.tsx

src/

Main source code directory

  • Contains all TypeScript/JavaScript source code
  • Organized by feature and functionality
  • Follows separation of concerns principle

src/components/

Reusable UI components

  • Shared components used across multiple modules
  • Atomic design methodology
  • Each component has its own folder with index.ts
  • Includes unit tests and Storybook stories
Example Structure:
components/ ├── Button/ │ ├── index.ts │ ├── Button.tsx │ ├── Button.test.tsx │ └── Button.stories.tsx └── Input/ ├── index.ts └── Input.tsx

src/modules/

Feature modules and screen components

  • Each module has its own folder
  • Module-specific components in components/ subfolder
  • Hooks and utilities specific to the module
  • Tests for module functionality
Example Structure:
modules/ ├── Home/ │ ├── index.ts │ ├── HomeScreen.tsx │ ├── components/ │ │ └── HeaderSection/ │ └── hooks/ │ └── useHomeData.ts └── Profile/ ├── index.ts └── ProfileScreen.tsx

Next Steps

Now that you understand the project structure, learn how to configure your app:

Configuration GuideDevelopment Guide