React Native Project Structure
A scalable and maintainable folder structure for React Native applications
File Structure
- app
- (auth)
- sign-in.tsx
- sign-up.tsx
- _layout.tsx
- (tabs)
- index.tsx
- explore.tsx
- profile.tsx
- _layout.tsx
- user
- [id].tsx
- _layout.tsx
- modal.tsx
- +not-found.tsx
- _layout.tsx
- assets
- images
- fonts
- icons
- animations
- components
- ui
- forms
- navigation
- layout
- constants
- hooks
- utils
- store
- slices
- store.ts
- services
- types
- app.json
- package.json
- tsconfig.json
- expo-env.d.ts
- metro.config.js
Directory Structure Explanation
app/(auth)/
Authentication flow route group. Handles sign-in, sign-up, and related authentication screens.
app/user/[id].tsx
Dynamic route for user profiles. The [id] creates a dynamic segment accessible via router params.
app/+not-found.tsx
404 error screen shown when users navigate to non-existent routes.
store/
Global state management using Redux Toolkit, Zustand, or similar. Contains slices and store configuration.
services/
API calls, external service integrations, and data fetching logic organized by feature.
types/
TypeScript type definitions and interfaces for API responses, component props, and shared types.
components/forms/
Form-specific components with validation, error handling, and submission logic.
components/layout/
Layout components for consistent screen structure, headers, and content organization.
assets/animations/
Lottie animations, Reanimated configurations, and other motion graphics assets.
metro.config.js
Metro bundler configuration for custom transformations, aliases, and build optimizations.