Recommended Folder Structure React Native Expo
Published
•4 min read
project-root/
│
├── app/ # If you're using Expo Router (v2+)
│ ├── _layout.tsx # Main layout (like stack navigation)
│ ├── index.tsx # Home screen (default route)
│ ├── auth/ # Auth-related screens
│ │ ├── login.tsx
│ │ └── register.tsx
│ ├── dashboard/
│ │ ├── index.tsx
│ │ └── profile.tsx
│ └── (other routes...)
│
├── src/ # If you’re not using Expo Router
│ ├── screens/ # All main app screens
│ │ ├── HomeScreen.tsx
│ │ ├── LoginScreen.tsx
│ │ ├── ProfileScreen.tsx
│ │ └── index.ts # Optional barrel export
│ │
│ ├── components/ # Reusable UI components
│ │ ├── Button.tsx
│ │ ├── InputField.tsx
│ │ ├── Header.tsx
│ │ └── index.ts
│ │
│ ├── modals/ # All modal components
│ │ ├── CoinsPopup.tsx
│ │ ├── ConfirmDialog.tsx
│ │ └── index.ts
│ │
│ ├── hooks/ # Custom React hooks
│ │ ├── useAuth.ts
│ │ ├── useFetch.ts
│ │ └── useDebounce.ts
│ │
│ ├── context/ # React Context providers
│ │ ├── AuthContext.tsx
│ │ ├── ThemeContext.tsx
│ │ └── index.ts
│ │
│ ├── utils/ # Helper functions and constants
│ │ ├── date.ts
│ │ ├── number.ts
│ │ ├── storage.ts
│ │ └── index.ts
│ │
│ ├── types/ # TypeScript interfaces & types
│ │ ├── navigation.ts
│ │ ├── user.ts
│ │ ├── api.ts
│ │ └── index.ts
│ │
│ ├── services/ # API calls or external services
│ │ ├── apiClient.ts
│ │ ├── authService.ts
│ │ └── userService.ts
│ │
│ ├── config/ # App-wide configuration
│ │ ├── env.ts
│ │ ├── constants.ts
│ │ └── theme.ts
│ │
│ └── navigation/ # Navigation setup (if not using Expo Router)
│ ├── AppNavigator.tsx
│ └── AuthNavigator.tsx
│
├── assets/ # Static assets (images, fonts, icons)
│ ├── fonts/
│ ├── icons/
│ └── images/
│
├── .env # Environment variables
├── app.json # Expo configuration
├── package.json
├── tsconfig.json
└── README.md
🧠 Why This Structure Works
| Folder | Purpose |
| screens/ | Each screen in your app (Login, Home, etc.) |
| components/ | Small reusable UI pieces (Button, InputField, etc.) |
| modals/ | Isolated modal components (CoinsPopup, AlertModal, etc.) |
| hooks/ | Custom hooks (API fetching, form handling, etc.) |
| context/ | Global app context (AuthContext, ThemeContext) |
| utils/ | Helper and formatting functions |
| types/ | TypeScript interfaces & enums |
| services/ | API handling or third-party integrations |
| config/ | Environment, theme, and app-wide constants |
| navigation/ | Stack, Tab, or Drawer navigators (if not using Expo Router) |
🧠 Why Expo Uses These Characters
| Symbol | Used For | Why |
_ | Layout or private route | Keeps layout files distinct from screens |
() | Route group | To group related routes without affecting URL |
[] | Dynamic parameter | To define variable route parts |
+ | Special routes | System-level routes like +not-found or +error |
📁 Folder/File Conventions Explained
| Example | Meaning | |
_layout.tsx | /app/_layout.tsx | Defines a layout shared by all routes in the same folder (like a Stack, Tab, or Drawer). Every route inside that folder is wrapped with this layout. |
index.tsx | /app/index.tsx | The default route for that folder (like HomeScreen). When you navigate to /, this screen is shown. |
[id].tsx | /app/[id].tsx | A dynamic route — used for screens that depend on a variable parameter. Example: /users/[id] → /users/123 or /users/abc. You can access it via const { id } = useLocalSearchParams(). |
(group) | /app/(auth)/login.tsx | A route group — used to organize routes without affecting navigation paths. Useful for grouping related screens (like (auth), (tabs), (admin)), but the folder name doesn’t appear in the URL. |
+not-found.tsx | /app/+not-found.tsx | Shown automatically when a route isn’t found (like a 404 page). |
_layout.tsx inside (group) | /app/(tabs)/_layout.tsx | Defines a Tab or Stack layout specific to that group of routes. |
[...slug].tsx | /app/docs/[...slug].tsx | A catch-all route — matches multiple nested paths (e.g., /docs/getting-started/setup). |
[[...slug]].tsx | /app/docs/[[...slug]].tsx | An optional catch-all route — works with or without parameters. |
_sitemap.ts | /app/_sitemap.ts | Used to generate sitemap for web apps. Optional. |
Example Structure (Tabs + Auth + Dynamic)
app/
│
├── _layout.tsx # Root layout (global stack)
│
├── (auth)/ # Auth group (won’t appear in URL)
│ ├── _layout.tsx # Stack layout for auth flow
│ ├── login.tsx
│ └── register.tsx
│
├── (tabs)/ # Tabs group
│ ├── _layout.tsx # Tab navigation layout
│ ├── home.tsx
│ ├── profile/
│ │ ├── index.tsx # Profile main screen
│ │ └── [id].tsx # Dynamic user profile (e.g. /profile/123)
│ └── settings.tsx
│
└── +not-found.tsx # 404 screen
🔍 How this works:
/→ goes to(tabs)/home.tsx(main screen)/profile→ opens(tabs)/profile/index.tsx/profile/123→ opens(tabs)/profile/[id].tsx/login→ opens(auth)/login.tsx
(auth)and(tabs)help you organize your routes but don’t appear in URLs.
