React Native Feature-Based Project Structure
Organized by feature/domain. Scales well for teams and complex apps.
Project Directory
MyApp/
index.js
App registry entry
App.tsx
Root component with providers
package.json
tsconfig.json
babel.config.js
metro.config.js
.gitignore
android/
app/
build.gradle
ios/
MyApp/
Podfile
src/
All app code
features/
Feature modules
auth/
Auth feature
screens/
LoginScreen.tsx
SignupScreen.tsx
components/
AuthForm.tsx
hooks/
useAuth.ts
services/
authApi.ts
store/
Feature state
authSlice.ts
index.ts
Feature exports
profile/
Profile feature
screens/
components/
hooks/
services/
store/
index.ts
shared/
Shared across features
components/
Global UI components
hooks/
Common hooks
utils/
Helper functions
types/
Shared TypeScript types
constants/
App constants
navigation/
RootNavigator.tsx
Top-level navigator
AuthNavigator.tsx
MainNavigator.tsx
types.ts
store/
Redux/Zustand setup
index.ts
Store configuration
rootReducer.ts
services/
API client, storage
api.ts
Axios/fetch client
storage.ts
AsyncStorage wrapper
theme/
index.ts
Theme exports
colors.ts
spacing.ts
typography.ts
__tests__/
features/
Tests mirror feature structure
Why This Structure?
Feature-based architecture scales with your team and app complexity. Each feature is self-contained with its own screens, components, hooks, and state. Teams can work independently. Features can be lazy-loaded. Shared code stays in src/shared/.
Key Directories
- src/features/-Each feature is a vertical slice with all related code
- src/features/auth/-Auth screens, components, hooks, API, state in one place
- src/shared/-Components and hooks used across multiple features
- src/store/-Root store config—combines feature slices
- src/navigation/-Navigators organized by app section
Getting Started
npx react-native@latest init MyApp --template react-native-template-typescriptcd MyApp && mkdir -p src/{features,shared,navigation,store,services,theme}npm install @reduxjs/toolkit react-redux @react-navigation/nativenpx react-native run-ios
When To Use This
- Apps with 5+ distinct feature areas
- Multiple developers or teams working in parallel
- Complex state management requirements
- Projects expected to grow over 1+ years
- Apps that need code splitting by feature
Best Practices
- Each feature exports only what other features need via
index.ts - Features should not import from other features directly—use shared/
- Keep feature-specific types inside the feature folder
- Use absolute imports with path aliases:
@features/auth
Trade-offs
- More boilerplate-Each feature needs standard folder structure
- Initial setup-Takes time to scaffold properly
- Overkill for small apps-Simpler structures work better under 5 screens