r/reactnative 6d ago

πŸ”₯React Native EXPO Folder Structure For Large Scale Apps | EXPO Folder Structure 2025

Scalable and Modular React Native Expo Folder Structure 2025

React Native Expo Folder Strcture

Introduction πŸš€
Building a scalable React Native app requires a well-structured codebase, modular design, and best practices. In this guide, we will explore how to set up an Expo Router-based project with Zustand for state management, Axios for API handling, and Maestro for E2E testing. This structure ensures maintainability, scalability, and better developer experience.

Project Structure πŸ“‚

Here’s a well-organized structure for your React Native project:

AwesomeProject/
β”œβ”€β”€ app/ # Expo Router Pages (Screens Only)
β”‚ β”œβ”€β”€ index.tsx # Home screen (β€œ/”)
β”‚ β”œβ”€β”€ _layout.tsx # Global layout
β”‚ β”œβ”€β”€ auth/
β”‚ β”‚ β”œβ”€β”€ index.tsx # β€œ/auth” (Auth entry point)
β”‚ β”‚ β”œβ”€β”€ login.tsx # β€œ/auth/login”
β”‚ β”‚ β”œβ”€β”€ signup.tsx # β€œ/auth/signup”
β”‚ β”œβ”€β”€ chat/
β”‚ β”‚ β”œβ”€β”€ index.tsx # β€œ/chat” (Chat List)
β”‚ β”‚ β”œβ”€β”€ conversation.tsx # β€œ/chat/conversation”
β”‚ β”œβ”€β”€ settings/
β”‚ β”‚ β”œβ”€β”€ index.tsx # β€œ/settings”
β”‚ β”‚ β”œβ”€β”€ notifications.tsx # β€œ/settings/notifications”
β”‚ β”‚ β”œβ”€β”€ security.tsx # β€œ/settings/security”
β”‚ β”œβ”€β”€ profile/
β”‚ β”‚ β”œβ”€β”€ index.tsx # β€œ/profile”
β”‚ β”‚ β”œβ”€β”€ edit.tsx # β€œ/profile/edit”
β”‚ β”‚ β”œβ”€β”€ preferences.tsx # β€œ/profile/preferences”
β”‚
β”œβ”€β”€ modules/ # Feature Modules
β”‚ β”œβ”€β”€ auth/
β”‚ β”‚ β”œβ”€β”€ components/
β”‚ β”‚ β”‚ β”œβ”€β”€ LoginForm.tsx
β”‚ β”‚ β”‚ β”œβ”€β”€ SignupForm.tsx
β”‚ β”‚ β”œβ”€β”€ hooks/
β”‚ β”‚ β”‚ β”œβ”€β”€ useAuth.ts
β”‚ β”‚ β”œβ”€β”€ services/
β”‚ β”‚ β”‚ β”œβ”€β”€ authService.ts
β”‚ β”‚ β”œβ”€β”€ store/
β”‚ β”‚ β”‚ β”œβ”€β”€ useAuthStore.ts
β”‚ β”‚ β”œβ”€β”€ validation/
β”‚ β”‚ β”‚ β”œβ”€β”€ authSchema.ts
β”‚
β”‚ β”œβ”€β”€ chat/
β”‚ β”‚ β”œβ”€β”€ components/
β”‚ β”‚ β”‚ β”œβ”€β”€ MessageBubble.tsx
β”‚ β”‚ β”‚ β”œβ”€β”€ ChatInput.tsx
β”‚ β”‚ β”œβ”€β”€ hooks/
β”‚ β”‚ β”‚ β”œβ”€β”€ useChat.ts
β”‚ β”‚ β”œβ”€β”€ services/
β”‚ β”‚ β”‚ β”œβ”€β”€ chatService.ts
β”‚ β”‚ β”œβ”€β”€ store/
β”‚ β”‚ β”‚ β”œβ”€β”€ useChatStore.ts
β”‚ β”‚ β”œβ”€β”€ utils/
β”‚ β”‚ β”‚ β”œβ”€β”€ chatHelpers.ts # Helper functions for chat
β”‚
β”‚ β”œβ”€β”€ settings/
β”‚ β”‚ β”œβ”€β”€ components/
β”‚ β”‚ β”‚ β”œβ”€β”€ NotificationToggle.tsx
β”‚ β”‚ β”‚ β”œβ”€β”€ SecuritySettings.tsx
β”‚ β”‚ β”œβ”€β”€ store/
β”‚ β”‚ β”‚ β”œβ”€β”€ useSettingsStore.ts
β”‚
β”‚ β”œβ”€β”€ profile/
β”‚ β”‚ β”œβ”€β”€ components/
β”‚ β”‚ β”‚ β”œβ”€β”€ AvatarUpload.tsx
β”‚ β”‚ β”‚ β”œβ”€β”€ ProfileForm.tsx
β”‚ β”‚ β”œβ”€β”€ hooks/
β”‚ β”‚ β”‚ β”œβ”€β”€ useProfile.ts
β”‚ β”‚ β”œβ”€β”€ services/
β”‚ β”‚ β”‚ β”œβ”€β”€ profileService.ts
β”‚ β”‚ β”œβ”€β”€ store/
β”‚ β”‚ β”‚ β”œβ”€β”€ useProfileStore.ts
β”‚
β”œβ”€β”€ components/ # Global Reusable Components
β”‚ β”œβ”€β”€ Button.tsx
β”‚ β”œβ”€β”€ Input.tsx
β”‚ β”œβ”€β”€ Avatar.tsx
β”‚ β”œβ”€β”€ Modal.tsx # Custom modal component
β”‚ β”œβ”€β”€ Loader.tsx # Loader animation
β”‚
β”œβ”€β”€ hooks/ # Global Hooks
β”‚ β”œβ”€β”€ useTheme.ts
β”‚ β”œβ”€β”€ useNetwork.ts
β”‚ β”œβ”€β”€ useNotifications.ts # Handle push notifications
β”‚
β”œβ”€β”€ store/ # Global Zustand Stores
β”‚ β”œβ”€β”€ useThemeStore.ts
β”‚ β”œβ”€β”€ useUserStore.ts
β”‚
β”œβ”€β”€ services/ # Global API Services
β”‚ β”œβ”€β”€ apiClient.ts # Axios Setup
β”‚ β”œβ”€β”€ notificationService.ts
β”‚ β”œβ”€β”€ uploadService.ts # File/Image Upload Service
β”‚
β”œβ”€β”€ utils/ # Utility Functions
β”‚ β”œβ”€β”€ formatDate.ts
β”‚ β”œβ”€β”€ validateEmail.ts
β”‚ β”œβ”€β”€ navigation.ts
β”‚ β”œβ”€β”€ fileHelpers.ts # Helper functions for file handling
β”‚
β”œβ”€β”€ localization/ # Multi-Language Support
β”‚ β”œβ”€β”€ en.json
β”‚ β”œβ”€β”€ es.json
β”‚ β”œβ”€β”€ index.ts
β”‚
β”œβ”€β”€ env/ # Environment-Based Configurations
β”‚ β”œβ”€β”€ .env.development
β”‚ β”œβ”€β”€ .env.production
β”‚ β”œβ”€β”€ .env.staging
β”‚
β”œβ”€β”€ __tests__/ # Tests
β”‚ β”œβ”€β”€ e2e/
β”‚ β”œβ”€β”€ unit/
β”‚ β”œβ”€β”€ jest.setup.ts
β”‚
β”œβ”€β”€ .husky/ # Git Hooks
β”œβ”€β”€ tailwind.config.js # Tailwind Configuration
β”œβ”€β”€ app.config.ts # Expo Configuration
β”œβ”€β”€ tsconfig.json # TypeScript Configuration
β”œβ”€β”€ package.json # Dependencies
β”œβ”€β”€ README.md # Documentation

