Clean and Scalable React Native Expo Project Structure for Modern Apps
A Step-by-Step Guide to Organize and Scale Your React Native Expo Applications
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.
| Folder/File | Description | Example Content |
| assets/ | Static resources like fonts, images, and icons. | logo.png, productPlaceholder.png. |
| app/ | Expo Router-based folder for navigation and screens. | products/index.tsx, cart/index.tsx. |
| components/ | Reusable UI components for buttons, inputs, cards, and lists. | Button.tsx, ProductCard.tsx. |
| constants/ | Centralized app constants like colors, routes, and messages. | COLORS.primary, ROUTES.PRODUCTS. |
| hooks/ | Custom hooks to abstract logic like authentication or cart management. | useAuth.ts, useCart.ts |
| redux/ | State management setup using Redux Toolkit. | authSlice.ts, cartSlice.ts. |
| services/ | API logic using Axios for interacting with backend services. | productService.ts, authService.ts |
| styles/ | Global styles and themes for consistent UI design. | globalStyles.ts, theme.ts. |
| types/ | TypeScript type definitions for API responses, components, or state. | Product.ts, Cart.ts. |
| utils/ | Utility functions for formatting, validation, or common operations. | formatCurrency.ts, helpers.ts |
Detailed Explanation of Each Folder 📄
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
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
components/ 🧩
Purpose: Reusable UI components.
Example:
Button.tsx(Custom Button component).ProductCard.tsx(Reusable product card component).
constants/ 🔗
Purpose: Centralized app constants (colors, routes, messages).
export const COLORS = {
primary: '#3498db',
secondary: '#2ecc71',
};
hooks/ 🎣
Purpose: Custom React hooks to abstract logic.
Example:
useAuth.ts(Handle user login/logout).useCart.ts(Manage cart items).
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
services/ 🔌
Purpose: API services and network logic.
Example:
globalStyles.ts(Reusable global styles).theme.ts(Colors, font sizes, spacing).
types/ 📝
Purpose: TypeScript types for props, state, and API responses.
export interface Product {
id: string;
name: string;
price: number;
image: string;
}
utils/ 🛠️
Purpose: Utility functions for common tasks.
Example:
formatCurrency.ts (Format prices like $99.99).
Key Best Practices 💡
Keep It Modular: Break code into reusable components.
Centralize Constants: Use constants for routes, colors, and messages.
State Management: Use Redux or Context API for managing app state.
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! 🚀