📁 React Native Project Structure for Scalable Applications
shares
If you’re building a React Native app and want a clean and scalable file structure, this post is your go-to guide. This setup is especially useful for teams and even solo developers who want to keep their codebase organized.
✅ Main Folder: All source code should reside under the src folder.
📂 src
This is the main folder that contains all application code.
📁 assets
Used to store all static resources.
Subfolders:
- images/ — All PNG, JPG, SVG icons or images.
- fonts/ — Custom fonts used in the project.
- videos/ — App intro or help videos.
- animations/ — Lottie files or JSON-based animations.
- docs/ — Any static documents like PDFs, Terms & Conditions, etc.
📁 services
Responsible for handling all API communications.
index.ts
- Creates a reusable Axios instance.
- Adds interceptors for request and response logging/authentication.
📁 api
Handles all API call definitions categorized by HTTP method.
- getRequests.ts
- postRequests.ts
- putRequests.ts
- deleteRequests.ts
📌 This keeps your HTTP logic separate and reusable across the app.
📁 components
Contains global reusable components.
Common Examples:
- CustomText.tsx
- CustomButton.tsx
- RenderListItem.tsx
- CustomModal.tsx
- Loader.tsx
- FormInput.tsx
🧠 Use atomic design principles if your app grows (Atoms, Molecules, Organisms) — I’ve explained this concept in detail at the end of the blog for better understanding.
📁 config
Centralized configuration files.
Files:
index.ts
Re-exports everything inside the config folder for easier imports.
assets.ts
Exports all static asset paths:
logo: require('../assets/images/logo.png'),
};
colors.ts — Defines all color codes.
fonts.ts — Maps all font family names to their respective keys.
📁 hooks
Contains all custom reusable hooks.
Example Hooks:
- useTimer — Timer for OTP resend logic.
- useNotifications — Handles push notifications & listeners.
- useSelectImage — Image picker from gallery or camera.
- useDebounce — Debounce any function input like search.
- useNetworkStatus — Detect online/offline status.
📁 locales
Contains translation files for multi-language support.
Example:
- en.json
- fr.json
- hi.json
You can use libraries like i18next or react-i18next for integration.
📁 routes
Handles all navigation logic using React Navigation.
Files:
- RootNavigator.tsx
- AuthNavigator.tsx
- TabNavigator.tsx
- NavigationTypes.ts — TypeScript definitions for route params.
- NavigationService.ts — Provides access to navigation outside components using refs.
📁 screens
Stores all the app screens grouped by domain.
│ ├── auth
│ │ └── Login
│ │ ├── index.tsx // UI component
│ │ └── styles.ts // StyleSheet
│ │ └── index.test.tsx // (optional) – Unit tests
│ └── tabs
│ └── Home
│ │ ├── index.tsx // UI component
│ │ └── styles.ts // StyleSheet
│ │ └── index.test.tsx // (optional) – Unit testsauth/
Optional Files per Screen:
- types.ts – Screen-specific types
- constants.ts – Local constants
- helpers.ts – Local helper functions
📁 store
Manages global state using Redux.
Files:
- store.ts — Setup Redux store and middleware.
Subfolders:
- reducers/ — All slices created via Redux Toolkit or legacy reducers.
- actions/ — All action creators (especially for API calls using Thunks or Sagas).
📁 types
Contains all TypeScript types/interfaces.
Example Files:
- UserInterface.ts
- ApiResponseTypes.ts
- NavigationTypes.ts
- FormTypes.ts
💡 Keep types separate to avoid clutter in UI or service layers.
📁 utils
Contains utility/helper functions used across the app.
Common Files:
- Analytics.ts — Track app events (e.g. Firebase or Mixpanel).
- CommonUtils.ts — Reusable utility methods.
- Logger.ts — Logs errors conditionally for dev/prod.
- ErrorManager.ts — Logs errors conditionally for dev/prod.
- DateTimeUtils.ts — Date/time formatting.
- EncryptedStore.ts — Secure storage wrapper.
- string.ts — Text formatting or string manipulation functions.
- constants.ts — App-wide constants.
📄 enum.ts
Contains all enums used in the app.
ADMIN = 'admin',
USER = 'user',
}
📄 constants.ts
Global constants used throughout the app. Examples:
export const OTP_TIMER = 30;
📸 Full Directory Structure (Visual)
├── assets
│ ├── animations
│ ├── fonts
│ ├── images
│ ├── videos
│ └── docs
│
├── components
│ ├── CustomButton.tsx
│ ├── CustomText.tsx
│ └── ...
│
├── config
│ ├── assets.ts
│ ├── colors.ts
│ ├── fonts.ts
│ └── index.ts
│
├── hooks
│ ├── useTimer.ts
│ ├── useNotifications.ts
│ └── ...
│
├── locales
│ ├── en.json
│ └── fr.json
│
├── routes
│ ├── RootNavigator.tsx
│ ├── TabNavigator.tsx
│ └── NavigationService.ts
│
├── screens
│ ├── auth
│ │ └── Login
│ │ ├── index.tsx
│ │ └── styles.ts
│ └── tabs
│ └── Home
│ ├── index.tsx
│ └── styles.ts
│
├── services
│ ├── index.ts
│ └── api
│ ├── getRequests.ts
│ ├── postRequests.ts
│ ├── putRequests.ts
│ └── deleteRequests.ts
│
├── store
│ ├── store.ts
│ ├── reducers
│ └── actions
│
├── types
│ ├── UserInterface.ts
│ └── ...
│
├── utils
│ ├── Analytics.ts
│ ├── CommonUtils.ts
│ ├── constants.ts
│ ├── enum.ts
│ └── ...
│
└── App.tsx
🏁 Final Thoughts
This structure:
✅ Keeps code modular
✅ Promotes reusability
✅ Is team-friendly and scalable
✅ Easy for junior developers to understand and contribute
❓ What does “Use atomic design principles” mean?
Atomic Design is a way of organizing your UI components based on the concept of chemistry — breaking things down from the smallest parts to the most complex.
When the sentence says:
“Use atomic design principles if your app grows (Atoms, Molecules, Organisms)”,
…it means:
👉 As your app gets larger, organize your components into levels of complexity — from smallest to biggest — so that they are reusable and maintainable.
🧪 1. Atoms
These are basic building blocks of your app.
They are the smallest reusable components and cannot be broken down further.
🔸 Examples:
- CustomText
- CustomButton
- Icon
- InputField
Think of them like individual LEGO bricks.
⚛️ 2. Molecules
These are groups of atoms working together to form a small functional unit.
🔸 Examples:
- A SearchBar (made of InputField + Icon)
- A FormRow (label + input)
- A CardHeader (image + title + subtitle)
LEGO bricks joined together into a small piece.
🧬 3. Organisms
These are complex components made of groups of molecules and atoms.
They make up sections of a screen.
🔸 Examples:
- A UserProfileCard
- A ProductListItem
- A LoginForm
Like a whole LEGO vehicle built with different pieces.
📄 4. Templates & Pages (Optional for large teams)
- Templates — Layouts that arrange organisms into a screen structure.
- Pages — Actual screens using templates and dynamic content.
✅ Why use it?
- Makes components reusable
- Keeps code organized
- Easier to test and maintain
- Great for large teams or scaling projects
📁 Example File Structure with Atomic Design
├── atoms/
│ ├── CustomText.tsx
│ ├── CustomButton.tsx
│
├── molecules/
│ ├── SearchBar.tsx
│ ├── FormRow.tsx
│
├── organisms/
│ ├── UserProfileCard.tsx
│ ├── ProductListItem.tsx