React Native Project Structure
A scalable and maintainable folder structure for React Native applications
File Structure
- app
- index.tsx
- _layout.tsx
- assets
- components
- constants
- hooks
- app.json
- package.json
- tsconfig.json
Directory Structure Explanation
app/
Contains the app's file-based routing structure. Each file represents a route in your app's navigation.
app/index.tsx
The home screen of your app. This is the first screen users see when they open your app.
app/_layout.tsx
Root layout component that wraps all screens. Defines global navigation structure and providers.
assets/
Static assets like images, fonts, and icons used throughout the application.
components/
Reusable UI components that can be used across different screens and layouts.
constants/
App-wide constants like colors, dimensions, API endpoints, and configuration values.
hooks/
Custom React hooks for shared logic, API calls, and state management.
app.json
Expo configuration file that defines app metadata, build settings, and platform-specific options.
package.json
Project dependencies and scripts managed by npm or yarn.
tsconfig.json
TypeScript configuration for compilation, paths, and IDE support.