Clean and Scalable React Native Expo Project Structure for Modern Apps

Introduction 🚀

When building a React Native app with Expo, having a clean and scalable folder structure can make a huge difference. A well-organized project helps developers work efficiently, reduces bugs, and makes it easier to scale features in the future.

In this blog, I’ll guide you through:

• A production-ready folder structure for React Native Expo.

• How to organize your files and folders.

Best practices for building modern and scalable mobile apps.

Why a Clean Project Structure Matters 🛠️

A messy project can lead to:

• Difficulty finding files.

• Duplicate code and components.

• Confusion for team members or future developers.

With a clean folder structure, you get:
✅ Scalability: Add new features easily.
✅ Maintainability: Manage code efficiently.
✅ Reusability: Share components, constants, and logic.

A good folder structure saves time and makes your app development smoother!

Overview of the Folder Structure 🗂️

root/
├── assets/                          # Static assets like fonts, images, and icons.
│   ├── fonts/                       # Custom fonts (e.g., Roboto, OpenSans).
│   ├── images/                      # App images (e.g., product placeholders, logos).
│   └── icons/                       # App icons (e.g., cart, profile icons).
├── src/                             # Main source folder for all app logic.
│   ├── app/                         # Expo Router-based file system routing.
│   │   ├── _layout.tsx              # Root layout wrapping navigation logic.
│   │   ├── index.tsx                # Home screen showing featured products.
│   │   ├── login/                   # Screens for user login.
│   │   ├── register/                # Screens for user registration.
│   │   ├── products/                # Routes for product listings and details.
│   │   │   ├── _layout.tsx          # Layout wrapper for products.
│   │   │   ├── index.tsx            # Products listing screen.
│   │   │   └── [productId].tsx      # Dynamic product detail page.
│   │   ├── cart/                    # Screens for shopping cart.
│   │   ├── orders/                  # User order history and details.
│   │   └── profile/                 # User profile and settings screens.
│   ├── components/                  # Reusable UI components for consistency.
│   │   ├── common/                  # Common components (e.g., Button, Input, Loader).
│   │   ├── ProductCard.tsx          # Component to display product cards in list views.
│   │   └── CartItem.tsx             # Component for individual cart items.
│   ├── constants/                   # App-wide constants for reusability.
│   │   ├── colors.ts                # Centralized color palette.
│   │   ├── routes.ts                # Route names for navigation.
│   │   └── messages.ts              # Static messages or text content.
│   ├── hooks/                       # Custom hooks for logic abstraction.
│   │   ├── useAuth.ts               # Hook for handling authentication.
│   │   └── useCart.ts               # Hook for cart-related logic.
│   ├── redux/                       # State management using Redux Toolkit.
│   │   ├── store.ts                 # Redux store configuration.
│   │   ├── slices/                  # Individual Redux slices for state.
│   │   │   ├── authSlice.ts         # Auth state logic.
│   │   │   ├── productSlice.ts      # Product state logic.
│   │   │   └── cartSlice.ts         # Cart state logic.
│   ├── services/                    # API services for network calls.
│   │   ├── apiClient.ts             # Axios instance with base URL.
│   │   ├── productService.ts        # APIs for product listings and details.
│   │   └── authService.ts           # APIs for login and registration.
│   ├── styles/                      # Global and theme-based styles.
│   │   ├── globalStyles.ts          # Global reusable styles.
│   │   └── theme.ts                 # Theme configuration (colors, fonts, spacing).
│   ├── types/                       # TypeScript interfaces and types.
│   │   ├── Product.ts               # Product type definition.
│   │   └── Cart.ts                  # Cart item type definition.
│   └── utils/                       # Utility functions for app logic.
│       ├── helpers.ts               # General helper functions.
│       └── formatCurrency.ts        # Function to format currency values.
├── App.tsx                          # Entry point for the React Native app.
├── package.json                     # Project dependencies and scripts.
└── tsconfig.json                    # TypeScript configuration file.

Detailed Explanation of Each Folder 📄

1. assets/ 🎨

   Purpose: File-based routing using Expo Router. Each folder represents a route.

├── app/                         
│   ├── _layout.tsx        # Root layout for navigation
│   ├── index.tsx          # Home screen
│   ├── products/          # Product screens
│   │   ├── index.tsx      # Product list
│   │   └── [productId].tsx # Dynamic product details

2. app/ 📱

   Purpose: File-based routing using Expo Router. Each folder represents a route.

├── app/                         
│   ├── _layout.tsx        # Root layout for navigation
│   ├── index.tsx          # Home screen
│   ├── products/          # Product screens
│   │   ├── index.tsx      # Product list
│   │   └── [productId].tsx # Dynamic product details

3. components/ 🧩

   Purpose: Reusable UI components.

Example:

• Button.tsx (Custom Button component).

• ProductCard.tsx (Reusable product card component).

4. constants/ 🔗

   Purpose: Centralized app constants (colors, routes, messages).

export const COLORS = {
  primary: '#3498db',
  secondary: '#2ecc71',
};

5. hooks/ 🎣

   Purpose: Custom React hooks to abstract logic.

   Example:

   • useAuth.ts (Handle user login/logout).

   • useCart.ts (Manage cart items).

6. redux/ 🗄️

   Purpose: State management using Redux Toolkit.

redux/                        
├── store.ts                 # Redux store
├── slices/                  
│   ├── authSlice.ts         # Authentication state
│   ├── productSlice.ts      # Product state
│   └── cartSlice.ts         # Cart state

7. services/ 🔌

Purpose: API services and network logic.

Example:

• globalStyles.ts (Reusable global styles).

• theme.ts (Colors, font sizes, spacing).

8. types/ 📝

   Purpose: TypeScript types for props, state, and API responses.

export interface Product {
  id: string;
  name: string;
  price: number;
  image: string;
}

9. utils/ 🛠️

Purpose: Utility functions for common tasks.

Example:

formatCurrency.ts (Format prices like $99.99).

Key Best Practices 💡

1. Keep It Modular: Break code into reusable components.

2. Centralize Constants: Use constants for routes, colors, and messages.

3. State Management: Use Redux or Context API for managing app state.

4. TypeScript: Define types for props, states, and API responses.

Clean Code: Use tools like ESLint and Prettier for consistency.

Conclusion 🎉

By following this clean and scalable project structure, you can:
✅ Build organized, maintainable apps.
✅ Scale your app effortlessly as it grows.
✅ Improve team collaboration and code quality.

Start implementing this in your React Native Expo projects today, and build apps that are production-ready and easy to maintain! 🚀