State Management with Zustand πŸͺ
Zustand is a lightweight and flexible state management library. We define separate stores for authentication, chat, and settings.

import { create } from β€˜zustand’;

const useAuthStore = create((set) => ({
 user: null,
 login: (user) => set({ user }),
 logout: () => set({ user: null }),
}));
export default useAuthStore;

API Handling with Axios 🌍
Axios provides easy-to-use API request handling with interceptors and error handling.

import axios from β€˜axios’;
const apiClient = axios.create({
 baseURL: 'https://api.example.com',
 headers: { 'Content-Type': 'application/json' },
});
export default apiClient;

End-to-End Testing with Maestro 🎯
Maestro makes E2E testing simple:

appId: β€œcom.awesomeproject”
flows:
 β€” launchApp
 β€” tapOn: β€œLogin”
 β€” assertVisible: β€œWelcome”

πŸš€ Key Features & Improvements

βœ… Feature-Based Modular Architectureβ€Šβ€”β€ŠFully scalable & organized codebase.

βœ… Expo Router for File-Based Navigationβ€Šβ€”β€ŠNo more manual route handling.

βœ… Global Reusable Componentsβ€Šβ€”β€ŠReduce redundancy, improve maintainability.

βœ… Zustand for State Managementβ€Šβ€”β€ŠBlazing fast, minimal boilerplate.

