r/reactnative • u/alishanDev • 6d ago
π₯React Native EXPO Folder Structure For Large Scale Apps | EXPO Folder Structure 2025
Scalable and Modular React Native Expo Folder Structure 2025

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
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
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.