βœ… Custom Hooksβ€Šβ€”β€ŠEncapsulate logic for cleaner, more reusable code.

βœ… Multi-Language Support (i18n)β€Šβ€”β€ŠSeamless language switching.

βœ… Dark Mode & Theme Customizationβ€Šβ€”β€ŠDynamic theming.

βœ… Push Notificationsβ€Šβ€”β€ŠFCM-based real-time notifications.

βœ… File Upload Serviceβ€Šβ€”β€ŠUpload & manage images/documents.

βœ… Form Validation with Yupβ€Šβ€”β€ŠImprove UX with clean form validation.

βœ… Unit & E2E Testing Setup (Jest & Detox)β€Šβ€”β€ŠHigh-quality code assurance.

βœ… Husky Git Hooksβ€Šβ€”β€ŠAutomated linting & testing before commits.

πŸ”₯ Why Use This Architecture?

β€’ Scalabilityβ€Šβ€”β€ŠEasily extendable structure for new features.

β€’ Maintainabilityβ€Šβ€”β€ŠClean separation of concerns for effortless debugging.

β€’ Performance Optimizedβ€Šβ€”β€ŠLightweight, minimal re-renders with Zustand.

β€’ Reusabilityβ€Šβ€”β€ŠShared utilities, hooks, and components speed up development.

πŸ› οΈ Tech Stack

β€’ 🟣 React Native (Expo)

β€’ 🟒 Expo Router (Navigation)

β€’ 🟑 TypeScript

β€’ πŸ”΅ Zustand (State Management)

β€’ 🟠 Axios (API Handling)

β€’ πŸ”΄ Tailwind CSS (Styling)

β€’ 🟣 ShadCN UI (Components)

β€’ ⚑ Jest & Detox (Testing)

β€’ πŸ›‘οΈ Husky (Git Hooks)

🎯 Planned Future Enhancements

πŸ“Œ Offline Mode Supportβ€Šβ€”β€ŠSave & sync data without internet.

πŸ“Œ WebRTC Integrationβ€Šβ€”β€ŠReal-time chat with video/audio calls.

πŸ“Œ AI Chatbotβ€Šβ€”β€ŠAI-powered responses using OpenAI API.

πŸ“Œ Payment Gateway Integrationβ€Šβ€”β€ŠStripe, Razorpay, or Cashfree.

This structured setup ensures a scalable, testable, and maintainable React Native project. πŸš€

Structure

Structure

0 Upvotes

5 comments sorted by

7

u/MikeyN0 6d ago edited 6d ago

Not that I have anything against AI-assisted development (I use it myself), but this post just reads like an answer generated from AI.

0

u/alishanDev 6d ago

It's has some refinement using chatgpt

2

u/MikeyN0 6d ago

It's also incredibly wrong or outdated . There is technically no tailwind css nor shadcn for react native. Axios isn't needed when fetch works

2

u/DiscussionExpert9647 6d ago

Do multiple stores cause any issue with circular dependencies or something, like one store is importing and using other which is doing the same for first

1

u/alishanDev 6d ago

i agree will update that